选择器的优先级

CSS优先级

  1. 属性在后面使用！important会覆盖页面任何位置定义的元素样式
  2. 作为style属性写在元素内的样式
  3. ID选择器
  4. 伪类选择器
  5. 属性选择器
  6. 标签选择器
  7. 通配选择器
  8. 浏览器自带或继承
  9. 在同一级别的后写的会覆盖先写的样式

在多级别规则组合的时候，用可以假设权值相加

  1. 内联样式表权值为1000
  2. ID权值为100
  3. class类选择器的权值为10
  4. HTML标签权值为1
  • 当两个权值相同时，就用这个原则来判断
  • 谁更具体就用谁，后面的会覆盖前面的
  • 实际上上述的权值设置为假设方便理解，排在前面的权值永远比后面的大

顺便一提a:link, a:hover, a:active, a:visited的顺序是a:link，a:visited，a:hover， a:active

原因是浏览器在解析css时遵循“就近原则”，即为后面的会覆盖前面的

  1. 鼠标经过的“未访问链接”同时拥有a:link、a:hover两种属性，后面的属性会覆盖前面的属性定义；
  2. 鼠标经过的“已访问链接”同时拥有a:visited、a:hover两种属性，后面的属性会覆盖前面的属性定义；

　　所以a:hover定义一定要放在a:link、a:visited的后面，同理可得a:active须在a:hover后。

　

时间： 2024-10-13 22:25:38

选择器的优先级的相关文章

浅谈css中选择器的优先级

学习web前端,主要学习的课程html5,css,js,ajax等一些基本的编程语言,当然这是一门高深的学问.而这篇文章主要是谈谈我对css中选择器优先级的一些简单的理解与看法,希望对您的学习提供一些帮助.好了,废话不多说了,让我们开始进入主题吧. css中文解释是“层叠式样式表”,在这里我要说一下,所谓层叠样式表的意思就是说我们可以给一个标签或者文本内容同时添加许多种样式,简单点说就是可以通过多种方式去支配同一个东西.那么就会出现这样的问题了——选择优先级的问题.就是谁的属性能起到控制的最终目

详解CSS选择器、优先级与匹配原理【转】

作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个例子: 给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起作用.通过Firebug查看,发现没有起作用的属性被覆盖了.这个时候突然意识到了CSS选择器的优先级问题,这里就CSS选择器的优先级问题做了一些总结. 51CTO推荐阅读:巧妙地使用CSS选择器 选择器种类 严格来讲,选择器的种类可以分为三种:标签名选择器.类选择器和ID选择器.而所谓的后代选择器和群组选择

css选择器的优先级

版权声明:本文为博主原创文章,未经博主允许不得转载. Css01 一.CSS简介 a)Cascading Style Sheets 层叠样式表(级联样式表) b)是一个文本文件,不需要编译 由浏览器直接执行 c)作用是 定义网页外观 如 字体,背景,等... d)可以配合JavaScript做出绚丽的效果二.CSS 特点 a)精确的定位准确的控制页面的任何元素 b)精细的控制可以做到像素级别的调整 c)样式与内容分离便于维护,便于重用三.使用方法 1.内联 写在标签内的style属性中的叫做内联

CSS选择器及其优先级

一:一些普通的选择器 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link href="MyCss.css" type="text/css" rel="stylesheet"> </head> &l

前端学习 -- Css -- 选择器的优先级

当使用不同的选择器,选中同一个元素时并且设置相同的样式时,这时样式之间产生了冲突,最终到底采用哪个选择器定义的样式,由选择器的优先级(权重)决定优先级高的优先显示. 优先级的规则 内联样式 , 优先级 1000 id选择器,优先级 100 类和伪类, 优先级 10 元素选择器,优先级 1 通配* , 优先级 0 继承的样式,没有优先级 当选择器中包含多种选择器时,需要将多种选择器的优先级相加然后在比较,但是注意,选择器优先级计算不会超过他的最大的数量级,如果选择器的优先级一样,则使用靠后的样式.

CSS基础学习十一：选择器的优先级

在CSS基础学习的篇章中,从第四篇博客开始说选择器,到昨天基本已经说完了.今天我们总结一下,选择器作 用:告知浏览器需要设置哪个dom元素的样式.最后来说说选择器一个重要的问题,选择器的优先级.判断优先级的 方法就是尝试!!! 一简单选择器的优先级 简单的选择器包括我们在第四篇,第五篇,第六篇博客的元素选择器(标签选择器),类选择器和id选择器. 我们来试验: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo

转------详解CSS选择器、优先级与匹配原理

作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个例子: 给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起作用.通过Firebug查看,发现没有起作用的属性被覆盖了.这个时候突然意识到了CSS选择器的优先级问题,这里就CSS选择器的优先级问题做了一些总结. 选择器种类 严格来讲,选择器的种类可以分为三种:标签名选择器.类选择器和ID选择器.而所谓的后代选择器和群组选择器只不过是对前三种选择器的扩展应用.而在标签

详解CSS选择器、优先级与匹配原理

最常用的五类CSS选择器 准确而简洁的运用CSS选择器会达到非常好的效果.我们不必通篇给每一个元素定义类(class)或ID,通过合适的组织,可以用最简单的方法实现同样的效果.在实际工作中,最常用的选择器有以下五类: 一.标签选择器: 顾名思议,标签选择器是直接将HTML标签作为CSS选择器,可以是p.h1.dl.strong等HTML标签.如: p{font:12px;} em{color:blue;} dl{float:left;margin-top:10px;} 二.id选择器: 我们通常

CSS常用的选择器和优先级的权重问题

CSS注释 CSS修改页面中的所有标签,必须借助选择器选中.选择器中,可以写多对CSS属性,用{}包裹:每个属性名与属性值之间用:分隔,多对属性之间,必须用;来分隔 选择器{ 属性1:属性值1; 属性2:属性值2; [选择器的命名规范] 1.只能有字母.数字.下划线.减号组成.2.开头不能是数字,也不能是只有一个减号.一般,起名要求有语义,使用英文单词与数字的组合. 1.标签选择器 写法:HTML标签名{}作用:可以选中页面中,所有与选择器同名的HTML标签. 例如: li{ color:red

***CSS魔法堂：选择器及其优先级

一.前言     首先看看一道阿里这期网申的题目吧! 1.找出下面优先级相同的选择器 A. img.thumb:after B.[data-job="frontend"]::first-letter C. #main::before   D. [type="checkbox"]:checked E. ul#shop-list 二.回顾选择器类型           html片段 <body> <div id="content"&