Web前端首页
HTML
忆往昔，你是否还记得当初的CSS组合选择符？

问答社区更多 >

忆往昔，你是否还记得当初的CSS组合选择符？

作者：Terry2019.05.14来源：Web前端之家浏览：8621评论:1

关键词：css 组合选择符

今天本来没想好分享什么话题，突然一个哥们【后端开发工程师】咨询我一个问题：li+li，li+li:before是什么意思？想了想，好久没分享过关于CSS的文章了，就谈谈CSS组合选择符的基础知识吧。

首先我们要了解下什么是CSS组合选择符?

CSS组合选择符定义

简单来说：组合选择符说明了两个选择器直接的关系，CSS组合选择符包括各种简单选择符的组合方式。

在CSS&CSS3中，包含了四种组合方式：

◆ 后代选择器(以空格分隔)

◆ 子元素选择器(以大于号分隔）

◆ 相邻兄弟选择器（以加号分隔）

◆ 普通兄弟选择器（以破折号分隔）

接下来我们一一对于这四种组合方式进行分析。

后代选择器

后代选择器用于选取某元素的后代元素。以空格分隔，这个我们经常用到。以下实例选取所有<p>元素插入到 <div>元素中：

div p{
  background-color:yellow;
}

这个很简单。

子元素选择器

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。以下实例选择了<div>元素中所有直接子元素 <p> ：

div>p{
  background-color:yellow;
}

看个完整的DEMO代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Web前端之家www.jiangweishan.com</title>
<style>
html{font-size:20px;}
div>p{
background-color:yellow;
}
</style>
</head>
<body>
<div>
    <p>Web前端之家www.jiangweishan.com</p>
    <p>Web前端之家www.jiangweishan.com</p>
    <p>Web前端之家www.jiangweishan.com</p>
    <p>Web前端之家www.jiangweishan.com</p>
    <p>Web前端之家www.jiangweishan.com</p>
    <p>Web前端之家www.jiangweishan.com</p>
</div>
</body>
</html>

效果如下图：

说明：这个DIV是嵌套P标签的。

相邻兄弟选择器

相邻兄弟选择器（Adjacent sibling selector），也可以称为同级选择器，它可选择紧接在另一元素后的元素，且二者有相同父元素。

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。

以下实例选取了所有位于 <div> 元素后的第一个 <p> 元素：

div+p{
  background-color:yellow;
}

看个完整的DEMO代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Web前端之家www.jiangweishan.com</title>
<style>
html{font-size:20px;}
div+p{
background-color:yellow;
}
</style>
</head>
<body>
<div></div>
<p>Web前端之家www.jiangweishan.com</p>
<p>Web前端之家www.jiangweishan.com</p>
<p>Web前端之家www.jiangweishan.com</p>
<p>Web前端之家www.jiangweishan.com</p>
<p>Web前端之家www.jiangweishan.com</p>
<p>Web前端之家www.jiangweishan.com</p>
</body>
</html>

效果图如下：

说明：这个DIV跟P标签是同级的。

后续兄弟选择器

后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。以下实例选取了所有<div>元素之后的所有相邻兄弟元素 <p> :

div~p{
  background-color:yellow;
}

看个完整的DEMO代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Web前端之家www.jiangweishan.com</title>
<style>
html{font-size:20px;}
div~p{
background-color:yellow;
}
</style>
</head>
<body>
<div></div>
<p>Web前端之家www.jiangweishan.com</p>
<p>Web前端之家www.jiangweishan.com</p>
<p>Web前端之家www.jiangweishan.com</p>
<p>Web前端之家www.jiangweishan.com</p>
<p>Web前端之家www.jiangweishan.com</p>
<p>Web前端之家www.jiangweishan.com</p>
</body>
</html>

效果跟第二种一样

说明：这个DIV跟P标签是同级的。

相邻兄弟选择器+伪类组合

这个也就是刚才我一哥们提到的组合问题。来个实例说明下吧。

ul.box.li+li:before {
    padding: 8px;
    color: red;
    content: "/\00a0";
}

然后页面出现：

TIM图片20190514154350.png

DEMO代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Web前端之家www.jiangweishan.com</title>
<style>
ul,li{list-style:none;font-size:30px;}
ul.box li{display: inline-block;*display: inline;*zoom:1;vertical-align:middle}
ul.box li+li:before {
padding: 8px;
color: red;
content: "/\00a0";
}
</style>
</head>
<body>
<h2>面包屑导航</h2>
<ul class="box">
  <li><a href="https://www.jiangweishan.com">Web前端之家 </a></li>
  <li><a href="https://www.jiangweishan.com">前端 </a></li>
  <li><a href="https://www.jiangweishan.com">HTML </a></li>
  <li><a href="https://www.jiangweishan.com">CSS3 </a></li>
</ul>
</body>
</html>

我们发现斜杠变红了，原理是这样的：

每两个li的组合，第二个li之前加上该css；在上面的例子中，也就是在两个文字之间加上斜杠这个字符。

我们再来试一下另外一种方案，在第二个li后面加上一个其他的标签，DEMO代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Web前端之家www.jiangweishan.com</title>
<style>
ul,li{list-style:none;font-size:30px;}
.box span{display: inline-block;vertical-align:middle;padding:0 20px;}
ul.box li{display: inline-block;*display: inline;*zoom:1;vertical-align:middle}
ul.box li+li:before {
padding: 8px;
color: red;
content: "/\00a0";
}
</style>
</head>
<body>
<h2>面包屑导航</h2>
<ul class="box">
  <li><a href="https://www.jiangweishan.com">Web前端之家 </a></li>
  <li><a href="https://www.jiangweishan.com">前端 </a></li>
  <span>欢迎来到Web前端之家</span>
  <li><a href="https://www.jiangweishan.com">HTML </a></li>
  <li><a href="https://www.jiangweishan.com">CSS3 </a></li>
</ul>
</body>
</html>

测试效果如下图：