CSS-高级选择器，后代选择器、交集选择器、并集选择器，伪类选择器的用法详解

常见的高级选择器有后代选择器、交集选择器、并集选择器

后代选择器

• 选择器之间用空格隔开就是后代选择器
• 选择的是后代元素，不一定是儿子元素，后代选择器描述的是祖先结构
• 使用规则：外层标签写在前面，内层标签写在后面，中间用空格分隔，先写父亲爷爷，再写儿子孙子

示例：

<div class="box">
	<ul>
		<li>
			<p>段落p>
			<p>段落p>
			<p>段落p>
			<div>
				<p>段落p>
			div>
		li>
	ul>
div>

CSS：

.box p{
     
	color: green;
	/* 设置边框 */
	border: 1px dashed red;
}

class 属性值为 .box 的标签中的所有 p 标签都会被选中

交集选择器

• 交集选择器一般由两个选择器构成，既有选择器一的特点，也有选择器二的特点
• 交集选择器没有空格
• 交集选择器一般都是以标签名开头，比如 div.box、p.special
• 交集选择器可以连续交（一般不要这么写）

示例：

<h3 class="special">h3 标签h3>
<p class="special">p 标签p>
<p>
	<span class="special">span 标签span>
p>

CSS：

h3.special{
     
	color: purple;
}

选择的元素同时满足两个条件：必须是 h3 标签，然后必须是 class 名为 special 的标签

所以 div.red{} 和 div .red{} 不是一个意思

并集选择器

• 并集选择器是各个选择器通过 , 连接而成的，通常用于集体声明
• 给多个元素加同一个样式，多个选择器之间用逗号隔开即可

示例：

<div>这是div标签div>
<h1>这是h1标签h1>
<p>这是p标签p>
<p class="p1">这是p标签p>
<span>这是span标签span>

CSS:

h1,.p1,span{
     
    /*设置字体颜色为天蓝色*/
	color:skyblue;
}

伪类选择器

同一个标签，根据用户的某种状态不同，有不同的样式；这就叫做“伪类”

伪类用 “:” 英文冒号来表示

CSS伪类选择器：一般是给超链接加的样式

• 正常状态

  • :link (连接)鼠标点击链接之前的样式

• 放上状态

  • :hover (徘徊)鼠标放到链接上时的样式

• 激活状态

  • :active (有效的)按住鼠标左键不松开的样式，这个状态特殊短暂

• 访问过的状态

  • :visited (已访问)按下鼠标左键，并弹起，之后的样式效果

• 使用方法（示例）

  • 将"正常状态"和"访问过的状态"合二为一；也可以省略不写，直接用 a 标签：a { 这里写样式 }

    a:link, a:visited {
             
      color: red;
      text-decoration: none;
    }
    

  • “鼠标放上” 单做一种效果

    a:hover{
             
      color: green;
      text-decoration: underline;
    }
    

  • 激活状态，时间短暂一般不设样式

    a:active {
             
      color: yellow;
      text-decoration: none;
    }
    

    主要 HTML 代码

    <a href="http://www.baidu.com">超链接a>
    

• 上述的使用方法的顺序切勿打乱否则有的样式不起作用（效果可自行尝试）