后代选择器
选择所有被E元素包含的F元素,中间用空格隔开。
例;
html
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.continer p{
text-align: center;
}
</style>
</head>
<body>
<p>我是后代选择器</p><!--/*该p标签不是continer的后代所以其没有发生改变*/-->
<div class="continer">
<div>
<p>我是后代选择器</p>
<p>我是后代选择器</p>
<div>
<p>我是后代选择器</p>
</div>
</div>
</div>
</body>
子代选择器
选择所有作为E元素的直接子元素F,对更深一层的元素不起作用,用>符号表示。
例:
html
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.continer>p{
text-align: center;
}
</style>
</head>
<body>
<p>我是子代选择器</p><!--/*该p标签不是continer的后代所以其没有发生改变*/-->
<div class="continer">
<p>我是子代选择器</p>
<p>我是子代选择器</p>
<div>
<p>我是子代选择器</p><!--/*该p标签不是continer的直接子元素所以其没有发生改变*/-->
</div>
</div>
</body>
相邻兄弟选择器
选择进更E元素后的F元素,用+号来表示,选择相邻的第一个兄弟元素。(只能向下选择)。
例:
html
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.continer+p{
text-align: center;
}
</style>
</head>
<body>
<p>我是相邻兄弟选择器</p><!--/*相邻兄弟选择器只能向下选择*/-->
<div class="continer"></div>
<p>我是相邻兄弟选择器</p>
<p>我是相邻兄弟选择器</p><!--/*该p标签不是continer的第一个相邻兄弟元素所以其没有发生改变*/-->
<div>
<p>我是相邻兄弟选择器</p><!--/*该p标签不是continer的兄弟元素所以其没有发生改变*/-->
</div>
</body>
</html>
通用兄弟选择器
选择E元素之后的所有兄弟元素F,用~符号表示。(只能向下选择)
例:
html
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.continer~p{
text-align: center;
}
</style>
</head>
<body>
<p>我是通用兄弟选择器</p><!--/*通用兄弟选择器只能向下选择*/-->
<div class="continer"></div>
<p>我是通用兄弟选择器</p>
<p>我是通用兄弟选择器</p>
<div>
<p>我是相邻兄弟选择器</p><!--/*该p标签不是continer的兄弟元素所以其没有发生改变*/-->
</div>
</body>