It is hard to explain css selector specificty, to easy way to understand it is by playing around with it.

To remember some rules can be helpful:

  • inline style > ID selector > Classes, attributes, and pseudo-classes > Elements and pseudop elements

Which means if you have inline style in your html, even you try to use ID selector, it cannot override the inline style. That's why people recommend don't use inline style because it is hard to override.

  • If one combine selector A has more specificty than the other B, A will override B, even B comes later.

First one is the winner.

  • If A and B has the same specificity, B comes later win.
  • !Important overrides all the rest. This is the most powerful one, but again it is hard to override in the future if needed, recommended not to use it as much as possible.

[CSS3] Understand CSS Selector Specificity的更多相关文章

  1. Selenium - CSS Selector

    Selenium - CSS Selector http://www.cnblogs.com/bugua/archive/2012/08/16/2641647.html   昨天我练习了用CSS(即层 ...

  2. css selector

    文章一: http://www.jb51.net/css/68287.html 去年我学jQuery的时候,曾经做过一点选择器(selector)的笔记,今天是CSS的选择器,以后还有一部分xPath ...

  3. Selenium 使用css selector (资源来源于网络)

    Selenium - CSS Selector 昨天我练习了用CSS(即层叠样式表Cascading Stylesheet) Selector来定位(locate)页面上的元素(Elements).S ...

  4. CSS selector All In One

    CSS selector All In One CSS selector https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors ...

  5. [译文]通过ID, TagName, ClassName, Name, CSS selector 得到element

    致谢原文: <http://xahlee.info/js/js_get_elements.html> 通过ID得到element: Document.getElementById(id s ...

  6. 转:Selenium之CSS Selector定位详解

    CSS selector定位 CSS(Cascading Style Sheets)是一种语言,它被用来描述 HTML 和 XML 文档的样式.  百度输入框: <input name=&quo ...

  7. Scrapy学习系列(一):网页元素查询CSS Selector和XPath Selector

    这篇文章主要介绍创建一个简单的spider,顺便介绍一下对网页元素的选取方式(css selector, xpath selector). 第一步:创建spider工程 打开命令行运行以下命令: sc ...

  8. Jsoup代码解读之五-实现一个CSS Selector

    Jsoup代码解读之七-实现一个CSS Selector 当当当!终于来到了Jsoup的特色:CSS Selector部分.selector也是我写的爬虫框架webmagic开发的一个重点.附上一张s ...

  9. css selector: xpath:

    css selector: $$(".mainLeft>div>h1") xpath: $x(".mainLeft>div>h1") n ...

随机推荐

  1. 解决 mounting /dev/block/mmcblk0p1 on /sdcard failed

    http://www.liyu8.com/article/sdcard.htm 之前在recovery下的adb shell执行mount -a总是会有 mount: mouting /dev/blo ...

  2. JQuery中xxx is not a function或者can not find $

    在项目中,遇到以上两个错误,反复折腾了好久,js代码写得没有问题,jquery的文件也引入了,就是反复的报告错误,xxx is not a function.如图: 就是这样的错误,shake is ...

  3. 彻底理解Python中的yield

    阅读别人的python源码时碰到了这个yield这个关键字,各种搜索终于搞懂了,在此做一下总结: 通常的for…in…循环中,in后面是一个数组,这个数组就是一个可迭代对象,类似的还有链表,字符串,文 ...

  4. Ribbitmq

    rittbiMQ: 连接远程rabbitmq server sudo rabbitmqctl addser mihon mihon123 sudo rabbitmqctl set_permission ...

  5. x86 idt

    Interrupt/trap gate

  6. matlab调用自己写的函数时报错: reference to a cleared variable

    原因是在自己写的函数中加了clear. 解决办法:自己定义的函数中不能加clear,可以加clc;

  7. Repeat Array Generator & String.repeat

    Repeat Array Generator RepeatArrayGenerator "use strict"; /** * * @author xgqfrms * @licen ...

  8. Python之FTP传输

    访问FTP,无非两件事情:upload和download,最近在项目中需要从ftp下载大量文件,然后我就试着去实验自己的ftp操作类,如下(PS:此段有问题,别复制使用,可以参考去试验自己的ftp类! ...

  9. [luoguP2862] [USACO06JAN]把牛Corral the Cows(二分 + 乱搞)

    传送门 可以二分边长 然后另开两个数组,把x从小到大排序,把y从小到大排序 枚举x,可以得到正方形的长 枚举y,看看从这个y开始,往上能够到达多少个点,可以用类似队列来搞 其实发现算法的本质之后,x可 ...

  10. 北京集训TEST16——图片加密(fft+kmp)

    题目: Description CJB天天要跟妹子聊天,可是他对微信的加密算法表示担心:“微信这种加密算法,早就过时了,我发明的加密算法早已风靡全球,安全性天下第一!” CJB是这样加密的:设CJB想 ...