CSS选择器

目录

一、常用的四类选择器（基本）

1.元素选择器

2.id选择器

3.class选择器

4.通配选择器

二、复合选择器

1.交集选择器

2.并集选择器

三、关系选择器

1.子元素选择器

2.后代选择器

3.兄弟选择器（紧挨着的兄弟）

四、属性选择器

五、伪类选择器

1.常用的伪类

2.否定伪类

六、伪元素选择器

---

一、常用的四类选择器（基本）

1.元素选择器

  语法：标签名{}

  作用：选中对应标签包裹的内容

2.id选择器

  语法：#id属性值{}

  作用：选中对应id属性值的内容

3.class选择器

  语法：.class属性值{}

4.通配选择器

  语法：*{}

  作用：选中页面中所有的标签

二、复合选择器

1.交集选择器

  作用：选中同时满足多个条件的元素

  语法：选择器1选择器2选择器3......{}

  注意：如果选择器中有元素选择器，那么元素选择器必须放在第一位

2.并集选择器

  作用：同时选中满足条件的元素

  语法：选择器1，选择器2，选择器3....{}

三、关系选择器

1.子元素选择器

  作用：选中指定的父元素下面指定的子元素

  语法：父元素>子元素{}

2.后代选择器

  作用：选中指定祖先元素下面指定的后代元素

  语法：祖先元素 后代元素{}

3.兄弟选择器（紧挨着的兄弟）

  作用：选择选一个兄弟

  语法：兄+弟{}

若选择下面所有的兄弟，前面的不选，则兄~弟{}

四、属性选择器

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

五、伪类选择器

伪类：不存在的类，表示元素的一种状态

1.常用的伪类

• ：first-child 第一个子元素
• ：last-child 最后一个子元素
• ：nth-child() 选中第n个子元素

特殊值：n 所有的子元素

              2n或even选中偶数的子元素

              2n+1或odd选中奇数的子元素

以上在所有元素中进行选择

以下在同类型元素下进行选择：

• ：first-of-type 第一个子元素
• ：last-of-type 最后一个子元素
• ：nth-of-type()选中第n个子元素

2.否定伪类

样式：：not()

语法：将符合条件的元素从选择器中去除

六、伪元素选择器

同伪类一样，伪元素也是不存在的元素，表示元素的特殊状态

常用选择以下几个：

• ：：first-letter 表示第一个字母
• ：：firstl-line 表示第一行
• ：：selection 选中的内容
• ：：before 元素开始的位置
• ：：after 元素解释的位置

befor和after必须配合contend一起使用(before,after所写的内容无法选中且永远在最前和最后)