文章主要介绍什么是CSS选择器,CSS选择器的分类以及CSS选择器的优先级三部分内容,希望能够帮助到正在学习CSS的童鞋,有什么不足的地方欢迎大家批评指正。

一、什么是CSS选择器?

CSS选择器又被称为CSS样式、CSS属性选择器。是由css命名及后面属性及属性值构成一个整体。

二、CSS选择器的分类

1.基础选择器
a.id选择器:通过设置元素的id属性为该元素制定ID。ID由开发者指定。每个ID在文档中必须是唯一的。在写样式表时,ID选择器是以#开头的。
HTML

<div id="header">我的前端学习之旅</div>

CSS

header{color:blue;}

执行效果:

b.class选择器:是以独立于文档元素的方式来指定样式,使用类选择器之前需要在html元素上定义类名,也就是要保证类名在html标记中存在。
HTML

<div class="header">我的前端学习之旅</div>

CSS

.header{color:green;}

执行效果:

c.元素选择器:通过note节点名称匹配元素。
HTML

<span> Here is a span.</span>

CSS

span{
background-color:blue;
border:1px solid #ccc;
}

执行效果:

2.属性选择器:

选择器 含义 实例
E[attr] 匹配所有具有属性attr的元素 p[title] { color:#f00; }
E[att=val] 匹配所有att属性等于"val"的E元素 div[class=error] { color:#f00; }
E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于"val"的E元素 td[headers~=col1] { color:#f00; }
E[att/=val] 匹配所有att属性具有多个连字号分隔(hyphen-separated)的值、其中一个值以"val"开头的E元素,主要用于lang属性,比如"en"、"en-us"、"en-gb"等等 p[lang/=en] { color:#f00; }

注意:最后一个选择器是E[attr|=val],由于输入|会对表格造成影响,只能用/代替。
CSS3新增了一些属性选择器,待持续更新。
3.组合选择器

选择器 含义 实例
E,F 多元素选择器,同时匹配所有E元素或F元素,E和F之间用逗号分隔 div,p { border:1px solid #ccc;}
E F 后代元素选择器,匹配所有属于E元素后代的F元素,E和F之间用空格分隔 div p{color:red;}
E > F 子元素选择器,匹配所有E元素的子元素F div > strong { color:#f00; }
E + F 毗邻元素选择器,匹配所有紧随E元素之后的同级元素F p + p { color:#f00; }

示例如下:

实现效果如下:

4.伪类选择器

选择器 含义 实例
E:first-child 匹配父元素的第一个子元素 p:first-child { font-style:italic; }
E:link 匹配所有未被点击的链接
E:visited 匹配所有已被点击的链接
E:active 匹配鼠标已经其上按下、还没有释放的E元素
E:hover 匹配鼠标悬停其上的E元素 input[type=text]:focus:hover { background:#fff; }
E:focus 匹配获得当前焦点的E元素 input[type=text]:focus { color:#000; background:#ffe; }
E:lang(c) 匹配lang属性等于c的E元素 q:lang(sv) { quotes: "\201D" "\201D" "\2019" "\2019"; }

示例如下:

执行效果:
鼠标点击之前:

鼠标点击之后:

CSS3新增的一些伪类选择器之后会持续更新的,敬请期待。

三、选择器的优先级

从高到低依次是:
1.在属性后面使用 !important会覆盖页面内任何位置定义的元素样式
2.作为style属性写在元素标签上的内联样式
3.id选择器
4.类选择器
5.伪类选择器
6.属性选择器
7.标签选择器
8.通配符选择器
9.浏览器自定义

实际上,同一个元素可以使用多个规则来指定它的字体颜色,每个规则都有自己的选择器。显然最终只有一个规则起作用(不可能一个字既是红色又是绿色),那么该规则的特殊性最高,特殊性即css优先级。那么CSS的优先级怎么计算呢?

选择器的特殊性值表述为4个部分,用0,0,0,0表示。

  • ID选择器的特殊性值,加0,1,0,0;
  • 类选择器、属性选择器或伪类,加0,0,1,0;
  • 元素和伪元素,加0,0,0,1;
  • 通配选择器对特殊性没有贡献,即0,0,0,0;
  • 最后比较特殊的一个标志!important(权重),它没有特殊值,但是他的优先级是最高的,为了方便记忆,可认为他的默认值是1,0,0,0.
    示例如下:

    执行效果:

    选择器的特殊性值是从左向右排列的
    先说到这里吧,有什么问题欢迎大家指正,剩下的内容稍后会在wlf'Blog更新,敬请关注。


作者:betterwlf
链接:https://www.jianshu.com/p/e8b240c87997
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

(转)css选择器及其优先级的更多相关文章

  1. CSS选择器以及优先级与匹配原理

    最常用的五类CSS选择器 准确而简洁的运用CSS选择器会达到非常好的效果.我们不必通篇给每一个元素定义类(class)或ID,通过合适的组织,可以用最简单的方法实现同样的效果.在实际工作中,最常用的选 ...

  2. CSS选择器、优先级与匹配原理(转)

    CSS选择器.优先级与匹配原理 导航 为了分析Bootstrap源码,所以的先把CSS选择器相关的东东给巩固好 废话就不多说了 CSS 2.1 selectors, Part 1 计算指定选择器的优先 ...

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

    原文链接:http://polaris1119.javaeye.com/blog/764428 作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个 ...

  4. 转载:详解CSS选择器、优先级与匹配原

    转载网址:http://polaris1119.javaeye.com/blog/764428 文章就CSS选择器的优先级问题做了一些总结,严格来讲,选择器的种类可以分为三种:标签名选择器.类选择器和 ...

  5. CSS选择器、优先级和匹配原理

    作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个例子: 给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起作用.通 ...

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

    作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个例子: 给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起作用.通 ...

  7. CSS 选择器及优先级

    CSS 选择器及优先级 1.根据权值计算 div .class1 #people的权值等于1+10+100=111 .class2 li #age的权值等于10+1+100=111 2.权值相同,那么 ...

  8. CSS选择器、优先级与匹配原理

    为了分析Bootstrap源码,所以的先把CSS选择器相关的东东给巩固好 废话就不多说了 CSS 2.1 selectors, Part 1 计算指定选择器的优先级:重新认识CSS的权重 标签的权值为 ...

  9. CSS选择器及其优先级

    一:一些普通的选择器 <!DOCTYPE html> <html> <head lang="en"> <meta charset=&quo ...

随机推荐

  1. leetcode ex3 找出穿过最多点的直线 Max Points on a Line

    题目 https://oj.leetcode.com/problems/max-points-on-a-line/ 答案与分析 http://www.aiweibang.com/yuedu/18326 ...

  2. 调用DATASNAP+FIREDAC的远程方法有时会执行二次SQL或存储过程的BUG(转永喃兄)

    调用DATASNAP+FIREDAC的远程方法有时会执行二次SQL或存储过程的BUG 1)查询会重复执行的情形:Result := DATASETPROVIDER.Data会触发它关联的DATASET ...

  3. js总结001

    JSTL 表达式与 EL 语言      http://leon906998248.iteye.com/blog/1502569 2   jquery中$each()方法的使用指南     http: ...

  4. Haskell语言学习笔记(81)Data.Typeable

    Data.Typeable 利用 Data.Typeable,可以打印动态类型信息. class Typeable (a :: k) where typeRep# :: TypeRep a typeR ...

  5. .Net编译原理简单介绍

    首先简单说一下计算机软件运行.所谓软件运行,就是一步一步做一些事情.计算机只认识0和1.给计算机下命令,只能是0与1的方式,确切的说,其实是CPU只认识0和1,因为软件运行是CPU控制的.人直接操作0 ...

  6. 如何使用JDBC查询指定的记录

    //连接数据库 public class JdbcDao {    private Connection conn=null;    private String strSql=null; publi ...

  7. Excel导入

    public static Collection importExcelByIs(InputStream inputstream, List<CgFormFieldEntity> list ...

  8. Structs复习 Action

    引入jar包 web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app version= ...

  9. 利用monkeyrunner、python脚本来做多设备多apk适配ui界面截屏的自动化测试

    http://www.cnblogs.com/youxilua/archive/2011/11/25/2262715.html

  10. Docker虚拟化平台

    1.虚拟化技术的概念 1)虚拟化就是把物理资源转变为逻辑上可以管理的资源,以打破物理结构间的壁垒,让计算机的元件运行在虚拟的基础上,而不是真实的物理设备: 2)虚拟化技术可以将物理机硬件资源虚拟生成单 ...