CSS-高级特性

最新推荐文章于 2022-07-24 23:44:00 发布

娃娃救葫芦爷

最新推荐文章于 2022-07-24 23:44:00 发布

阅读量521

点赞数

分类专栏： CSS基础

本文链接：https://blog.csdn.net/cc098818/article/details/99341789

版权

CSS基础专栏收录该内容

14 篇文章 0 订阅

订阅专栏

1、复合选择器
（1）“交集”选择器


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>“交集”选择器</title>
<style type="text/css">
	p{
		font-size: 30px;
	}
	
	p.c{
		text-decoration: underline;//交集选择器
	}
	
	.c{
		color: blue;
	}
</style>
</head>
<body>
<p id="p1">p1</p>
<p id="p2">p2</p>
<p id="p3" class="c">p3</p>
<h1 id="h1" class="c">h1</h1>
<h2 id="h2">h2</h2>
<div id="d1">d1</div>
</body>
</html>

运行结果：
在这里插入图片描述
（2）“并集”选择器


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>“并集”选择器</title>
<style type="text/css">
	p{
		font-size: 30px;
	}
	
	p.c{
		text-decoration: underline;
	}
	
	.c{
		color: blue;
	}
	
	p,h1,.c,#d1{
		background-color: gray;
	}
</style>
</head>
<body>
<p id="p1">p1</p>
<p id="p2">p2</p>
<p id="p3" class="c">p3</p>
<h1 id="h1" class="c">h1</h1>
<h2 id="h2">h2</h2>
<div id="d1">d1</div>
</body>
</html>

运行结果：
在这里插入图片描述
（3）“后代”选择器


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>“后代”选择器</title>
<style type="text/css">
	span{
		color: blue;
	}
	
    p span{
		color: red;
	}
</style>
</head>
<body>
<div>一代<p>二代<span>三代</span></p></div><br/>
<span>一层一代</span><br/>
<span>也是一层一代</span><br/>
</body>
</html>

运行结果：
在这里插入图片描述
（4）“子”选择器


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>“子”选择器</title>
<style type="text/css">
	div>span{
		color: pink;
	}
</style>
</head>
<body>
<div>
	<span>儿子</span>
	<p><span>孙子</span></p>
</div>
</body>
</html>

运行结果：
在这里插入图片描述
2、CSS 的继承特性


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS的继承特性</title>
<style type="text/css">
	.c{
		color: red;
	}
</style>
</head>
<body>
<h1>Java技术</h1>
<ul>
	<li class="c">网页基础
		<ul>
			<li>HTML</li>
			<li>CSS</li>
			<li>JavaScript</li>
		</ul>
	</li>
	<li>动态网页</li>
	<li>J2EE框架</li>
</ul>
</body>
</html>

在这里插入图片描述
HTML、CSS、JavaScript继承了网页基础的红色

3、CSS 的层叠特性
层叠样式的规则：
行内样式 > ID 样式 > 类别样式 > 标记样式


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS的层叠特性</title>
<style type="text/css">
	p{
		color: blue;
	}
	
	.red{
		color: red;
	}
	
	#p3{
		color: green;
	}
	
</style>
</head>
<body>
<p>第一行文本</p>
<p class="red">第二行文本</p>
<p class="red" id="p3">第三行文本</p>
<p style="color: orange;" class="red" id="p3">第四行文本</p>
</body>
</html>

运行结果：
在这里插入图片描述