浅谈css中选择器的优先级

学习web前端,主要学习的课程html5,css,js,ajax等一些基本的编程语言,当然这是一门高深的学问。而这篇文章主要是谈谈我对css中选择器优先级的一些简单的理解与看法,希望对您的学习提供一些帮助。好了,废话不多说了,让我们开始进入主题吧。

css中文解释是“层叠式样式表”,在这里我要说一下,所谓层叠样式表的意思就是说我们可以给一个标签或者文本内容同时添加许多种样式,简单点说就是可以通过多种方式去支配同一个东西。那么就会出现这样的问题了——选择优先级的问题。就是谁的属性能起到控制的最终目的。可以这样说css,就是选择器和各种属性的配合使用,共同定义了html的样式。

既然本文主要说的是css选择器的优先级,那么我想先简单的介绍一下css几个重要的选择器。1.id选择器,2.类型选择器(标签选择器),3.类选择器,4.序选择器,5.后代选择器等。。今天主要介绍 id选择器,类选择器,和类型选择器。对于选择器的优先级,我们可以用权重值得高低来衡量的,这很容易理解的。一个部分在整体中起的作用越大,那么他的权重值就会越高,当然优先级就高了。此时我们要记住权重值的分配情况。首先id选则器的权重值最高为100,其次是类选择器值为10,最后是标签选择器值为1。那么是不是说,id选择器的优先级总是最高的呢??当让不是了,权重值有自己的计算公式:权重值=id选择器的个数x100+类选择器的个数x10+标签选择器的个数x1。这个很重要。举个例子应该会更明显一些。

例1:

从这可以看出权重值大的选择器的优先级高,那么有人会问了。。如果选择器的权重值是一样的,优先级又是什么情况呢?不要着急啊,这种情况只是接下来我要说的几种特殊情况中的一个。首先我们看个例子。

例2:

从上面的例子可以看出,选择器的权值相同,但字体颜色为蓝色,所以说:当选择器的权值相同时,写在后面的选择器具有更高的优先级。

接下来说另外一种情况:当我们使用类选择器时,如果出现了多类属性,那么我们的选择器会怎样判断优先级的呢?还是看下面的例子;

例3:

从中我们不难看出,当我们的同一标签发生冲突时,选择css样式中写在后面的选择器的优先级高,这和权值一样时,那种情况下的处理方式相同。

上面的这些都是当我们的选择器都能选中元素的情况,那么如果我们的选择器无法命中我们要选的标签,那就是另外的一种情况了。

第2大类:当选择器未命中所选标签

首先我要说的时,当选择器未命中所选标签时,前面我们关于权值的计算公式就不能用了,应为他们权值根本不需要计算了,值都为0. 不管他是什么选择器,或者是组合选择器。也就是说此时各个选择器的权值相同。既然权值相同,是不是选择css样式中写在最后面的选择器的优先级高呢??很显然不是的。总的来说,当我们的选择器无法命中所选标签时,我们就要采用就近原则了。那我们看个例子来说说就近原则。

例4:

还有一个很重要的!important属性,他影响着权重值的计算,总的来说!important属性有三个要点:

1.!important属性只增加属性的权重,而不影响选择器的权值;

2.!important属性不改变继承属性的权重,该是0还是0;

3.!important属性不会影响就近原则;最后总结一下吧。。我们看看这张图:

好了,我要说的就这么多了,,当然了文章里面肯定有许多不全面和一些错误,这是是我自己的理解,欢迎各位博友指正错误。

最后,衷心的希望这篇文章能对你的学习有所帮助。。谢谢!!!

时间: 2024-10-14 20:43:23

浅谈css中选择器的优先级的相关文章

浅谈CSS中的定位知识

1,静态定位(static) 表示按照正常定位方案,元素盒按照在文档流中出现的顺序依次格式化: 2,相对定位(relative) 将移动元素盒,但是它在文档流中的原始空间会保留下来: 相对定位元素有如下几个基本特征: 1,.使用CSS样式规则{position: relative:}声明: 2.使用一个到多个偏移属性(top.right.bottom.left)相对于它们在正常文档流中的初始位置定位.没有 设置偏移属性的,默认被设置为auto: 3.在文档流中所占据的原始空间被保留: 4.可能会

浅谈css中一个元素如何在其父元素居中显示

css如何垂直居中一个元素的问题已经是一个老生常谈的问题了.不管对于一个新手或者老手,在面试过程中是经常被问到的.前两天在看一个flex的视频教程,当中提到了有关元素的居中问题,所以今天小编就来扒一扒几种常见的方式.不足之处请大家批评指正(所有的代码都是自己亲手敲过可用的) 1.水平居中(margin:0 auto;) 关于这个,大家应该是最不陌生的,不管是在培训班还是自己自学的话 .这个应该是老师讲的第一个方法了(水平方向上),但是其有一个前提,就是被包裹的元素不能有浮动的属性.否则的话这个属

浅谈css中的absolute和relative

position:absolute和position:relative是两个html中常用到的样式,前者是绝对定位,定位基于最近的一个已经定位的祖先元素,如果没有找到,就基于根元素<html>进行定位,后者是相对定位,基于自身的位置进行偏移. 下面用几个简单的例子看看. 定义4个div. <style> div { height:100px; border:1px solid #999; } #div1{ background-color:yellow; } #div2{ back

浅谈css中单位px和em,rem的区别-转载

px是你屏幕设备物理上能显示出的最小的一个点,这个点不是固定宽度的,不同设备上点的长宽.比例有可能会不同.假设:你现在用的显示器上1px宽=1毫米,但我用的显示器1px宽=两毫米,那么你定义一个div宽度为100px,你显示器上看这个div是10厘米,我显示器上看是20厘米.另外一个px点的长宽不一定是1:1的正方形,有的设备上长宽比是不一样的. em尺寸:所有现代浏览器下默认字体尺寸是16px,这时1em=16px.然后你人为的把body里面定义font-size:12px;(把浏览器默认16

浅谈css中渐变衔接

无论transition还是keyframes,如何让变化更自然,这是前端应该考虑的问题. 这里,我简单总结下自己的方法. 以实践为例子. 1.图像渐变 @keyframes looppic{ from{ background:url(http://www.005.tv/uploads/allimg/160727/16-160HG44240938.png); } 25%{ background:url(http://b.zol-img.com.cn/sjbizhi/images/8/750x53

浅谈CSS优先级机制(一)

初次写随笔,如果有哪个地方不足还望大神指点改正,下面我来谈谈我对于CSS优先级的了解吧. CSS优先级,通俗的理解就是你给元素等一堆属性描述,然后最后到底是哪个描述作为最终显示的效果的规则或机制(个人理解).以下我将分为几个点来谈谈优先级的确定. 1.引入方式: CSS引入的方式,我目前只知道四种:内联式.内嵌式.导入式.链接式(当然网上的说法名称不一,理解就好). 各种引入方式的用法我在这里就不再多说了.以上我所按顺序罗列的四个方式是理论上的优先级顺序,也就是说,我使用内联式引入的css代码作

转:浅谈CSS在前端优化中一些值得注意的关键点

前端优化工作中要考虑的元素多种多样,而合理地使用CSS脚本可以在很大程度上优化页面的加载性能,以下我们就来浅谈CSS在前端优化中一些值得注意的关键点: 当谈到Web的“高性能”时,很多人想到的是页面加载时间,但其实性能不仅仅是指加载时间,还包括浏览器性能.网络性能.开发效率.在Web前端开发中,性能是一个非常重要的需要考虑的点.本文将介绍一些开发原则和性能准则,这些都是提高Web前端性能的基础. 1. 开发原则 1.1 编写符合当代浏览器性能的代码如果想提高前端性能,就必须理解浏览器的工作原理,

CSS中选择器优先级的权重计算

CSS中选择器优先级的权重计算 先看一段代码,如下: a{ color: red; } #box a{ color: green; } [class="box"] a{ color: gold; } .box a{ color: brown; } p a{ color: yellow; } </style> <p id='box' class="box"> <a>hello</a></p> 请问上面代码中,

CSS中选择器优先级与!important权重使用

原文:CSS中选择器优先级与!important权重使用 CSS中的选择器优先级与!important权重使用# .class选择器要高于标签选择器. #id选择器要高于.class选择器. 标签选择器是优先级最低的选择器. !important的属性它的权重值优先级最高的,大于所有的选择器. 标签选择器和.class选择器# 让我们进入标签选择器和.class选择器谁的优先级高实践,实践内容如:将HTML页面中的h2标签设置文本颜色. 代码块 Copy <!DOCTYPE html> <