基础选择器

基础选择器是选择器的所有选择器的基本组成元素,也最简单,包含如下5个类别:

  1. ID选择器
  2. 标签选择器
  3. 类选择器
  4. 属性选择器:类选择器算是一个特殊的属性选择器,通用的属性选择器举例如下:
  1. #css代码
  2. [href="http://www.baidu.com/"] {font-size: 12px;}
  3. #html代码
  4. <a href="http://www.baidu.com/>百度</a>"
  1. 通配选择器:就是特殊符号*,一般不建议单独使用,因为这个匹配效率很低

组合选择器

  1. A B:后代选择器,A的所有儿子孙子等后代中匹配B的节点
  2. A > B:儿子选择器,只选A的儿子节点中匹配B的节点
  3. A + B:相邻兄弟选择器,A的兄弟选择器中的第一个满足B的兄弟节点,注意只选择第一个
  4. A ~ B: 普通兄弟选择器,跟B类似,只不过是所有满足B的兄弟节点,而不只是相邻的第一个

伪类选择器

最常见的选择器有如下几个类别:

  1. 跟鼠标有关的几个选项:
  2. link:还没有访问过的链接的状态
  3. visited:已经访问过的链接的状态
  4. hover:鼠标滑动到组件上面的时候的状态
  5. active:鼠标单击左键放下到松开左键这段时间的状态
  6. 跟聚焦有关的几个选项
  7. 这个类别主要是指表单的各种输入组件,当某个输入组件获得焦点的时候状态
  8. focus:当某个组件获得焦点
  9. focus-within:当所有的儿子孙子节点中有一个节点获得焦点的状态
  10. 跟节点动态选择的几个选项
  11. first-child:当一个节点是父亲所有直系儿子的第一个节点,且前面的匹配条件
  12. first-of-type:所有节点中第一个满足前面的匹配条件的节点,跟上面first-child的区别在于及时满足节点的条件不是_长子_也能匹配
  13. nth-child(an+b);所有儿子节点都挑出来,逐个匹配前面的条件,如果匹配上了,在根据节点的offset信息进行(offste-b%a == 0)的判断,看是否能匹配上

    1. 通过这个属性,我们可以设置第几个儿子节点(0n+b),前几个儿子节点(-1n+b),奇数(2n+1)或者偶数(2n)节点的选择;

    1. 跟这个类似的还有nth-last-child:从后往前数的意思;
  14. nth-of-type(an+b):这个跟上面是类似的,唯一不同的是offset的算法,这个属性是先进行条件匹配,将节点进行一轮筛选过后的index再执行数值判断,感觉这个会比较常用;

    1. 通过这个属性,我们可以设置第几个儿子节点,前几个儿子节点,奇数或者偶数节点的选择;

    1. 跟这个属性类似的还会有first-of-type和last-of-type的属性
  15. 其他几个常见选项
  16. empty:当节点中内容为空,连空格都没有的时候,就能匹配
  17. target:当节点包含id,并且URL是通过http://host/params#id来访问的时候,该id对应的节点就能命中
  18. checked:用于radiobutton、checkbox、select选项当选项被选中的时候,就能命中
  19. enable/disable:当节点是enable或者disable的时候的就能命中

伪节点选择器

伪节点选择器常见的有如下几个:

  1. ::before:在指定元素的最前面创建一个子元素;
  2. ::after:在指定元素的最后面创建一个子元素;
  3. ::first-letter:指定元素的第一个字母;
  4. ::first-line:指定元素的第一行文字;

选择器优先级

如果某个HTML节点的某个属性命中了多个CSS的选择器,那么就需要一个冲突解决机制来确保到底使用哪个规则。

CSS的优先级选择有三个规则:

  1. 如果css的某个属性后面加了!important的话,就一定会使用他,他是优先级最高的
  2. 如果都没指定!important,就用精确度匹配算法计算出规则的优先级得分,得分高的使用
  3. 如果优先级得分一样,就采用出现在文本最后的那个规则,即跟文本的先后顺序相关

可以看到,如上三个规则中,最重要的就是第二个规则精确度匹配算法,该算法的大概逻辑如下:

首先,优先级算法有一个原则,就是精细度越高的规则,优先级就越高,比如id选择器 > 类选择器 > 标签选择器。

然后,由于一个选择器可能会有多个基础选择器组合而来的,所以需要有一个组合计算器的计算方法,计算方法如下:

  1. priority_score =
  2. 100 * count(ID选择器) + // 百位数
  3. 10 * count(类选择器|属性选择器|伪类选择器) + // 十位数
  4. 1 * count(标签选择器|伪元素选择器) // 个位数

注意两点

  1. 在所有基础选择器当中,通配选择器、组合符合(>, +, ~)、以及否定伪类(div:not(.my_content)) 不参与到优先级计算当中;
  2. 属性选择器的例子,div[id="my_div"],这个会按照属性参与,而不是ID选择器;且该选择器中,标签选择器和属性选择器计数都会+1;

css节点选择器的更多相关文章

  1. CSS的选择器

    <div id="demo"> <div class="inner"> <p><a href="#" ...

  2. JS实战 · 仿css样式选择器

    代码如下: <html> <head>     <meta http-equiv="Content-Type" content="text/ ...

  3. 突破css选择器的局限,实现一个css地址选择器?

    首先看一个效果,注意地址栏的变化 然后思考一下,用css如何实现? css选择器的局限 选择器是css中的一大特色,用于选择需要添加样式的元素. 选择器的种类有很多,比如 元素选择器 p {color ...

  4. css 10-CSS3选择器详解

    10-CSS3选择器详解 #CSS3介绍 CSS3在CSS2基础上,增强或新增了许多特性, 弥补了CSS2的众多不足之处,使得Web开发变得更为高效和便捷. #CSS3的现状 浏览器支持程度不够好,有 ...

  5. CSS 后代选择器

    后代选择器(descendant selector)又称为包含选择器. 后代选择器可以选择作为某元素后代的元素. 根据上下文选择元素 我们可以定义后代选择器来创建一些规则,使这些规则在某些文档结构中起 ...

  6. css后代选择器(div.class中间不带空格)

    如果我要查找<div>上用了.class的元素,查找方法:div.class:中间是不空格的. 以上这种形式为css后代选择器 参考:http://www.w3school.com.cn/ ...

  7. CSS样式选择器优先级

    CSS样式选择器分为4个等级,a.b.c.d,可以以这四种等级为依据确定CSS选择器的优先级. 1.如果样式是行内样式(通过Style=””定义),那么a=12.b为ID选择器的总数3.c为Class ...

  8. css中选择器的使用

    css是英文Cascading Style Sheets的缩写.它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.我们再将html比喻 ...

  9. CSS 派生选择器

    派生选择器 通过依据元素在其位置的上下文关系来定义样式,你可以使标记更加简洁. 在 CSS1 中,通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors),这是由 ...

随机推荐

  1. ios WKWebView 与 JS 交互实战技巧

    一.WKWebView 由于Xcode8发布之后,编译器开始不支持iOS 7了,这样我们的app也改为最低支持iOS 8.0,既然需要与web交互,那自然也就选择使用了 iOS 8.0之后 才推出的新 ...

  2. java 用ant打包成jar文件

    一.下载ant包,解压放放到你的项目中 二.在ant文件夹下创建一个build.xml文件,内容如下 <?xml version="1.0" encoding="G ...

  3. TensorFlow图像处理API

    TensorFlow提供了一些常用的图像处理接口,可以让我们方便的对图像数据进行操作,以下首先给出一段显示原始图片的代码,然后在此基础上,实践TensorFlow的不同API. 显示原始图片 impo ...

  4. hexo+github创建属于自己的博客

    配置环境 安装Node(必须) 作用:用来生成静态页面的 到Node.js官网下载相应平台的最新版本,一路安装即可. 安装Git(必须) 作用:把本地的hexo内容提交到github上去. 安装Xco ...

  5. java反射获取类的类名、属性名、属性类型、方法、执行方法、构造函数

    public class Demo02 { @SuppressWarnings("all") public static void main(String[] args) thro ...

  6. 盒子模型、IFC、BFC和Collapsing margins

    前言 盒子模型作为CSS基础中的基础,曾一度以为掌握了IE和W3C标准下的块级盒子模型即可,但近日在学习行级盒子模型时发现原来当初是如此幼稚可笑.本文尝试全面叙述块级.行级盒子模型的特性.作为近日学习 ...

  7. Collections.synchronizedMap()、ConcurrentHashMap、Hashtable之间的区别

    为什么要比较Hashtable.SynchronizedMap().ConcurrentHashMap之间的关系?因为常用的HashMap是非线程安全的,不能满足在多线程高并发场景下的需求. 那么为什 ...

  8. 二十四、Hadoop学记笔记————Spark的架构

    master为主节点 一个集群中可能运行多个application,因此也可能会有多个driver DAG Scheduler就是讲RDD Graph拆分成一个个stage 一个Task对应一个Spa ...

  9. SSM-Spring-04:Spring的DI的构造注入,P命名注入,和集合注入

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- DI和IOC相比,DI更偏向于实现 DI的set方式注入在前面入门案例里有写,所以此处不多啰嗦,直接开搞,先说 ...

  10. Android 实现个性的ViewPager切换动画 实战PageTransformer(兼容Android3.0以下)

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/40411921,本文出自:[张鸿洋的博客] 1.概述 之前写过一篇博文:Andro ...