css 选择器

CSS 选择器

一、常用选择器

1. 元素选择器 p {}

2. id 选择器 #name {}

3. class 类选择器 .box {}

二、复合选择器

1. 交集选择器 p.red {} .box.red {}

   选中同时符合多个条件的元素

   注意：交集选择器中如果有元素选择器，而元素选择器必须在开头

2. 选择器分组（并集选择器）h1, p, .box {}

同时选择多个选择器对应的元素

三、关系选择器

1. 子选择器 .box > p {}

   选中指定父元素的指定子元素（可以多个）

2. 后代选择器 .box p {}

   选中指定父元素的指定后代元素（可以多个）

3. 兄弟选择器

• p + span {}

  选择下一个指定的兄弟元素，必须是紧挨着的，而且只能选择一个

• p ~ span {}

  选择下边所有指定的兄弟，被隔开的都能选择到，是多个

4. 属性选择器

• 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 ，则此时该样式会取到最高的优先级，甚至超过内联样式

​ 注意，在开发中这个要慎用！