css 选择器

CSS 选择器

一、常用选择器

1. 元素选择器 p {}

2. id 选择器 #name {}

3. class 类选择器 .box {}

二、复合选择器

交集选择器 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 属性使用