CSS 复合选择器 web前端 CSS 基础 选择器

可以根据选择器的类型把选择器分为基础选择器【详情请见： CSS 基础篇 （一） web前端基础.】和复合选择器，复合选择器是建立在基础选择器的基础上，对基础选择器进行组合形成的。

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

交集选择器

特点：

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]	表示font 等于
E[attr^=val]	属性值里包含val字符并且在“开始”位置	div [class^=green]	表示font 开始位置
E[attr$=val]	属性值里包含val字符并且在“结束”位置	div [class $ = t]	表示footer 结束位置
E[attr\*=val]	属性值里包含val字符并且在“任意”位置	div [class * = ea ]	表示tao任意的位置

	/* 获取到 拥有 该属性的元素 */
	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;
}

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