CSS复杂选择器

最新推荐文章于 2023-09-10 19:10:35 发布

WuQideveloper

最新推荐文章于 2023-09-10 19:10:35 发布

阅读量353

点赞数

分类专栏： css 文章标签： CSS 选择器

本文链接：https://blog.csdn.net/weixin_34500944/article/details/102645638

版权

CSS复杂选择器

一、兄弟选择器

选择器1+选择器2{…}
获取紧紧挨在某元素后面的兄弟元素,为后面的兄弟元素设置属性

示例
代码：
h1和#p1为紧邻的兄弟，列表中li和li为紧邻的兄弟，所以#p1和后面3个li会被设置背景颜色。

<!DOCTYPE html>
<html>
<head>
	<title>brother</title>
	<style>
	     h1+#p1{
   
	     	background: yellow;
	     }
	     li+li{
   
	     	background: #0ff;
	     }
	</style>
</head>
<body>
  <div>
  	<h1>第一个标题</h1>
  	<p id="p1">第一个段落</p>
  </div>
  <div>
  	<ul>
  		<li>111</li>
  		<li>222</li>
  		<li>333</li>
  		<li>444</li>
  	</ul>
  </div>
</body>
</html>

效果图：

在这里插入图片描述

二、通用兄弟选择器
获取某元素后面所有满足条件的兄弟元素

选择器1～选择器2{…}

示例
代码：
h1后面的p标签中字体都会改为10px,red:

<!DOCTYPE html>
<html>
<head>
	<title>brother</title>
	<style>
	     h1~p{
   
	     	font-size: 10px;
	     	color: red;

	     }
	     li+li{
   
	     	background: #0ff;
	     }
	</style>
</head>
<body>
  <div>
  	<h1>第一个标题</h1>
  	<p id="p1">第一个段落</p>
  	<p id="p2">第二个段落</p>
  	<p id="p3">第三个段落</p>
  	<p id="p4">第四个段落</p>
  </div>
  <div>
  	<ul>
  		<li>111</li>
  		<li>222</li>
  		<li>333</li>
  		<li>444</li>
  	</ul>
  </div>
</body>
</html>

效果图：
在这里插入图片描述

三、属性选择器
写法: [id]{…}/elem[id]{…}/elem[id=“abc”]{}
示例
代码
元素有id属性颜色都设置为blue,p标签class="p5"设置为red,p标签class="p6"背景颜色设置为yellow,span的class="s1"背景颜色设置为red

<!DOCTYPE html>
<html>
<head>
	<title>brother</title>
	<style>
	     [id]{
   
	     	color: blue;
	     }
	     p[class="p5"]{
   
	     	color: red;
	     }
	     p[class="p6"]{
   
	     	background: yellow;
	     }
	     span[class="s1"]{
   
	     	background: red;
	     }
	</style>
</head>
<body>
  <div>
  	<h1 class="hh">第一个标题</h1>
  	<p id="

最低0.47元/天解锁文章

WuQideveloper

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS复杂选择器

CSS复杂选择器一、兄弟选择器选择器1+选择器2{…}获取紧紧挨在某元素后面的兄弟元素,为后面的兄弟元素设置属性示例代码：h1和#p1为紧邻的兄弟，列表中li和li为紧邻的兄弟，所以#p1和后面3个li会被设置背景颜色。<!DOCTYPE html><html><head> <title>brother</title>...
复制链接

扫一扫