CSS选择器分类、选择器优先级以及CSS优化原则

前端开发 专栏收录该内容
6 篇文章 0 订阅

1. CSS选择器分类

在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素。

三大基本选择器:

  1. 标签名选择器 p{}
  2. 类选择器  .className{}
  3. ID选择器 #id{}

扩展选择器(基于前三者)

  1. 后代选择器 .navs li{}
  2. 群组选择器 a,img,span{}

2.优先级
优先级计算公式:
选择器越特殊,其指向的元素也就越精准,也就是它的优先级别越高。之前查阅过相关文档,大致都是规定:标签选择器给定1表示其优先级量,类选择器给定10,ID选择器给定100。
<span style="font-size:14px;"><div class="parent">
	<div class="children">
		<div class="title">
			优先级
		</div>
		<div class="body">

		</div>
	</div>
</div></span>

css样式:
<span style="font-size:14px;">.parent .title {
	color:#CCC;
	font-size:16px;
	font-weight:700;
}
.title {
	color:#333;
}</span>

由上述公式计算优先级:
.parent .title 为:10+10 =20;
.title 为: 10;
查看 开发者工具,可看其计算样式如下图所示:



.title 类所做的修改无效,因为其优先级没前一个高,得到验证。

3.CSS优化原则
  1. 避免使用通配规则      如    *{} ,页面复杂的话,计算次数会很多,只对需要用到的元素进行选择
  2. 尽量少的直接去对标签进行选择,而是用class     如:#navs li{}, 更优的方式是给li加上nav_item的类名,及.nav_item{}
  3. 不要去用标签限定ID或者类选择符   如:div#main-container,应该简化为#main-container
  4. 尽量少的去使用后代选择器,降低选择器的权重值  后代选择器的开销是最高的,尽量将选择器的深度降到最低,最高不要超过三层,更多的使用类来关联每一个标签元素
  5. 要知道继承这个东西, 了解哪些属性是可以通过继承而来的,然后避免对这些属性重复编写规则

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值