版权声明
- 本文原创作者：清风不渡
- 博客地址：https://blog.csdn.net/WXKKang
一、CSS关系选择器类型
重拾前端记忆，记录学习笔记，现在进入CSS关系选择器类型部分，CSS属性大致分为后代选择器、子代选择器、相邻兄弟选择器及通用兄弟选择器这四类，以下一一说明，为方便记录，采用内部样式进行举例。
1、后代选择器
说明：后代选择器选择所有被A包含的B元素，中间用空格隔开，语法如下：
A B{}
举例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>清风不渡</title>
<style>
.ul li {
color: red;
}
</style>
</head>
<body>
<ul class="ul">
<li>蔬菜</li>
<li>水果</li>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
</ul>
<li>主食</li>
</ul>
</body>
</html>
2、子代选择器
说明：子代选择器选择所有是A的直接子元素B，对更深的不起作用，中间用>隔开，语法如下：
A>B{}
举例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>清风不渡</title>
<style>
.ul>li {
color: red;
}
</style>
</head>
<body>
<ul class="ul">
<li>蔬菜</li>
<li>水果</li>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
</ul>
<li>主食</li>
</ul>
</body>
</html>
3、相邻兄弟选择器
说明：相邻兄弟选择器选择紧跟A元素后的B元素，中间用+隔开，语法如下：
A+B{}
举例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>清风不渡</title>
<style>
.one+p {
color: red;
}
</style>
</head>
<body>
<P class="one">这是相邻兄弟选择器的第一行</P>
<p>这是紧跟的第二行</p>
<p>这是不相邻的第三行</p>
</body>
</html>
4、通用兄弟选择器
说明：通用兄弟选择器选择A元素后的所有兄弟元素B，用~隔开，语法如下：
A~B{}
举例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>清风不渡</title>
<style>
.one~p {
color: coral;
}
</style>
</head>
<body>
<P class="one">这是通用兄弟选择器第一行</P>
<p>这是通用兄弟选择器的第二行</p>
<p>这是通用兄弟选择器的第三行</p>
</body>
</html>