CSS基础及各类选择器 | 青训营笔记这是我参与「第四届青训营」笔记创作活动的第一天，对CSS部分基础知识及各类选择器

这是我参与「第四届青训营」笔记创作活动的第一天，对CSS部分基础知识及各类选择器分类整理如下，

CSS（Cascading Style Sheets）:

用来定义页面元素的样式。

· 设置字体和颜色 
· 设置位置和大小
· 添加动画效果

页面中使用CSS的三种方式：

一、外链：

<link ref="stylesheet" href="/assets/style.css">

二、嵌入：

<style> 
li {
    margin:0; 
} 
p { 
    margin:lem 0; 
} 
</style>

三、内联：

<p style="margin:lem 0">content</p>

CSS如何工作：

CSS工作.png

CSS选择器：

CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。

选择器的类型：

大致可将选择器分为以下几种类型：

通配选择器：

* {
    /*去掉浏览器的四周白带*/
     margin:0px;
     padding:0px;

}

标签选择器：

span {
    color: green;
    font-size: 20px;
}

类选择器：

.style1 {
    background-color: green;
}

id选择器：

#div1 {
    background-color: yellow;
}

属性选择器：

input[type = 'text'] {
    background-color: gray
}

伪类选择器：

伪类用于定义元素的特殊状态。可以用于：

·设置鼠标悬停在元素上时的样式 
·为已访问和未访问链接设置不同的样式 
·设置元素获得焦点时的样式

语法：

selector:pseudo-class { 
    property: value; 
}

实例：

/* 未访问的链接 */ 
a:link { 
    color: #FF0000; 
} 
/* 已访问的链接 */ 
a:visited { 
    color: #00FF00; 
} 
/* 鼠标悬停链接 */
a:hover { 
    color: #FF00FF; 
} 
/* 已选择的链接 */
a:active { 
    color: #0000FF; 
}
/* 第一个子元素 */
p:first-child { 
    color: blue; 
}

组合选择器：

直接组合：AB 【满足A同时满足B】

input:focus {}

后代组合：A B 【选中B,如果他是A的子孙】

div p {}

亲子组合： A > B 【选中B,如果他是A的子元素】

div>p {}

相邻组合：A + B 【选中B,如果他紧跟在A后面】

div+p {}

兄弟组合：A ~ B 【选中B,如果他在A后且和A同级】

div~p {}

CSS基础及各类选择器 | 青训营笔记