CSS复合、关系、属性、伪类选择器

<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的元素内直接子段落标签的直接子元素

css 复制代码

#cs > p > span {
  color: red;
}

例二：选中id为cs的元素内所有元素

css 复制代码

#cs span {
  color: red;
}

例三：选中id为cs的直接子元素p紧跟其后的类名为s2的兄弟标签

css 复制代码

#cs > p + .s2 {
  background-color: red;
}

中间有两个换行，紧跟在p后面的是 ,把这两换行删掉就可以选中了

例四：选中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 复制代码

<button>按钮</button>
<div class="box"></div>

class值box设置盒子宽高背景，并将其隐藏，button:hover+.box 按钮的紧跟着的弟元素box,显示

html 复制代码

<style>
.box {
  width: 100px;
  height: 100px;
  background-color: pink;
  display: none;
}

.box:hover {
  width: 200px;
  height: 200px;
}

button:hover + .box {
  width: 200px;
  height: 200px;
  display: block;
}
</style>

面试题：

超链接的4个伪类，设置时，有没有顺序要求？

遵循"lvha"的顺序

:link,:visited,:hover,:active

css 复制代码

.a2:visited {
  color: blueviolet;
}
.a2:hover {
  color: green;
}
.a2:active {
  color: orange;
}
.a2:link {
  color: red;
}