css节点选择器
基础选择器
基础选择器是选择器的所有选择器的基本组成元素,也最简单,包含如下5个类别:
- ID选择器
- 标签选择器
- 类选择器
- 属性选择器:类选择器算是一个特殊的
属性选择器
,通用的属性选择器举例如下:
#css代码
[href="http://www.baidu.com/"] {font-size: 12px;}
#html代码
<a href="http://www.baidu.com/>百度</a>"
- 通配选择器:就是特殊符号
*
,一般不建议单独使用,因为这个匹配效率很低
组合选择器
- A B:后代选择器,A的所有儿子孙子等后代中匹配B的节点
- A > B:儿子选择器,只选A的儿子节点中匹配B的节点
- A + B:相邻兄弟选择器,A的兄弟选择器中的第一个满足B的兄弟节点,注意只选择第一个
- A ~ B: 普通兄弟选择器,跟B类似,只不过是所有满足B的兄弟节点,而不只是相邻的第一个
伪类选择器
最常见的选择器有如下几个类别:
- 跟鼠标有关的几个选项:
- link:还没有访问过的链接的状态
- visited:已经访问过的链接的状态
- hover:鼠标滑动到组件上面的时候的状态
- active:鼠标单击左键放下到松开左键这段时间的状态
- 跟聚焦有关的几个选项
- 这个类别主要是指表单的各种输入组件,当某个输入组件获得焦点的时候状态
- focus:当某个组件获得焦点
- focus-within:当所有的儿子孙子节点中有一个节点获得焦点的状态
- 跟节点动态选择的几个选项
- first-child:当一个节点是父亲所有直系儿子的第一个节点,且前面的匹配条件
- first-of-type:所有节点中第一个满足前面的匹配条件的节点,跟上面first-child的区别在于及时满足节点的条件不是_长子_也能匹配
- nth-child(an+b);所有儿子节点都挑出来,逐个匹配前面的条件,如果匹配上了,在根据节点的offset信息进行(offste-b%a == 0)的判断,看是否能匹配上
1. 通过这个属性,我们可以设置第几个儿子节点(0n+b),前几个儿子节点(-1n+b),奇数(2n+1)或者偶数(2n)节点的选择;
1. 跟这个类似的还有nth-last-child:从后往前数的意思; - nth-of-type(an+b):这个跟上面是类似的,唯一不同的是offset的算法,这个属性是先进行条件匹配,将节点进行一轮筛选过后的index再执行数值判断,感觉这个会比较常用;
1. 通过这个属性,我们可以设置第几个儿子节点,前几个儿子节点,奇数或者偶数节点的选择;
1. 跟这个属性类似的还会有first-of-type和last-of-type的属性 - 其他几个常见选项
- empty:当节点中内容为空,连空格都没有的时候,就能匹配
- target:当节点包含id,并且URL是通过http://host/params#id来访问的时候,该id对应的节点就能命中
- checked:用于radiobutton、checkbox、select选项当选项被选中的时候,就能命中
- enable/disable:当节点是enable或者disable的时候的就能命中
伪节点选择器
伪节点选择器常见的有如下几个:
- ::before:在指定元素的最前面创建一个子元素;
- ::after:在指定元素的最后面创建一个子元素;
- ::first-letter:指定元素的第一个字母;
- ::first-line:指定元素的第一行文字;
选择器优先级
如果某个HTML节点的某个属性命中了多个CSS的选择器,那么就需要一个冲突解决机制来确保到底使用哪个规则。
CSS的优先级选择有三个规则:
- 如果css的某个属性后面加了
!important
的话,就一定会使用他,他是优先级最高的 - 如果都没指定
!important
,就用精确度匹配算法计算出规则的优先级得分,得分高的使用 - 如果优先级得分一样,就采用出现在文本最后的那个规则,即跟文本的先后顺序相关
可以看到,如上三个规则中,最重要的就是第二个规则精确度匹配算法,该算法的大概逻辑如下:
首先,优先级算法有一个原则,就是精细度越高的规则,优先级就越高,比如id选择器 > 类选择器 > 标签选择器。
然后,由于一个选择器可能会有多个基础选择器组合而来的,所以需要有一个组合计算器的计算方法,计算方法如下:
priority_score =
100 * count(ID选择器) + // 百位数
10 * count(类选择器|属性选择器|伪类选择器) + // 十位数
1 * count(标签选择器|伪元素选择器) // 个位数
注意两点
- 在所有基础选择器当中,通配选择器、组合符合(>, +, ~)、以及否定伪类(div:not(.my_content)) 不参与到优先级计算当中;
- 属性选择器的例子,div[id="my_div"],这个会按照属性参与,而不是ID选择器;且该选择器中,标签选择器和属性选择器计数都会+1;
css节点选择器的更多相关文章
- CSS的选择器
<div id="demo"> <div class="inner"> <p><a href="#" ...
- JS实战 · 仿css样式选择器
代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/ ...
- 突破css选择器的局限,实现一个css地址选择器?
首先看一个效果,注意地址栏的变化 然后思考一下,用css如何实现? css选择器的局限 选择器是css中的一大特色,用于选择需要添加样式的元素. 选择器的种类有很多,比如 元素选择器 p {color ...
- css 10-CSS3选择器详解
10-CSS3选择器详解 #CSS3介绍 CSS3在CSS2基础上,增强或新增了许多特性, 弥补了CSS2的众多不足之处,使得Web开发变得更为高效和便捷. #CSS3的现状 浏览器支持程度不够好,有 ...
- CSS 后代选择器
后代选择器(descendant selector)又称为包含选择器. 后代选择器可以选择作为某元素后代的元素. 根据上下文选择元素 我们可以定义后代选择器来创建一些规则,使这些规则在某些文档结构中起 ...
- css后代选择器(div.class中间不带空格)
如果我要查找<div>上用了.class的元素,查找方法:div.class:中间是不空格的. 以上这种形式为css后代选择器 参考:http://www.w3school.com.cn/ ...
- CSS样式选择器优先级
CSS样式选择器分为4个等级,a.b.c.d,可以以这四种等级为依据确定CSS选择器的优先级. 1.如果样式是行内样式(通过Style=””定义),那么a=12.b为ID选择器的总数3.c为Class ...
- css中选择器的使用
css是英文Cascading Style Sheets的缩写.它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.我们再将html比喻 ...
- CSS 派生选择器
派生选择器 通过依据元素在其位置的上下文关系来定义样式,你可以使标记更加简洁. 在 CSS1 中,通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors),这是由 ...
随机推荐
- ios WKWebView 与 JS 交互实战技巧
一.WKWebView 由于Xcode8发布之后,编译器开始不支持iOS 7了,这样我们的app也改为最低支持iOS 8.0,既然需要与web交互,那自然也就选择使用了 iOS 8.0之后 才推出的新 ...
- java 用ant打包成jar文件
一.下载ant包,解压放放到你的项目中 二.在ant文件夹下创建一个build.xml文件,内容如下 <?xml version="1.0" encoding="G ...
- TensorFlow图像处理API
TensorFlow提供了一些常用的图像处理接口,可以让我们方便的对图像数据进行操作,以下首先给出一段显示原始图片的代码,然后在此基础上,实践TensorFlow的不同API. 显示原始图片 impo ...
- hexo+github创建属于自己的博客
配置环境 安装Node(必须) 作用:用来生成静态页面的 到Node.js官网下载相应平台的最新版本,一路安装即可. 安装Git(必须) 作用:把本地的hexo内容提交到github上去. 安装Xco ...
- java反射获取类的类名、属性名、属性类型、方法、执行方法、构造函数
public class Demo02 { @SuppressWarnings("all") public static void main(String[] args) thro ...
- 盒子模型、IFC、BFC和Collapsing margins
前言 盒子模型作为CSS基础中的基础,曾一度以为掌握了IE和W3C标准下的块级盒子模型即可,但近日在学习行级盒子模型时发现原来当初是如此幼稚可笑.本文尝试全面叙述块级.行级盒子模型的特性.作为近日学习 ...
- Collections.synchronizedMap()、ConcurrentHashMap、Hashtable之间的区别
为什么要比较Hashtable.SynchronizedMap().ConcurrentHashMap之间的关系?因为常用的HashMap是非线程安全的,不能满足在多线程高并发场景下的需求. 那么为什 ...
- 二十四、Hadoop学记笔记————Spark的架构
master为主节点 一个集群中可能运行多个application,因此也可能会有多个driver DAG Scheduler就是讲RDD Graph拆分成一个个stage 一个Task对应一个Spa ...
- SSM-Spring-04:Spring的DI的构造注入,P命名注入,和集合注入
------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- DI和IOC相比,DI更偏向于实现 DI的set方式注入在前面入门案例里有写,所以此处不多啰嗦,直接开搞,先说 ...
- Android 实现个性的ViewPager切换动画 实战PageTransformer(兼容Android3.0以下)
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/40411921,本文出自:[张鸿洋的博客] 1.概述 之前写过一篇博文:Andro ...