CSS 选择器
一、常用选择器
-
元素选择器
p {} -
id 选择器
#name {} -
class 类选择器
.box {}
二、复合选择器
-
交集选择器
p.red {}.box.red {}选中同时符合多个条件的元素
注意：交集选择器中如果有元素选择器，而元素选择器必须在开头
-
选择器分组（并集选择器）
h1, p, .box {}
同时选择多个选择器对应的元素
三、关系选择器
-
子选择器 .box > p {}
选中指定父元素的指定子元素（可以多个）
-
后代选择器 .box p {}
选中指定父元素的指定后代元素（可以多个）
-
兄弟选择器
-
p + span {}选择下一个指定的兄弟元素，必须是紧挨着的，而且只能选择一个
-
p ~ span {}选择下边所有指定的兄弟，被隔开的都能选择到，是多个
- 属性选择器
-
p[属性名] {} 选择含有此属性的元素
-
p[属性名 = 属性值] {} 选择含有指定属性和属性值的元素
-
p[属性名 ^= 属性值] {} 选择属性值以指定值开头的元素
-
p[属性名 $= 属性值] {} 选择属性值以指定值结尾的元素
-
p[属性名 *= 属性值] {} 选择属性值中含有某值的元素
四、伪类选择器
伪类：不存在的类，特殊的类
-
伪类用来描述一个元素的特殊状态
例如，第一个子元素，被点击的元素，鼠标移入的元素。。。
-
伪类一般是 :
-
:first-child第一个子元素 -
:last-child最后一个子元素 -
:nth-child()选中第n个子元素特殊值：
n 第n个 n的范围 0 ~ +infinity
2n 或 even 表示选中偶数位的元素
2n+1 或 odd 表示选中奇数位的元素
注意：是根据所有的子元素进行排序
-
:first-of-type -
:last-of-type -
:nth-of-type()这些伪类功能和上面的
nth-child()类似，但是他们是在同类元素中排序 -
:not()否定伪类将符合条件的元素从选择器中去除
eg:
ur > li:not(:nth-of-type(3)){}除了第3个 li 的其他所有 li 元素
-
-
超链接の伪类
-
a:link用于表示没访问过的链接（正常的链接） -
a:visited访问过的链接由于隐私的问题，所有 visited 这个伪类只能修改链接的颜色
-
a:hover鼠标移入的状态 -
a:active鼠标点击时的状态
注意：link 和 visited 是 a 特有的伪类，而 hover 和 active 是所有元素都有的
-
五、伪元素选择器
伪元素：表示页面中一些特殊的并不真实的存在的元素（特殊的位置）
-
伪元素使用 :: 开头
-
::first-letter表示第一个字母 -
::first-line表示第一行 -
::selection表示选中的内容 -
::before元素的开始 -
::after元素的最后before 和 after 必须结合 content 属性使用
-
六、选择器权重
样式冲突：当我们通过不同的选择器，选中相同的元素，并且设置不同的样式，此时有冲突了
所以在样式冲突发生时，应用哪个样式就由选择器的权重（优先级）决定
选择器的权重：
-
内联样式 1,0,0,0
-
id选择器 0,1,0,0
-
类元素选择器（包括伪类） 0,0,1,0
-
元素选择器 0,0,0,1
-
通配选择器 0,0,0,0
* {} -
继承选择器 没有优先级
比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器单独计算）
选择器的累加不会超过其最大的数量级，类选择器再高也不会超过id选择器
如果优先级计算后相同，此时则优先使用靠下的样式（代码顺序解释）
!important
可以在某一个样式后边加上 !important ，则此时该样式会取到最高的优先级，甚至超过内联样式
注意，在开发中这个要慎用！
