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),这是由 ...
随机推荐
- go语言时间比较
local, _ := time.LoadLocation("Local") starttime, _ := time.ParseInLocation("2006-01- ...
- Flask入门之SQLAlchemy数据库连接操作(第15讲)
一.库安装 Flask-SQLAlchemy 2 SQLAlchemy 1.0.8 二.进入venv 三.切换到项目Sample\ 文件夹,进入manager.py 的shell python man ...
- javase---string类介绍01
一.String类简介 java.lang.String类用于描述一个字符序列.String类是不可变对象的类.其对象一旦被创建,永远无法改变.但是对象的引用可以重新赋值.而且String类被fina ...
- Python_异常处理结构与调试
while True: x =input('Pleaes input:') try: x=int(x) print('You have input {0}'.format(x)) break exce ...
- 好代码是管出来的——使用Git来管理源代码
软件开发过程中一个重要的产出就是代码,软件的编码过程一般是由一个团队共同完成,它是一个并行活动,为了保证代码在多人开发中能够顺利完成,我们需要使用代码版本控制工具来对代码进行统一存储,并追踪每一份代码 ...
- 理解矩阵与线性代数<转>
作者:张帅链接:https://www.zhihu.com/question/21082351/answer/34361293来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出 ...
- 基于Go的websocket消息服务
3个月没写PHP了,这是我的第一个中小型go的websocket微服务.那么问题来了,github上那么多轮子,我为什么要自己造轮子呢? Why 造轮子? 因为这样不仅能锻炼自己的技术能力,而且能帮助 ...
- this.state.menuList.toArray()[0].get('id')
用toArray()处理传过来的list用get(")获取里面的值 而我用的是attributes得方法
- node npm --save,不同JS解析器的内置全局变量,PROMISE,CONST---ES6
npm --save 当你为你的模块安装一个依赖模块时,正常情况下你得先安装他们(在模块根目录下npm install module-name),然后连同版本号手动将他们添加到模块配置文件packa ...
- CSS布局-圣杯布局
圣杯布局 圣杯布局很完美(兼容所有浏览器,包括IE6),但是使用了相对定位,布局有局限性,宽度控制要改的地方也多. 第一种方法公用部分: .lgyz, .lzrg, .lrzcg, .lcgrz, . ...