css中的各种选择器

基本选择器

1.元素选择器

  作用:根据标签名来选中指定的元素

  语法:标签名{ }

  例子: p{ } h1{ } div{ }

2.id选择器

  作用:根据元素id属性选中一个元素

  语法:#id属性值{ }

  例子: #box{ }

3.类选择器

  作用:根据元素属性值选中一组元素

  语法: .class属性值{ }

  例子: .blue{ } .font{ }

   注意:使用多个类选择器时,用空格隔开 例如 class="blue font"

4.通配选择器

  作用:选中页面中的所有元素

  语法:*{ }

---

复合选择器

1.交集选择器

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

  语法: 选择器1选择器2选择器3选择器n{ }

  注意:交集选择器中如果含有元素选择器,必须使用元素选择器开头
    选择器可以是标签名称,也可以是id、class名称

  例如: div.red{ } √ .reddiv{ } ×

2.并集选择器

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

  语法:选择器1,选择器2,选择器3,选择器n{ }

  注意:并集选择器可以进行自由组合
    选择器可以是标签名称,也可以是id、class名称
   #h1,.p1,h1,span{ } √
   #h1,.p1,h1,span,div.red{ } √

---

关系选择器

父元素:直接包含子元素的元素叫做父元素

子元素:直接被父元素包含的元素叫做子元素

祖先元素:直接或间接包含后代元素的元素叫做祖先元素,一个元素的父元素也是它的祖先元素

后代元素:直接或间接被祖先元素包含的元素叫做后代元素,子元素也是后代元素

兄弟元素:拥有相同父元素的元素是兄弟元素

1.子元素选择器

  作用:选中指定父元素的指定子元素

  语法:父元素>子元素

2.后代选择器

  作用:选中指定元素的指定后代元素
  语法:祖先元素 后代元素1 后代元素2 后代元素n

3.兄弟选择器

作用:	选择下一个兄弟元素	选择下边所有兄弟元素
语法:	前一个元素 + 下一个兄弟元素	前一个元素 ~兄弟元素

---

属性选择器

语法	含义
[属性名]	选择含有指定属性的元素
[属性名=属性值]	选择含有指定属性和属性值的元素
[属性名^=属性值]	选择属性值以指定值开头的元素
[属性名$=属性值]	选择属性值以指定值结尾的元素
[属性名*=属性值]	选择属性值含有某值的元素

---

伪类选择器

伪类:(不存在的类,特殊的类),伪类可以看作以选中元素为基准点，此元素的一些状态或属性。
伪类一般情况下使用":"开头

  E:first-child 只要E元素是它的父级的第一个子元素，就选中

  E:last-child 只要E元素是它的父级的最后一个子元素，就选中

  :nth-child()选中第n个元素

:nth-child(an+b) 这个 CSS 伪类首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从1开始排序，选择的结果为CSS伪类:nth-child括号中表达式（an+b）匹配到的元素集合（n=0，1，2，3…）。示例：
0n+3 或简单的 3 匹配第三个元素。
1n+0 或简单的 n 匹配每个元素。（兼容性提醒：在 Android 浏览器 4.3 以下的版本 n 和 1n 的匹配方式不一致。1n 和 1n+0 是一致的，可根据喜好任选其一来使用。）
2n+0 或简单的 2n 匹配位置为 2、4、6、8…的元素（n=0时，2n+0=0，第0个元素不存在，因为是从1开始排序)。你可以使用关键字 even 来替换此表达式。
2n+1 匹配位置为 1、3、5、7…的元素。你可以使用关键字 odd 来替换此表达式。
3n+4 匹配位置为 4、7、10、13…的元素。
a 和 b 都必须为整数，并且元素的第一个子元素的下标为 1。换言之就是，该伪类匹配所有下标在集合 { an + b; n = 0, 1, 2, …} 中的子元素。另外需要特别注意的是，an 必须写在 b 的前面，不能写成 b+an 的形式。

  :first-of-type
  :last-of-type
  :nth-of-type()

​ 这几个伪类的功能和上面的相似,不同的是它们是在同类型的元素中进行排序,上述是在所有的元素中进行排序

更多伪类
选择器练习–餐厅练习

​