CSS复杂选择器

最新推荐文章于 2022-05-29 19:54:08 发布

高鹏飞白羊

最新推荐文章于 2022-05-29 19:54:08 发布

阅读量203

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/weixin_43755916/article/details/102368880

版权

web前端专栏收录该内容

61 篇文章 0 订阅

订阅专栏

兄弟选择器

具备相同腹肌元素的平级元素之间称为兄弟元素
注意：兄弟选择器，只能往后，不能往前找
1，相邻兄弟选择器，获取紧紧挨着某元素后面的兄弟元素
选择器1+选择器2{}

<!doctype html>
<html>
	<head>
	<title></title>
	<meta charset="utf-8">
	<meta http-equiv="Cache-Control" content="max-age=3600">
	<!--引入外部样式-->
	<style>
	*{margin:0;padding:0}		
		#p2+span{background:#0ff;}
		div+p{background:red;}
	</style>
	</head>
	<body>
		<p>大娃</p>
		<p id="p2">二娃</p>
		<span>三娃</span>
		<b>四娃</b>
		<div>五娃</div>
		<p>六娃</p>
		<h1>七娃</h1>
	</body>
</html>

	**2，通用兄弟选择器，获取某元素后面所有满足条件的兄弟元素**
	选择器1~选择器2{}

<!doctype html>
<html>
	<head>
	<title></title>
	<meta charset="utf-8">
	<meta http-equiv="Cache-Control" content="max-age=3600">
	<!--引入外部样式-->
	<style>
	*{margin:0;padding:0}		
		p~p{background:#00f;}
	</style>
	</head>
	<body>
		<p>大娃</p>
		<p id="p2">二娃</p>
		<span>三娃</span>
		<b>四娃</b>
		<div>五娃</div>
		<p>六娃</p>
		<h1>七娃</h1>
	</body>
</html>

练习：

<!doctype html>
<html>
	<head>
	<title></title>
	<meta charset="utf-8">
	<meta http-equiv="Cache-Control" content="max-age=3600">
	<!--引入外部样式-->
	<style>
	*{margin:0;padding:0}		
		h3+div{margin-top:30px;}
		div~div{margin-top:10px;}
	</style>
	</head>
	<body>
		<h3>猜名字</h3>
		<div>我姓彭</div>
		<div>我是墨家笛子</div>
		<div>我喜欢大气帝国</div>
	</body>
</html>

属性选择器

允许通过元素所附带的属性及其值来匹配页面元素
基本语法
[attr]{} attr 表示任意属性
可以匹配页面中所有附带attr属性的元素
element[attr]{} element[attr1][attr2][attr3]…{}
匹配页面中所有附带attr属性的element元素
[attr=value]
匹配attr属性为value的element元素
[attr^=value]
匹配attr属性为value开头的element元素
[attr$=value]
匹配attr属性为value结尾的element元素
[attr*=value]
匹配attr属性包含value的element元素
[attr~=value]
匹配attr属性含有指定的单词的元素

<!doctype html>
<html>
	<head>
	<title></title>
	<meta charset="utf-8">
	<meta http-equiv="Cache-Control" content="max-age=3600">
	<!--引入外部样式-->
	<style>
	*{margin:0;padding:0}		
		div[id]{background:#f00;}
		[title=p3]{background:#00f;}
		[class=p1]{background:#ddd;}
		[class^=p]{background:#f0f;}
	</style>
	</head>
	<body>
		<p class="p1">大娃</p>
		<p id="p2">二娃</p>
		<span title="p3">三娃</span>
		<b class="p1">四娃</b>
		<div id="d1">五娃</div>
		<p>六娃</p>
		<h1 class="p1">七娃</h1>
	</body>
</html>

高鹏飞白羊

关注

0
点赞
踩
0

收藏

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

兄弟选择器具备相同腹肌元素的平级元素之间称为兄弟元素注意：兄弟选择器，只能往后，不能往前找1，相邻兄弟选择器，获取紧紧挨着某元素后面的兄弟元素选择器1+选择器2{}<!doctype html><html> <head> <title></title> <meta charset="utf-8"> <...
复制链接

扫一扫