css关系选择符

最新推荐文章于 2025-08-12 14:37:12 发布

weixin_34001430

最新推荐文章于 2025-08-12 14:37:12 发布

阅读量117

点赞数

文章标签： javascript ViewUI

本文深入探讨了CSS样式的基本应用及选择器的使用方法，包括边框圆角、相邻兄弟选择器、子元素选择器、伪类选择器等，并通过实例展示了如何灵活运用这些特性来美化网页布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>testcss3</title>

<script type="text/javascript" >

</script>
<style>
	div{
		text-align: center;
		border: 2px solid #a1a1a1;
		padding: 10px 40px;
		background: #dddddd;
		width: 350px;
		border-radius: 25px;
		box-shadow: 10px 10px 5px #dddddd;
	}
/*	相邻兄弟选择器 h1和p相邻 的p*/
	.div2 h1 + p{background-color: aqua;}
/*	子元素选择器*/
	h1 > strong {color: red;}
/*	伪类*/
	a:link {color: #FF0000}		/* 未访问的链接 up*/
	a:visited {color: #00FF00}	/* 已访问的链接 */
	a:hover {color: #FF00FF}	/* 鼠标移动到链接上 over*/
	a:active {color: #0000FF}	/* 选定的链接 down */
	
	.div3 p:first-child{font-weight: bold;}
	.div3 li:first-child{text-transform:uppercase;}
	.div4 p:first-child i{color: blue;}
	
	.div2 h1:before{content: "hello";}

</style>
</head>
<body>
	<div>border-radius 属性允许您向元素添加圆角</div>
	
	<div class="div2">
		<h1>This is a heading.</h1>
		<p>This is paragraph.</p>
		<p>This is paragraph.</p>
		<p>This is paragraph.</p>
		<p>This is paragraph.</p>
		<p>This is paragraph.</p>
	</div>
	
	<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
	<h1>This is <em>really <strong>very</strong></em> important.</h1>
	
	<div class="div3">
		<p>These are the necessary steps:</p>
		<ul>
		<li>Intert Key</li>
		<li>Turn key <strong>clockwise</strong></li>
		<li>Push accelerator</li>
		</ul>
		<p>Do <em>not</em> push the brake at the same time as the accelerator.</p>
	</div>
	<div class="div4">
		<p>some <i>text</i>. some <i>text</i>.</p>
		<p>some <i>text</i>. some <i>text</i>.</p>
	</div>
</body>
</html>

http://www.w3school.com.cn/css/css_selector_child.asp

.reveal *{display: none;}
/*reveal 的子元素都不显示没有*的话就是本身加子元素都不显示*/
.reveal *.handle{display: block;}
/*除了class="handle"的元素*/