<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1,h2{
color: green;
}
div p{
color: blue;
}
.c1>p{
color: yellow;
}
h3+h4{
color: red;
}
</style>
</head>
<body>
<!-- 组合选择器
1、多元素选择器:匹配元素A或元素B,A和B之前用逗号分隔。
2、后代元素选择器:匹配所有属于A元素后代的B元素,A和B用空格分隔。
3、子元素选择器:匹配是所有A元素的子元素B,使用大于号。
4、毗邻元素选择器:匹配所有紧邻A元素之后的同级元素B,使用加号。
-->
<!-- 多元素选择器
1、在head中添加样式(演示方便,可以使用link)
2、匹配A元素或B元素(h1,h2标签)
3、不仅可以使用标签名,还可以使用id class等。
-->
<h1>组合选择器之多元素选择器</h1>
<h2>组合选择器之多元素选择器</h2>
<!-- 后代元素选择器
1、在head中添加样式(演示方便,可以使用link)
2、匹配A元素的后代元素B(div标签中的p标签),其他不受影响。
3、不仅可以使用标签名,还可以使用id class等。
4、后代元素选择器可以递归匹配多层(不止匹配第二层的p标签,还会继续往后面匹配)。
-->
<div>
<p>组合选择器之后代选择器</p>
<span>组合选择器之后代选择器</span>
<div>
<p>组合选择器之后代选择器</p>
</div>
</div>
<!-- 子代元素选择器
1、在head中添加样式(演示方便,可以使用link)
2、匹配是所有A元素的子元素B,其他不受影响。
3、不仅可以使用标签名,还可以使用id class等。
4、子代元素选择器不可以递归匹配多层,只匹配第二层。
-->
<div class="c1">
<p>组合选择器之子代选择器</p>
<span>组合选择器之子代选择器</span>
</div>
<!-- 毗邻元素选择器
1、在head中添加样式(演示方便,可以使用link)
2、匹配所有紧邻A元素之后的同级元素B。
3、不仅可以使用标签名,还可以使用id class等。
-->
<h3>组合选择器之毗邻元素选择器</h3>
<h4>组合选择器之毗邻元素选择器</h4>
</body>
</html>
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。