第2篇：复合选择器（CSS）

最新推荐文章于 2022-06-22 16:07:21 发布

HaanLen

最新推荐文章于 2022-06-22 16:07:21 发布

阅读量910

点赞数

分类专栏： CSS/CSS3

本文链接：https://blog.csdn.net/weixin_40119412/article/details/103583566

版权

CSS/CSS3 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

交集选择器

并集选择器（分组选择器）

属性选择器

后代选择器（包含选择器）

子元素选择器

选择某个的元素的所有子元素。

基本语法：选择器1>选择器2{属性1：属性值1；属性2：属性值2；...}

子元素选择器中两个选择器既可以是基本选择器，也可以是交集选择器，另外选择器1还可以是后代选择器。

相邻兄弟选择器

基本语法：选择器1+选择器2{属性1：属性值1；属性2：属性值2；...}

说明：选择紧接在选择器1指定元素后出现的选择器2指定的元素，且这两个元素拥有共同的父元素。

例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>复合选择器的使用</title>
		<style type="text/css">
			div{
				font-size: 24px;
				color: #00008B;
			}
			
			.three{
				text-decoration: underline;
				
			}
			div.three{
				font-family: "黑体";
			}
			[title]{
				color: saddlebrown;
			}
			p[align]{
				font-size: 30px;
			}
			p[align="center"]{
				text-decoration: underline;
			}
			img[name*="photo"]{
				border: 4px darkorange solid;
			}
			img[name~="pic"]{
				border: 4px red solid;
			}
			a[name^="fo"]{
				text-decoration: none;
			}
			a[name$="3"]{
				font-size: 30px;
			}
			*[lang|="en"]{
				font-size: 35px;
			}
		</style>
	</head>
	<body>
		<div>
		1. Nowadays, there remainsan increasing interest in thetopicabout…;
		<br />
		2. Recently the issue of…hasbeen in the limelight / brought into focus; 
		</div>
		<p class="three">
		3. What is your idea as to thetopic about…? It is mybelief that …;			
		</p>	 
		<div class="three">		
		 4. It looks beyond dispute that the issue about ... has caused wide public attention.		
		</div>		
		<p title="one"> Although so abundant casescan support mysimple view,the following one is most favorable</p>
		<p align="center">Examples to prove the view are abundant. The most persuasive one is the case of sb.</p>
		<p align="right">Such impressive cases/stories are not rare in our daily life, yet the following one is definitelytypical</p>
		<img name="photo 1" src="../img/bg.JPG" alt="" width="200" height="100"/>
		<img name="photo 2" src="../img/bg.JPG" alt="" width="200" height="100" />
		<img name="pic 1" src="../img/bg.JPG" alt="" width="200" height="100"/>
		<img name="pic 2" src="../img/bg.JPG" alt="" width="200" height="100"/>
		<p><a href="https://blog.csdn.net/weixin_40119412/article/details/103092051" name="lin3">视频1</a></p>
		<p><a href="https://blog.csdn.net/weixin_40119412/article/details/103092051" name="lin4">视频2</a></p>
		<p><a href="https://blog.csdn.net/weixin_40119412/article/details/103092051" name="fol3">视频3</a></p>
		<p><a href="https://blog.csdn.net/weixin_40119412/article/details/103092051" name="fol4">视频4</a></p>
		<p lang="en"><a href="https://blog.csdn.net/weixin_40119412/article/details/103092051" name="xccc">视频5</a></p>
		<p lang="en-xc"><a href="https://blog.csdn.net/weixin_40119412/article/details/103092051" name="xccc">视频6</a></p>
	</body>
</html>

例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>复合选择器2</title>
		<style type="text/css">
			p.one a{
				text-decoration: none;
			}
			div h3.til{
				text-decoration: underline;
			}
			h6+h3{
				color: brown;
			}
		</style>
	</head>
	<body>
		<p class="one">
			<a href="https://blog.csdn.net/weixin_40119412/article/details/103092051">视频1</a>
			<br />
			<a href="https://blog.csdn.net/weixin_40119412/article/details/103092051">视频2</a>
		</p>
		<p class="two">
			<a href="https://blog.csdn.net/weixin_40119412/article/details/103092051">视频1</a>
			<br />
			<a href="https://blog.csdn.net/weixin_40119412/article/details/103092051">视频2</a>
		</p>
		<div>
			<h6> Under no circumstances can we fail to pour attention into the importance /seriousnessof the fact that</h6>
			<h3>It is really high time that due attention cannot have failed to paid to the issue</h5>
			<h6> So crucial/grave is sth that it should have caused our attention</h6>
			<h3 class="til"> It is the fact of sth that really has a great influence on ourstudyand life.</h5>
			<h6>forone thing / for another;</h6>
		</div>
	</body>
</html>