一、元素选择器
作用：通过元素选择器可以选择页面中的所有指定元素
语法：标签名{}
二、类选择器
作用：通过元素的class属性值选中一组元素
语法：.class属性值{}
三、ID选择器
id选择器
作用：通过元素的id属性值选中唯一的一个元素
语法：#id属性值{}
四、复合选择器(交集选择器)
复合选择器（交集选择器）
作用：可以选中同时满足多个选择器的元素
语法：选择器1选择器2选择器N{}
五、选择器分组(并集选择器)
选择器分组（并集选择器）
作用：通过选择器分组可以同时选中多个选择器对应的元素
语法：选择器1,选择器2,选择器N{}
六、通用选择器
通配选择器
作用：可以用来选中页面中的所有的元素
语法：*{}
标签之间的关系
元素之间的关系：
父元素：直接包含子元素的元素
子元素：直接被父元素包含的元素
祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素
后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素
兄弟元素：拥有相同父元素的元素叫做兄弟元素
七、后代元素选择器
作用：选中指定元素的指定后代元素
语法：祖先元素 后代元素{}
八、伪类和伪元素
有时候，你需要选择本身没有标签，但是 仍然易于识别的网页部位，比如段落首行 或鼠标滑过的连接。CSS为他们提供一些选 择器：伪类和伪元素。
给链接定义样式：
有四个伪类可以让你根据访问者与该链接的交互方式，将链接设置成4中不同的方式。
- 正常的链接： a:olink
- 访问过的链接：a:visited(只能定义字体颜色)
- 鼠标滑过的链接：a:hover
- 正在点击的链接：a:active
这四个选择器的优先级是一样的，但是在实际应用中还是应该有顺序。必须按照上面的顺序来排列，否则会出现错误。
其他：
-
获取焦点：:focus
-
指定元素前：:before
-
指定元素后：:after
-
选中的元素：::selection
-
首字母： :first-letter
-
首行：:first-line
否定伪类
否定伪类可以帮助我们选择不是其他东西的某种东西。
语法： :not(选择器){}
比如p:not(.hello)标识选择所有的p元素，但是class为hello的除外。
九、属性选择器
属性选择器可以挑选带有特殊属性的标签。
语法：
[属性名]
[属性名 = "属性值"]
[属性名 ~= "属性值"]
[属性名 ^= "属性值"]
[属性名 |= "属性值"]
[属性名 $= "属性值"]
[属性名 *= "属性值"]
十、子元素选择器
作用：选中指定父元素的指定子元素
语法：父元素 > 子元素
比如body > h1将选择body字标签中的所有h1标签
IE6及以下的浏览器不支持子元素选择器
其他子元素选择器
- :first-child 选择第一个子标签
- :last-child 选择最后一个子标签
- :nth-child 选择指定位置的子元素
可以选择任意位置的子元素
该选择器后边可以制定一个参数，指定要选中第几个子元素- even 表示偶数为止的子元素
- odd 表示奇数位置的子元素
- :first-of-type，:last-of-type， :nth-of-type
和child类似，只不过child是在所有的子元素中找而type是在当前类型的子元素中找
十一、兄弟选择器
除了根据祖先父子关系，还可以根据兄弟关系查找元素。
语法：
兄弟元素 + 兄弟元素 ：查找后边一个兄弟元素
兄弟元素 ~ 兄弟元素：查找后边所有的兄弟元素
十二、继承
- 就像父亲的财产会遗传给儿子一样，在CSS中祖先元素的样式同样也会被子元素继承。
- 继承是指应用在一个标签上的那些CSS样式会同样被应用到其他的内嵌标签上。
- 比如为父亲元素设置了字体颜色，子元素也会应用上相同的颜色。
- 当然并不是所有的样式都会被继承。
十三、选择器的权重
在页面中使用CSS选择器选中元素时，经常都是一个元素同时被多个选择器选中。
比如：
- body h1
- h1
这两个选择器都会选择h1元素，如果两个选择器设置的样式不一样那还好不会产生冲突，但是如果两个选择器设置的是同一个样式，这样h1到底要应用哪个样式呢？CSS中会默认使用权重较大的样式，下面看一下权重又是如何计算的。
不同的选择器有不同的权重值：
- 内联样式：权重是1000
- id选择器：权重是100
- 类，属性，伪类选择器：权重是10
- 元素选择器：权重是1
- 通配符：权重是0
计算权重需要将一个样式的全部选择器相加，比如上边的body h1的权重是20，h1的权重是10，所以第一个选择器射中的样式会优先显示。
网友评论