一、选择器（selector）
选择器会告诉浏览器：网页上的哪些元素需要设置什么样的样式
1.元素选择器
元素选择器（标签选择器），可以根据标 签的名字来从页面中选取指定的元素。
语法：标签名 { }
p{
color: red;
}
2.类选择器
类选择器，可以根据元素的class属性值选 取元素。
语法：className { }
.p2{
color: red;
}
3.ID选择器
ID选择器，可以根据元素的id属性值选取唯一的一个元素。id属性是不能重复的。
语法：#id {}
#p1{
font-size: 20px;
}
4.复合选择器（交集选择器）
复合选择器，可以同时使用多个选择器， 这样可以选择同时满足多个选择器的元素。
语法：选择器1选择器2{}
span.p3{
background-color: yellow;
}
5.群组选择器（并集选择器）
群组选择器，可以同时使用多个选择器， 多个选择器将被同时应用指定的样式。
语法：选择器1,选择器2,选择器3 { }
#p1,.p2,h1{
background-color: yellow;
}
6.通用选择器
通用选择器，可以同时选中页面中的所有元素。
语法：*{}
*{
color: red;
}
二、标签之间的关系
父元素：直接包含子元素的元素
子元素：直接被父元素包含的元素
祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素
后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素
兄弟元素：拥有相同父元素的元素叫做兄弟元素
后代元素选择器
作用：选中指定元素的指定后代元素
语法：祖先元素 后代元素{}
<div id="d1">
<span>我是div标签中的span</span>
<p><span>我是p标签中的span</span></p>
</div>
<div>
<span>我是body标签中的span</span>
</div>
为id为d1中的span设置一个颜色为绿色
#d1 span{
color: greenyellow;
}
选中id为d1的div中的p元素中的span元素
#d1 p span{
font-size: 50px;
}
子元素选择器
作用：选中指定父元素的指定子元素
语法：父元素 > 子元素
IE6及以下的浏览器不支持子元素选择器
为div的子元素span设置一个背景颜色为黄色
div > span{
background-color: yellow;
}
三、伪类和伪元素
伪类专门用来表示元素的一种特殊的状态，比如：访问过的超链接、普通的超链接、获取焦点的文本框，当我们需要为处在这些特殊状态的元素设置样式时，就可以使用伪类
伪类选择器
虽然优先级一样，但是顺序不可变，love,hate
1.正常链接（表示普通的链接（没访问过的链接））：:link
a:link{
color: yellowgreen;
font-size: 50px;
}
2.访问过的链接（表示访问过的链接）：:visited（只能定义字体颜色）
a:visited{
color: red;
}
3.鼠标滑过的链接（表示鼠标移入的状态）：:hover
a:hover{
color: skyblue;
4.正在点击的链接（表示超链接被点击的状态）：:active
a:active{
color: black;
}
:hover和:active也可以为其它元素设置IE6中，不支持对超链接以外的元素设置:hover和:active
其他：
1.获取焦点：focus
input:focus{
background-color: yellow;
}
使用input可以创建一个文本输入框
2.选中的元素：::selection
为p标签中选中的内容使用样式可以使用::selection伪类
p::selection{
background-color: orange;
}
兼容火狐的
p::-moz-selection{
background-color: orange;
}
伪元素
使用伪元素来表示元素中的一些特殊的位置
1.:first-letter：为第一个字符设置格式
p:first-letter{
color: red;
font-size: 20px;
}
2.:first-line：为第一行设置一个背景颜色为黄色
p::first-line{
background-color: yellow;
}
3.:before表示元素最前边的部分,一般它都需要结合content这个样式一起使用,通过content可以向before或after的位置添加一些内容
p:before{
content: "我会出现在整个段落的最前边";
color: green;
4.:after表示元素最后边的部分
p:after{
content: "我会出现在整个段落的最后边";
color: orange;
}
四、属性选择器
作用：可以根据元素中的属性或属性值来选取指定元素
语法：
[属性名] 选取含有指定属性的元素
[属性名="属性值"] 选取含有指定属性值的元素
[属性名^="属性值"] 选取属性值以指定内容开头的元素
[属性名$="属性值"] 选取属性值以指定内容结尾的元素
[属性名*="属性值"] 选取属性值包含指定内容的元素
为所有具有title属性的p元素，设置一个背景颜色为黄色
p[title]{
background-color: yellow;
}
为title属性值是hello的元素设置一个背景颜色为黄色
p[title="hello"]{
background-color: yellow;
}
为title属性值以ab开头的元素设置一个背景颜色为黄色
p[title^="ab"]{
background-color: yellow;
}
为title属性值以c结尾的元素设置一个背景颜色
p[title$="c"]{
background-color: yellow;
}
为title属性值包含c的元素设置一个背景颜色
p[title*="c"]{
background-color: yellow;
}
title属性，这个属性可以给任何标签指定，当鼠标移入到元素上时，元素中的title属性的值将会作为提示文字显示
五、子元素选择器
子元素选择器可以给另一个元素的子元素设置样式。
语法：父元素 ： 子元素{}
比如body ： h1将选择body子标签中的所有h1标签
first-child 选中第一个子元素
p:first-child{
background-color: deeppink;
}
last-child 选择最后一个子标签
p:last-child{
background-color: yellow;
}
nth-child 选择指定位置的子元素，该选择器后边可以指定一个参数，指定要选中第几个子元素even 表示偶数位置的子元素odd 表示奇数位置的子元素
p:nth-child(even){
background-color: yellow;
}
first-of-type；last-of-type；nth-of-type和child类似，只不过child是在所有的子元素中找，而type是在当前类型的子元素中找
六、兄弟选择器
语法:
查找后边一个兄弟元素（可以选中一个元素后紧挨着的指定的兄弟元素）:兄弟元素 + 兄弟元素{}
查找后边所有的兄弟元素:兄弟元素 ~ 兄弟元素{}
span ~ p{
background-color: yellow;
}
七、否定伪类
作用：可以从已选中的元素中剔除出某些元素
语法：:not(选择器)
p:not(.hello){
background-color: yellow;
}
八、继承
继承是指应用在一个标签上的那些CSS样式会同时被应用到其内嵌标签上
<div style="background-color: yellow;">
<p>
我是p标签中的文字
<span>我是span中的文字</span>
</p>
</div>
<span>我是p元素外的span</span>
九、选择器的权重
权重的计算
不同的选择器有不同的权重值：
内联样式：权重是 1000
id选择器：权重是 100
类、属性、伪类选择器：权重是 10
元素选择器：权重是 1
通配符：权重是 0
继承的样式，没有优先级
计算权重需要将一个样式的全部选择器相加
当选择器中包含多种选择器时，需要将多种选择器的优先级相加，然后再比较。但是注意，选择器优先级计算不会超过他的最大的数量级，如果选择器的优先级一样，则使用靠后的样式， 并集选择器的优先级是单独计算的div, p, #p1, .hello{}
可以在样式的最后添加一个!important，则此时该样式将会获取一个最高的优先级，将会优先于所有的样式显示，甚至超过内联样式，但是在开发中，尽量避免使用!important
网友评论