目录
一、复合选择器：
复合选择器分为两类，交集选择器和并集选择器（群组选择器）
1.交集选择器：
语法：选择器1选择器2选择器3····{}
作用：选中同时符合选择器1及选择器2···的结构
注意：1、如果选择器中有标签选择器，标签选择器必须放第一位
2、选择器的优先级是合并计算
2.并集选择器（群组选择器）:
语法：选择器1,选择器2,选择器3,····{}
作用：同时选中选择器1和选择器2···对应的结构
注意：选择器的优先级是分别计算的
例1：选择器匹配所有class为red的<div>元素
css
div.red {
font-size: 24px;
}
例2：选择器匹配id为title1和class为title2的所有元素
css
#title1,
.title2 {
color: orange;
}
二、关系选择器
关系选择器包括：子选择器、后代选择器、和下一个兄弟选择器，下面所有兄弟选择器四种
1、子选择器：
语法：父元素>子元素{}
作用：通过父元素选中直接子元素（嵌套在别的块标签里的就不选）
注意：原则上，结构可以一层层限制，但不宜太深（一般最多三层即可）
一则：可读性太差 二则：修改维护也不方便
2、后代选择器：
语法：祖先元素 后代元素{} -- 注意元素中间是有一个空格的
作用：通过祖先元素选中所有后代元素（会检索嵌套在别的标签里的后代元素）
注意：1、祖先关系包含父子关系
2、能用子选择器就不用后代选择器，子选择器的效率比后代要高
3、下一个兄弟选择器：
语法：兄+弟{}
作用：选中紧跟其后的一个弟弟（弟元素）
注意：写的时候注意要匹配的弟元素一定紧跟兄元素其后，不要中间有<br>之类
4、选择下面所有的兄弟选择器：
语法：兄~弟{}
作用：选中紧跟其后的所有弟弟（弟元素）
注意：前面的元素不选，从选中的弟元素往下开始匹配
例题：
html
<div id="cs">
我是超市<br />
<span>我是零食区</span>
<p>
我是生鲜区
<span>肉类 </span>
</p>
<span>姑临一我就清，颜不。</span>
<p>太判笔下尹呼中来皇。</p>
<br />
<br />
<span class="s2">我是鞋包区</span><br />
<strong>言揽使上便措，白千。</strong>
<span>订瞠训，挟的感，国。</span>
<em>不文见，几一家，一。</em>
<span class="s2">我是洗护区</span>
</div>
根据如上div内容回答下面的四个例题
例一：选中id为cs的元素内直接子段落<p>标签的直接子<span>元素
css
#cs > p > span {
color: red;
}
例二：选中id为cs的元素内所有<span>元素
css
#cs span {
color: red;
}
例三：选中id为cs的直接子元素p紧跟其后的类名为s2的兄弟标签
css
#cs > p + .s2 {
background-color: red;
}
中间有两个换行，紧跟在p后面的是<br>,把这两换行删掉就可以选中了
例四：选中id为cs的直接子元素span后面的所有p标签
css
#cs>span~p {
background-color: red;
}
三、属性选择器：
语法：[属性名]{} 选择含有指定属性的元素
属性名=属性值\]{} 选择含有指定属性和属性值的元素 \[属性名\^=属性值\]{} 选择属性值以指定值开头的元素 \[属性名$=属性值\]{} 选择属性值以指定值结尾的元素 \[属性名\*=属性值\]{} 选择属性值含有某值的元素 *** ** * ** *** 1.选择含有id属性的元素 ```css [id] { color: red; } ``` 2.选择含有title属性且属性值等于ab的元素 ```css [title=ab]{ background-color: pink; } ``` 3.选择含有title属性且属性值是由ab开头的元素 ```css [title^="ab"] { background-color: pink; } ``` 4.选择含有title属性且属性值是由ab结尾的元素 ```css [title$="ab"] { background-color: pink; } ``` 5.选择title属性且属性值含有da的元素 ```css [title*="da"] { background-color: pink; } ``` *** ** * ** *** #### 四、伪类选择器： 伪类选择器：不是固定的类，可变化的，可以根据情况，应用在不同的结构上 常用的伪类选择器：顺序类的，鼠标移入，鼠标点击，否定伪类······· 语法： ：伪类选择器名{} ##### 1、顺序伪类 特点：一般请情况下，使用：开头 （1）:first-child 第一个子元素 （2）:last-child 最后一个子元素 （3）:nth-child() 选中第n个子元素 特殊值： n 所有的 2n或even 选中偶数 2n+1或odd 选中奇数 以上这些伪类都是根据所有的子元素进行排序 （1）:first-of-type （2）:last-of-type （3）:nth-of-type() 功能跟上面相似， 不同的是，这是在同类型的子元素中去选择 *** ** * ** *** 需求一：将ul里的第一个li自动一直设置为红色 匹配列表与第一个元素的交集 ```css li:first-of-type { color: red; } ``` *** ** * ** *** ##### 2、not()否定伪类 作用：将符合条件的元素从选择器中去除 匹配将列表中class为l1的从选择器中去除 ```css li:not(.l1) { color: red; } ``` ##### 3、元素的伪类 超链接a标签是一个特殊的标签它有独有2个伪类选择器，:link\&:visited 1、:link 用来表示未访问过的链接（正常链接） 2、:visited 用来表示访问过的链接（ 由于隐私的原因，所以visited只能改字体颜色） ```css a:link { color: red; background-color: aqua; font-size: 12px; } a:visited { color: green; background-color: blueviolet; font-size: 30px; } ``` :visited伪类选择器的font-size不会生效 *** ** * ** *** ##### 4、鼠标移入 **:hover** 用来表示鼠标移入的状态 ```css h2:hover { color: red; font-size: 40px; background-color: green; text-decoration: underline; } ``` ##### 5、鼠标点击 **:active** 鼠标点击后的状态 .title的默认背景色为粉色，.title:active伪类在激活时将文字变成白色，.a1:hover伪类在悬停时文字变为黑色，.a1:active伪类在激活时背景变成粉色。 ```css .title { background-color: pink; } .title:active { color: white; } .a1:hover { color: black; } .a1:active { background-color: pink; } ``` ##### 6、按钮隐藏显示元素 ```html
``` class值box设置盒子宽高背景，并将其隐藏，button:hover+.box 按钮的紧跟着的弟元素box,显示 ```html ``` *** ** * ** *** ##### 面试题： 超链接的4个伪类，设置时，有没有顺序要求？ 遵循"lvha"的顺序 :link,:visited,:hover,:active ```css .a2:visited { color: blueviolet; } .a2:hover { color: green; } .a2:active { color: orange; } .a2:link { color: red; } ```