CSS高级特性

最新推荐文章于 2024-01-18 10:21:02 发布

Liu Yang.

最新推荐文章于 2024-01-18 10:21:02 发布

阅读量693

点赞数 2

本文链接：https://blog.csdn.net/dubaiqaq/article/details/103542864

版权

CSS高级特性

一.CSS复合选择器

1.标签指定式选择器
标签指定式选择器又称交集选择器，由两个选择器构成，其中第一个为标记选择器，第二个为class选择器或id选择器，两个选择器之间不能有空格。
2.后代选择器
后代选择器用来选择元素或元素组的后代，其写法就是把外层标记写在前面，内层标记写在后边，中间用空格分隔。当标记发生嵌套时，内层标记就成为外层标记的后代。
3.并集选择器
并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器都可以并集选择器的一部分。如果某些选择器定义的样式完全相同或部分相同，就可以利用并集选择器来实现。

二.CSS层叠性和继承性

1.层叠性
层叠性指多种CSS样式的叠加。
2.继承性
继承性指书写CSS样式表时，子标记会继承父标记的某种样式。
注：并不是所有CSS属性都可以继承，如
边框属性，外边距属性，内边距属性，背景记属性，定位属性，布局属性，元素宽高属性

三.CSS优先级
其中，标记选择器具有权重1，类选择器具有权重10，id选择器具有100.
特殊情况：
1.继承式的权重为0
2.行内样式优先
3.权重相同时，遵循就近原则
4.CSS定义了一个！important命令，该命令被赋予最大的优先级
如图：
在这里插入图片描述
本节构图：

作业：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>新浪博客首页</title>
		<style type="text/css">
		.test1{
			color: red;
			font-size: 17px;
			font-weight: 100;
			text-align: left;
			line-height: 10px;
			font-style: normal;
			text-decoration: underline;
		}
		.test11{
			color: red;
			font-size: 17px;
			font-weight: 100;
			text-align: left;
			line-height: 10px;
			font-style: normal;
			
		}
		.test2{
			color: blue;
			font-size: 17px;
			font-weight: 100;
			text-align: left;
			line-height: 10px;
			font-style: normal;
			text-decoration: underline;
		}
		.test3{
			color: greenyellow;
			font-size: 17px;
			font-weight: 100;
			text-align: left;
			line-height: 10px;
			font-style: normal;
		}
		.test4{
			color: black;
			font-size: 17px;
			font-weight: 100;
			text-align: left;
			line-height: 10px;
			font-style: normal;
			text-decoration: underline;
		}
		</style>
	</head>
	<body>
		<p class="test1">新浪<em class="test2">博客首页-</em>新浪网</p>
		<p><em class="test11">新浪网</em>&nbsp博客频道是全中国最主流，最具人气的博客频道。拥有最
		耀眼的娱乐明星<br>博客，最知性的名人博客，最动人的情感博客，最自我的草根博客。</p>
		<p><em class="test3">blog.sina.com.cn/2014-07-07</em><em class="test4">
		-百度快照-评价</em></p>
	</body>
</html>

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

Liu Yang.

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS高级特性

CSS高级特性一.CSS复合选择器1.标签指定式选择器标签指定式选择器又称交集选择器，由两个选择器构成，其中第一个为标记选择器，第二个为class选择器或id选择器，两个选择器之间不能有空格。2.后代选择器后代选择器用来选择元素或元素组的后代，其写法就是把外层标记写在前面，内层标记写在后边，中间用空格分隔。当标记发生嵌套时，内层标记就成为外层标记的后代。3.并集选择器并集选择器是各个...
复制链接

扫一扫