CSS选择器相关以及CSS选择器的优先级

最新推荐文章于 2023-09-05 12:03:26 发布

陌苏湮雪

最新推荐文章于 2023-09-05 12:03:26 发布

阅读量413

点赞数

本文链接：https://blog.csdn.net/a316212802/article/details/50445252

版权

web开发－－前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

首先，当我们给css中的选择器设定样式后，有一些属性并没有起作用。通过FireBug查看发现一些属性被覆盖了。那么CSS的优先级是如何的呢？

在CSS中，基本选择器诸如 id选择器，class类选择器，还有标签选择器。组合使用的时候，又有后代选择器和群组选择器。

语法：

id选择器：#id

<style type="text/css">
		#mydiv{
			color: red;
		}
	</style>
	<body>
		<div id="mydiv">
			<p>文字相关</p>
		</div>
	</body>

类选择器：.class

<style type="text/css">
		.cls{
			color: red;
		}
	</style>
	<body>
		<div class="cls">
			
		</div>
	</body>

标签选择器：div, p span等。

<style type="text/css">
		.cls{
			color: red;
		}
	</style>
	<body>
		<div>
			<p>文本</p>
		</div>
	</body>

后代选择器：

<style type="text/css">
		div .mytext{
			color: red;
		}
	</style>
	<body>
		<div>
			<p class="mytext">文本</p>
		</div>
	</body>

群组选择器：

<style type="text/css">
		div .mytext,p{
			color: red;
		}
	</style>
	<body>
		<div>
			<p class="mytext">文本</p>
			<span>
				哈哈哈哈哈
			</span>
		</div>
	</body>

以上共五种选择器。
选择器的优先级：

以下面的代码为例

<style type="text/css">
		#mydiv span{
			color: red;
		}
		span {
			color: black;
		}
	</style>
	<body>
		<div id="mydiv">
			<span>
				  文本内容
			</span>
		</div>
	</body>

执行结果后，文本是红色的。也就是说上面的css样式覆盖了下面的样式。

出现这个结果的原因是下面的优先级不够。

优先级如何确定呢？

一般给定id选择器的优先级为100 class选择器优先级为 10 标签选择器优先级为 1

当我们遇到诸如此类：

		#mydiv p span .block
		.block span
		span a .red
		.wrap
		a
		#div

选择器优先级可以这么算：

		#mydiv p span .block    100+1+1+10 = 112
		.block span            10+1 = 11
		span a .red            100+1+10 = 111
		.wrap                  10
		a                      1
		#div                   100

优先级不言而喻。

优先级使用以上已经介绍清楚，那么如何根据情况选择最适合的选择器呢？

最常用类选择器
id最好使用在页面只出现一次的标签内。
li、td、dd等经常大量连续出现，并且样式相同或者相类似的标签，我们采用类选择器跟标签名选择器结合的后代选择器 .xx li/td/dd {} 的方式选择。
HTML标签中用style引入的css样式的优先级1000 但是不提倡。因为不符合解耦性。

那么浏览器是如何针对css选择器来查找元素的？

浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。比如如下html和css:

<style> 
DIV#divBox p span.red{color:red;}  
><style> 
<body> 
<div id="divBox"> 
<p><span>s1</span></p> 
<p><span>s2</span></p> 
<p><span>s3</span></p> 
<p><span class='red'>s4</span></p> 
</div> 
</body>

浏览器的查找顺序如下：先查找html中所有class='red'的span元素，找到后，再查找其父辈元素中是否有p元素，再判断p的父元素中是否有id为divBox的div元素，如果都存在则匹配上。

如何让自己的css样式更加简洁高效？

css高效的原理主要是减少浏览器的查找

类选择器前不用标签选择器特例：多个标签的类选择器相同但是要求样式有些不一样。

id选择器前不用标签选择器。

如：

a .red
b .red

尽量减少层级关系

如：

#div p span .red

应该使用：.red

使用class选择器代替层级关系。

如：

#mydiv p span a

{
<span style="font-family: Arial, Helvetica, sans-serif;">    display: block;</span>

替代：
.block {
  display: block;
}

陌苏湮雪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS选择器相关以及CSS选择器的优先级

首先，当我们给css中的选择器设定样式后，有一些属性并没有起作用。通过FireBug查看发现一些属性被覆盖了。那么CSS的优先级是如何的呢？在CSS中，基本选择器诸如 id选择器，class类选择器，还有标签选择器。组合使用的时候，又有后代选择器和群组选择器。语法：id选择器：#id #mydiv{ color: red; } 文字相关
复制链接

扫一扫

专栏目录