层叠样式表CSS|各样式的定义（类选择器、类派生选择器、iD选择器、ID派生选择器）

最新推荐文章于 2024-07-12 16:38:52 发布

喵小胡

最新推荐文章于 2024-07-12 16:38:52 发布

阅读量433

点赞数 1

分类专栏：网页开发与设计课堂笔记文章标签： css html5

本文链接：https://blog.csdn.net/weixin_53937982/article/details/116131263

版权

网页开发与设计课堂笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

层叠样式表CSS|各样式的定义

层叠优先级是:

浏览器缺省 < 外部样式表 < 内部样式表 < 内联样式

其中样式表又有:

类选择器 < 类派生选择器 < ID选择器 < ID派生选择器

派生选择器以前叫上下文选择器，所以完整的层叠优先级是:

浏览器缺省 < 外部样式表 < 外部样式表类选择器 < 外部样式表类派生选择器 < 外部样式表ID选择器 < 外部样式表ID派生选择器 < 内部样式表 < 内部样式表类选择器 < 内部样式表类派生选择器 < 内部样式表ID选择器 < 内部样式表ID派生选择器 < 内联样式…共12个优先级

重点记住：

1.浏览器缺省 < 外部样式表 < 内部样式表 < 内联样式
2.类选择器 < 类派生选择器 < ID选择器 < ID派生选择器
这两个区分好了，其他的可以以此类推，如上所述的完整层叠优先级~

下面举一个例子进行说明：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>优先级</title>
	<style type="text/css">
      div{ color: #E99C9D;} /*<!--red-->*/
      .a1{color: #C9E69D;}/*<!--green-->*/
        .a1 div {color: blueviolet;}/*<!--zihong-->*/
      .a2{color: black;}
      #a2{color: cadetblue;}/*<!--blue-->*/
       #a2 div{color: brown;}/*<!--brown-->*/
	</style>
</head>

<body>
	<div>这里是红色的内部样式表 内部样式表优于浏览器缺省</div>
	<div class="a2">这里是黑色的类选择器，类选择器优于内部样式表 </div>
	<div class="a2" id="a2">我是蓝色的ID选择器，ID选择器优于类选择器</div>
	<div class="a1">
		<span>这是一个绿色的类选择器</span>
		<div> 这是紫红色的类派生选择器</div>
		
		<div class="a2">这里还是紫红色 类派生选择器优于所有类选择器</div>
		
		<div id="a2">
			<span>我是蓝色的，ID选择器优于类派生选择器</span>
			<div>我是棕色的ID派生选择器，ID派生选择器优先于类派生选择器</div>  
          <div class="a1">我是棕色的ID派生选择器，ID派生选择器优先于所有类选择器</div>  
          <div class="a1" id="a1">我是棕色的ID派生选择器，ID派生选择器优先于所有ID选择器</div> 
			<div class="a1" id="a1"  style="color: green">我是绿色</div>   
		</div>
	</div>
	
</body>
</html>

注意：在编辑时DW可能会因为id标签的唯一性报错：a2和a1的第二次调用会显示

xxx must be unique

出现错误但是依然能执行是因为：
我们通常的用法都只是一个id选择器对应一个方法或事件，实际上也就是同一个id选择器只使用一次；因为id属性的唯一性，也就导致了id选择器的理论上唯一性，但并非真的唯一。

喵小胡

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
层叠样式表CSS|各样式的定义（类选择器、类派生选择器、iD选择器、ID派生选择器）

层叠样式表CSS|各样式的定义层叠优先级是:浏览器缺省 < 外部样式表 < 内部样式表 < 内联样式其中样式表又有:类选择器 < 类派生选择器 < ID选择器 < ID派生选择器派生选择器以前叫上下文选择器，所以完整的层叠优先级是:浏览器缺省 < 外部样式表 < 外部样式表类选择器 < 外部样式表类派生选择器 < 外部样式表ID选择器 < 外部样式表ID派生选择器 < 内部样式表 < 内部样式表类选择器 < 内部
复制链接

扫一扫