CSS选择器的特殊性

在我们为元素添加样式的时候,或多或少会出现一个元素会有几个不同规则的样式.有#id的,有.class,直接标签元素的,还有各种组合起来的选择器.那CSS到底如何解决这些冲突呢,我们这次专门来探讨一下. CSS也称层叠样式,层叠(cascade)也就是说,将重复定义的样式,先通过重要度的筛选,再通过一定的规则,重新排列覆盖.而这个规则就是,选择器的特殊性.(重要度就不详细说明了,一般认为!important>行内样式>内联样式表>外联样式表>浏览器默认样式) 特殊性每种选择器都会默…

css选择器的特殊性值

今天从前端那拿来写好的页面,就开始动工,首先,照旧处理导航栏高亮的问题, 说到处理高亮的问题,不同的人会有不同的方法,比如: //类名为nav的元素下的第n个a元素 .nav a:nth-of-type(n){ color:#ff0000; } 或者,为每个导航栏目设置不同的类名,然后在对应页面,为该导航栏设置高亮: 再或者,导航栏类名都一样的话,用js在每个页面为当前导航栏设置高亮样式或者添加高亮类名(样式提前设定): 总之,方法是多种多样的. 就我今天拿到的页面来说,前4个a标签我用了a:n…

CSS选择器的特殊性和LOVE HA

在CSS中当几个相同的选择器对同一个元素有不同的规则时,该怎么应用这些规则呢? 答案就是:CSS特殊性(CSS specificity) 选择器特殊性有选择器本身组成,特殊性由4个数值表述:0, 0, 0, 0,具体特殊性如下: 对于内联样式声明的特殊性时,加1, 0, 0, 0 对于选择器中有给定的ID属性值时,加0, 1, 0, 0 对于选择器中有给定的类属性值.属性选择或伪类,加0, 0, 1, 0 对于选择器中有各个给定的元素和伪元素时,加0, 0, 0, 1 结合符和通配符对特殊性没有…

深入理解CSS选择器优先级的计算

选择器的优先级关系到元素应用哪个样式.在CSS2.1的规范(http://www.w3.org/TR/2009/CR-CSS2-20090908/cascade.html#specificity)中是这样描述的: 如果声明来自于“style”属性,而不是带有选择器的规则,则记为 1,否则记为 0 (= a)(HTML元素的style属性也是样式规则,因为这些样式规则没有选择器,因此记为a=1,b=0,c=0,d=0) 计算选择器中 ID 属性的个数 (= b) 计算选择器中其他属性(类.属性选择…

css优先级之特殊性

在前端开发的时候,css构建样式规则,这个时候我们会遇到一个问题:当我们对同一个元素做多个样式规则,其中发生了冲突的时候,css是如何选择最终呈现的样式如下: div{ color:red; } div.main{ color:blue; } div#main2{ color:green } <body> <div class="main" id="main2"> ssss </div> </body> 最终这个&q…

CSS选择器特殊性与重要性

特殊性在编写CSS代码的时候,我们会出现多个样式规则作用于同一个元素的情况,例如  <header> <nav class="nav-main" id="navigation">Here background</nav> </header> /* CSS */ header nav { background-color: red; } #navigation { backgrou…

CSS选择器与CSS的继承,层叠和特殊性

什么是选择器?选择器{样式;},在{}之前的部分就是"选择器","选择器"指明了{}中的"样式"的作用对象,也就是"样式"作用于网页中的哪些元素,类似这样body{color: pink;font-size: 16px;}; :标签选择器其实就是html代码中的标签,比如<html>.<body>.<h1>.<p>.<img>等 .类选器名称{css样式代码;}这样的…

CSS选择器中的特殊性

我们来看一下一个简单的例子: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> h1 { color:yellow; } h1.title { color:red; } </style></head><body> <…

CSS选择器的权重与优先规则？

我们做项目的时候,经常遇到样式层叠问题,被其他的样式覆盖,或者写的权重不高没效果,对权重没有具体的分析,做了一个总结. css继承是从一个元素向其后代元素传递属性值所采用的机制.确定应当向一个元素应用哪些值时,浏览器不仅要考虑继承,还要考虑声明的特殊性,另外需要考虑声明本身的来源.这个过程就称为层叠.——<css权威指南> 如下图,css规则由选择器和声明块组成,写在选择器后面大括号里的就叫声明.…

css选择器万年不变的优先级和权重

我们在使用CSS对网页元素定义样式时经常会遇到这种情况:要对一般元素应用一般样式,然后在更特殊的元素上覆盖它们.那么我们怎么样来保证我们所新定义的元素样式能覆盖目标元素上原有的样式呢? 在CSS中,会根据选择器的特殊性来决定所定义的样式规则的次序,具有更特殊选择器的规则优先于具有一般选择器的规则,如果两个规则的特殊性相同,那么后定义的规则优先. 那么,又怎么来计算选择器的特殊性呢?下面这张图介绍了特殊性的计算方法: 我们把特殊性分为4个等级,每个等级代表一类选择器,每个等级的值为其所代表的选择器…

CSS选择器的权重与优先规则

权重顺序 “important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符”. 原文:http://www.nowamagic.net/csszone/css_SeletorPriorityRules.php 我们在使用CSS对网页元素定义样式时经常会遇到这种情况:要对一般元素应用一般样式,然后在更特殊的元素上覆盖它们.那么我们怎么样来保证我们所新定义的元素样式能覆盖目标元素上原有的样式呢? 在CSS中,会根…

前端--关于css选择器

css选择器就好像表达式一样,返回一组或者一个html元素,后面的样式声明块应用到返回的元素上.所以可以把css选择器理解为某个或者某一类html元素的抽象的写法. 在讲具体的各种选择器之前要提一下选择器分组和选择器组合的不同,选择器分组是在各个选择器之间加上逗号操作符,分组执行的是“或”操作,例如h1,h2 {color:red}.选择器组合实在个选择器之间用空格或者其他+ .>等符号连接,组合执行的是类似于只是类似于“与”的操作.任何选择器都可以进行分组或者组合(只要有意义). 再介绍一个概…

CSS中的特殊性、继承、层叠

前言最近在看<CSS权威指南>,书中第三章“结构和层叠”对特殊性的解释十分到位,今天就来整理下思路,记录如下. 初来乍到,有何不妥请多多指点,有时间的话顺便评论下,讨论讨论~ 引入问题…

第二天（CSS 选择器）

1.常用的CSS选择器类型选择器: 例如: p { color : red ; } 后代选择器: 例如: h2 span { font-weight : bold ; } 类选择器: 例如 : . content { width : 200px ; } ID选择器: 例如: #nav { height : 40px ; } 应用时,应注意html的结构,使结构合理,综合运用以上的选择器.防治页面中多…

从覆盖bootstrap样式谈css选择器优先级

样式优先级首先简单说几个定义样式的方式: 元素内嵌: <li><a href="" style="color:#ffffff;">SHOW</a></li> 文档内嵌: <style type="text/css"> /* 内部样式 */ h3 { color: green; } </style> 外部样式: <link rel="stylesheet&qu…

（转）css选择器及其优先级

文章主要介绍什么是CSS选择器,CSS选择器的分类以及CSS选择器的优先级三部分内容,希望能够帮助到正在学习CSS的童鞋,有什么不足的地方欢迎大家批评指正. 一.什么是CSS选择器? CSS选择器又被称为CSS样式.CSS属性选择器.是由css命名及后面属性及属性值构成一个整体. 二.CSS选择器的分类 1.基础选择器 a.id选择器:通过设置元素的id属性为该元素制定ID.ID由开发者指定.每个ID在文档中必须是唯一的.在写样式表时,ID选择器是以#开头的. HTML <div id="…

CSS选择器学习小结

关于CSS选择器的问题,在实际项目中,以及一般的前端面试中会经常遇到.下面对此做一小结,梳理和巩固相关方面知识.(如有不妥之处,还望大家及时批评指正,以免误导他人) 一.选择器种类 1.id选择器(#myid):2.类选择器(.myclass):3.标签选择器(div,ul,span):4.相邻兄弟选择器(h1+p):5.子选择器(div>span):6.后代选择器(div span,div.myclass):7.通配符选择器(*):8.属性选择器(input[type="text&quo…

CSS选择器（CCS第三版）

什么是选择器? CSS选择器就是使样式找到应用对象. 简单选择器(Simple selectors) 在日常开发中,最常用的选择器,也是最基本的选择器. 元素选择器(Type selector) 针对HTML元素的选择器,用于寻找指定的HTML元素. a { color: blue; } p { color: black; } 通用选择器(Universal Selector) 通用选择器可设置全部的HTML元素,由一个 * 表示. * { margin: 0; } 属性选择器(Attribut…

CSS选择器，层叠

CSS选择器 .class .intro 选择 class="intro" 的所有元素. 1 #id #firstname 选择 id="firstname" 的所有元素. 1 * * 选择所有元素. 2 element p 选择所有 <p> 元素. 1 element,element div,p 选择所有 <div> 元素和所有 <p> 元素. 1 element element div p 选择 <div> 元素内…

前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前端群里还发现以上观点类似的奇葩聊天,真是*** 其实,也是在很久以前,看了腾讯ISUX的一位前端工程师-麦时分享的一篇技术文章(个人站点已失效,就不贴出来了),才了解到真正的css选择器权重计算. 以下是css选择器权重计算精华所在,翻译自国外的文档(记得是W3C给出的计算规则) 如果一个声明来自s…

css选择器

常用css选择器,希望对大家有所帮助,不喜勿喷. 1.*:通用选择器 * { margin: 0; padding: 0; } 选择页面上的全部元素,通常用于清除浏览器默认样式,不推荐使用. 2.#id:id选择器 #id { width:1200px; height: 500px; } 优先级别较高,id名最好唯一. 3..class:类选择器 .class { width: 1200px; height: 500px; } class名可以重复,可以修饰多个元素. 4. tagName:标签…

dynamic-css 动态 CSS 库，使得你可以借助 MVVM 模式动态生成和更新 css，从 js 事件和 css 选择器的苦海中脱离出来

dynamic-css 使得你可以借助 MVVM 模式动态生成和更新 css,从而将本插件到来之前,打散.嵌套在 js 中的修改样式的代码剥离出来.比如你要做元素跟随鼠标移动,或者根据滚动条位置的变化而触发一些效果,原本你要写 js 去绑定滚动事件,然后计算偏移量,然后更新元素 css,使用 dynamic-css,你只要根据语法去写好 css 表达式就可以了.对于一些原本需要复杂的 js 判断的动态 css,用 dynamic css 表达式几行代码搞定. 举两个例子: 元素跟随鼠标移动实现…

css选择器的使用详解

-.css选择器的分类: 二.常用选择器详解: 1.标签选择器: 语法: 标签名 { 属性:属性值; } 代码示例: h1 { color: #ccc; font-size: 28px; } 2.类选择器: 语法: .类名 { 属性:属性值: } 代码示例: .top { margin-top:25px; } <div class="top"></div> 3.id选择器: 语法: #ID名称 { 属性:属性值; } 代码示例: #top { padding-t…

js,jq,css选择器

js获取节点: var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNode; //得到s的父节点 var ns=s.nextSbiling; //获得s的下一个兄弟节点 var ps=s.previousSbiling; //得到s的上一个兄弟节点 var fc=s.firstChild; //获得s的第一个子节点 var lc=s.lastChile; //获得s的最后一个子节点 css选择器: 基础选择器 * 通用元素选择器,匹配页面任…

CSS系列：CSS选择器

选择器(selector)是CSS中很重要的概念,所有HTML语言中的标记样式都是通过不同的CSS选择器来控制的.用户只需要通过选择对不同的HTML标签进行选择,并赋予各种样式声明,即可实现各种效果. CSS选择器包括:标记选择器.类别选择器.ID选择器及复合选择器. 1. 标记选择器一个HTML页面由很多不同的标记组成,CSS标记选择器用来声明哪些标记采用哪种CSS样式.因此,每一种HTML标记的名称都可以作为相应的标记选择器的名称. 示例: <style type="text/css…

细说CSS选择器

众所周知,CSS的一个核心特征就是能向文档中的一组元素类型应用某些规则.每个规则都有两个基本部分:选择器(selector)和声明块(declaration block).下图显示了规则的各个部分. 声明块:由一个或多个声明组成,每个声明都是一个属性-值对(property-value). 选择器:定义了将影响文档中的哪些部分. 下面全面的总结一下CSS的各类选择器: 元素选择器: 最常见的 CSS 选择器是元素选择器.换句话说,文档的元素就是最基本的选择器.如 p.h3.em.a ,甚至可以是…