CSS 复合选择器

• 交集选择器
• 并集选择器
• 后代选择器
• 子元素选择器
• 属性选择器
• 伪元素选择器
• ::before 和 ::after 伪元素选择器

• 复合选择器可以更精准、高效的选择目标元素（标签）
• 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成
• 常用的复合选择器有：交集选择器、并集选择器、后代选择器、子选择器、伪类选择器等

交集选择器

特点：

1. 选择器+类名来书写。h3.类名｛属性 ｝同一级别的内容
2. 交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，
   语法：

元素1, 元素2 { 样式声明 }
p.one   选择的是： 类名为 .one  的 段落标签。
< h3 class='red' >

记忆技巧：
交集选择器 是 并且的意思。 即…又…的意思 。同一个标签有两个不同的属性。

并集选择器

特点：

1. 并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明。
2. 页面中有多个选择器需要用相同属性时，可同时声明来修改
3. 每个选择器用逗号

   ‘，’

   隔开

语法：

.one,
p,
#test {
color: #F00;
}
表示   .one 和 p  和 #test 这三个选择器都会执行颜色为红色。  通常用于集体声明。

记忆技巧：
并集选择器

和

后代选择器

特点：

1. 如里面有多重关系，如有爷爷–爸爸–孙子 的关系，当出现嵌套关系，最里面的标签变成最外面的标签的后代。
2. 后代选择器又称为包含选择器，可以选择父元素里面的子元素
3. 其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
4. 每个元素标签用

   空格

   隔开
   语法：
   在html中的结构：

<div class= 'hou' >
<ul>
<li> 子元素 </li>   <!-- div 与 ul 和 li 发生了嵌套关系 -->
<li> 子元素 </li>
</ul>
</div>

在CSS中的声明：

.hou  ul  li {
样式声明
}

特点：

1. .hou ul li

   之间用

   空格

   隔开

2. .hou

   是父级，

   ul

   和

   li

   是子级，最终选择的是

   li

3. 中间的

   ul

   可以省略，直接写成

   .hou li {样式声明 }

   第二个元素可以是儿子，也可以是孙子，只要是包含在第一个元素里面的即可
4. 元素1和元素2可以是任何基础选择器

子元素选择器

子元素选择器又称为子选择器，只能选择其第一代子元素。
关系中有爷爷 - 爸爸 - 孙子: 需要把儿子选出来，中间用

>

div  >  ul  {
样式声明
}

特点：

1. 第一个元素和第二个元素中间用

   大于

   号 隔开
2. 元素1是父级，元素2是子级，最终选择的是元素2
3. 元素2必须是

   亲儿子

   ，即第一代子元素，其孙子、重孙都不行

属性选择器

选择标签带有特殊属性的选择器

E[attr]

attr

li [type]

E[attr=val]

val

div [class=vegetable]

E[attr^=val]

val

“开始”

div [class^=green

E[attr$=val]

val

“结束”

div [class $ = t]

E[attr\*=val]

val

“任意”

div [class * = ea ]

/* 获取到 拥有 该属性的元素 */
li[type] {
border: 1px solid gray;
}
/* 获取 属性等于某个值的 元素 属性值 可以使用 引号进行包裹 */
li[type="vegetable"] {
background-color: green;
}
/* 使用空格分隔的 多个属性 其中有某个属性即可获取 */
li[type~="hot"] {
font-size: 40px;
}
/* 获取以某个属性开头的语法  */
li[color^='green'] {
background-color: orange;
}
/* 获取以某个值 结尾的属性 */
li[type$='t']{
color: hotpink;
font-weight: 900;
}

/* 获取 属性中 拥有某个值的 元素 */
li[type*=ea] {
font-size: 100px;
}
/*  如果属性的值 只有very 也能够获取  用来获取 多个属性 并且 使用-连接 */
li[price|='very'] {
background-color: darkred;
}

<ul>
<li type='fruit' color='green'>西瓜</li>
<li type='vegetable' color='greenyellow'>西兰花</li>
<li type='meat'>牛肉</li>
<li type='meat hot'>猪肉</li>
<li type='drink hot'>可乐</li>
<li type='drink hot'>雪碧</li>
<li price='very-cheap'>红酒</li>
<li price='very'>白酒</li>
</ul>

伪元素选择器

属性：

• 伪元素选择器：需要在前面加两个冒号”

  ：：

  “

伪类选择器与伪元素选择器的区别

• 伪类选择器： 元素在前面加一个冒号 "

  ：

  "
• 伪元素选择器 ： 元素前面加两个冒号 ”

  ：：

  “

其语法如下：

div  ::first-letter  {
样式声明
}

特点:

1. E::first-letter文本的第一个单词或字（如中文、日文、韩文等）
2. E::first-line 文本第一行；
3. E::selection 可改变选中文本的样式；

::before 和 ::after 伪元素选择器

在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合

content

div::befor {
content:"开始位置";
}
div::after {
content:"结束位置";
}

• ::befor

  在…之前

• ::after

  在…之后
• 在盒子或文本前面 / 后面加入另外一个元素。

如在div 前面加一句话 ‘我是前面添加的文字’ ，其属性为颜色为红色，字体为 15px

div::before {
content:'我是前面添加的文字';
font-sizi:15px;
color: #f00;
}

如果本人哪里理解错误了，还望各位大神评论指导出来！