一、基础选择器

选择器 名称 描述 兼容性
* 通配选择器 选择所有的元素 ie6+
E 元素选择器 选择指定的元素 ie6+
#idName id选择器 选择id属性等于idName的元素 ie6+
.className class选择器 选择class属性包含className的元素 ie6+

二、关系选择器

选择器 名称 描述 兼容性
E F 后代选择器 选择所有包含在E元素里面的F元素 ie7+
E>F 子选择器 选择所有作为E元素的子元素F ie7+
E+F 相邻选择器 选择紧贴在E元素之后的F元素 ie7+
E~F 兄弟选择器 选择E元素所有兄弟元素F ie7+
E,F 并集选择器 为E、F元素定义相同样式 ie7+
E.F 交集选择器 选择标签E中类名为F的元素 ie7+

    这里要注意两点:

      (1)子选择器只能选中字元素,而不能选中孙辈;而包含选择符将会选中所有符合条件的后代,包括儿子,孙子,孙子的孙子...

      (2)相邻选择符只会选中符合条件的相邻的兄弟元素;而兄弟选择符会选中所有符合条件的兄弟元素,不强制是紧邻的元素。

三、属性选择器

选择器 描述 兼容性
E[att] 选择具有att属性的E元素 ie7+
E[att="val"] 选择具有att属性且属性值等于val的E元素 ie7+
E[att~="val"] 选择具有att属性且属性值其中一个等于val的E元素(包含只有一个值且该值等于val的情况) ie7+
E[att|="val"] 选择具有att属性且属性值为以val开头并用连接符-分隔的字符串的E元素,如果属性值仅为val,也将被选择 ie7+
E[att^="val"] 选择具有att属性且属性值为以val开头的字符串的E元素 ie7+
E[att$="val"] 选择具有att属性且属性值为以val结尾的字符串的E元素 ie7+

四、伪类选择器

选择器 描述 兼容性
E:link 设置超链接a在未被访问前的样式 ie4+
E:visited 设置超链接a在其链接地址已被访问过时的样式 ie4+
E:hover 设置元素鼠标在其悬停时的样式 ie7+
E:active 设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式 ie4+
E:focus 设置元素在成为输入焦点(该元素的onfocus事件发生)时的样式。(一般应用于表单元素) ie4+
E:checked 匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时) IE9+
E:enabled 匹配用户界面上处于可用状态的元素E。(一般应用于表单元素) IE9+
E:disabled 匹配用户界面上处于禁用状态的元素E。(一般应用于表单元素) IE9+
E:empty 匹配没有任何子元素(包括text节点)的元素E IE9+
E:root 匹配E元素在文档的根元素。在HTML中,根元素永远是HTML IE9+
E:target 匹配当前活动的目标元素(包含该锚名称的点击的URL) IE9+
E:not(s) 匹配不含有s选择符的元素E IE9+
E:first-child 匹配父元素的第一个子元素E IE7+
E:last-child 匹配父元素的最后一个子元素E IE9+
E:only-child 匹配父元素仅有的一个子元素E IE9+
E:nth-last-child(n) 匹配父元素的倒数第n个子元素E IE9+
E:first-of-type 匹配同类型中的第一个同级兄弟元素E IE9+
E:last-of-type 匹配同类型中的最后一个同级兄弟元素E IE9+
E:only-of-type 匹配同类型中的唯一的一个同级兄弟元素E IE9+
E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E IE9+
E:nth-last-of-type(n 匹配同类型中的倒数第n个同级兄弟元素E IE9+

    注意事项:

      (1)超链接的4种状态(访问前,鼠标悬停,当前被点击,已访问),需要有特定的书写顺序才能生效;a:hover 必须位于 a:link 和 a:visited 之后,a:active 必须位于 a:hover 之后。

      (2)E:first-child选择符,E必须是它的兄弟元素中的第一个元素,换言之,E必须是父元素的第一个子元素。与之类似的伪类还有E:last-child,只不过情况正好相反,需要它是最后一个子元素。

  1.关于:not()的用法

    假定有个列表,每个列表项都有一条底边线,但是最后一项不需要底边线。

      li:not(:last-child) {  border-bottom: 1px solid #ddd; }

    上述代码的意思是:给该列表中除最后一项外的所有列表项加一条底边线。

  2.关于:nth-child()的用法

    要使E:nth-child(n)生效,E元素必须是某个元素的子元素,E的父元素最高是body,即E可以是body的子元素。:first-child、:last-child、:only-child、:nth-last-child(n)也是一样。
      :nth-child(n)括号里的n可以是一个数字,一个关键字,或者一个公式。

      :nth-child(length) /*参数是具体数字 length为整数*/
    

      :nth-child(n) /*参数是n,n从0开始计算*/
    

      :nth-child(n*length) /*n的倍数选择,n从0开始算*/
    

      :nth-child(n+length) /*选择大于等于length后面的元素*/
    

      :nth-child(-n+length) /*选择小于等于length前面的元素*/
    

      :nth-child(n*length+1) /*表示隔几选一*/
    

      :nth-child(2n) / :nth-child(even) /*表示偶数*/
    

      :nth-child(2n+1) / :nth-child(odd) /*表示奇数*/

  3.关于:...-child和:...-of-type的差异

    这两个系列的属性确实很相似,对于不熟悉的人可能很难区分。

     E:first-of-type 总是能命中父元素的第1个为E的子元素,不论父元素第1个子元素是否为E;而E:first-child里的E元素必须是它的兄弟元素中的第一个元素,否则匹配失效。E:last-of-type 与E:last-child也是同理。
     E:nth-of-type(n)总是能命中父元素的第n个为E的子元素,不论父元素第n个子元素是否为E;而E:nth-child(n)会选择父元素的第n个子元素E,如果第n个子元素不是E,则是无效选择符,但n会递增。

  4.用:empty区分空元素

    选择不包含子元素的div元素:

     div:empty

    选择包含子元素的div元素:

     div:not(:empty)

五、伪对象选择器

选择器 描述 兼容性
E:before/E::before 在目标元素E的前面插入的内容。用来和content属性一起使用 :before为ie8+,::before为ie9+
E:after/E::after 在目标元素E的后面插入的内容。用来和content属性一起使用 :after为ie8+,::after为ie9+
E:first-letter/E::first-letter 设置元素内的第一个字符的样式 ie5.5+
E:first-line/E::first-line 设置元素内的第一行的样式 ie5.5+
E::placeholder 设置元素文字占位符的样式。(一般用于input输入框) IE10+
E::selection 设置元素被选择时的字体颜色和背景颜色 IE9+

  注意事项:

    ::placeholder在使用时需要加上各个浏览器的前缀;除了Firefox是 ::[prefix]placeholder,其他浏览器都是使用 ::[prefix]input-placeholder。

六、选择器优先级

  1.定义

    因为选择器的种类有多种,为了给元素添加具体的样式,于是推出了权值(精度)来计算选择器的优先级

  2.如何计算

    默认样式——小于0

    通用选择器—— 0

    标签(元素)选择器、伪元素—— 1

    类选择器、伪类选择器—— 10

    id选择器—— 100

    行内样式—— 1000

    !important—— 大于1000

    注:通配选择符(universal selector)(*)、关系选择符(combinators)(+, >, ~, ' ', ||)、否定伪类(negation pseudo-class)(:not())对优先级没有影响。(但是,在 :not() 内部声明的选择器会影响优先级)。

CSS选择器兼容性查询网址(https://www.quirksmode.org/css/selectors/)

CSS选择器菜鸟教程一览表(https://www.runoob.com/cssref/css-selectors.html)

参考文档:https://segmentfault.com/a/1190000007815822

CSS选择器整理以及优先级介绍的更多相关文章

  1. 【笔记】CSS选择器整理(IE低版本支持性测试)

    时间:2015.05.11 参考附件:css选择器.xmind(网友共享) 查看链接:http://www.w3school.com.cn/cssref/css_selectors.asp   htt ...

  2. CSS选择器整理

    基本选择器 标签选择器:直接写标签名 id选择器:#id名 class选择器:.class名 通配选择器:* 组合选择器 交集:ABCDEFG...... 并集:E, F, G, ...... 关系选 ...

  3. 常见CSS选择器的权重和优先级

    一.常见CSS选择器 [元素选择器] 1.通配选择器:*(匹配所有元素) a.效率不高,页面上的标签越多,效率越低,所以页面上最好不要出现这个选择器 2.标签选择器:li(匹配标签为li的元素) a. ...

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

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

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

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

  6. CSS选择器及其优先级

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

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

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

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

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

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

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

随机推荐

  1. Java实现 蓝桥杯 算法训练 Anagrams问题

    算法训练 Anagrams问题 时间限制:1.0s 内存限制:512.0MB 问题描述 Anagrams指的是具有如下特性的两个单词:在这两个单词当中,每一个英文字母(不区分大小写)所出现的次数都是相 ...

  2. Java实现 LeetCode 485 最大连续1的个数

    485. 最大连续1的个数 给定一个二进制数组, 计算其中最大连续1的个数. 示例 1: 输入: [1,1,0,1,1,1] 输出: 3 解释: 开头的两位和最后的三位都是连续1,所以最大连续1的个数 ...

  3. Java实现 蓝桥杯VIP 算法提高 洗牌

    算法提高 洗牌 时间限制:1.0s 内存限制:256.0MB 问题描述 小弱T在闲暇的时候会和室友打扑克,输的人就要负责洗牌.虽然小弱T不怎么会洗牌,但是他却总是输. 渐渐地小弱T发现了一个规律:只要 ...

  4. Java实现 蓝桥杯 基因牛的繁殖

    基因牛的繁殖 张教授采用基因干预技术成功培养出一头母牛,三年后,这头母牛每年会生出1头母牛, 生出来的母牛三年后,又可以每年生出一头母牛.如此循环下去,请问张教授n年后有多少头母牛? 以下程序模拟了这 ...

  5. 第二届蓝桥杯C++B组国(决)赛真题

    以下代码仅供参考,解答部分来自网友,对于正确性不能保证,如有错误欢迎评论 四方定理. 数论中有著名的四方定理:所有自然数至多只要用四个数的平方和就可以表示. 我们可以通过计算机验证其在有限范围的正确性 ...

  6. 类似-Xms、-Xmn这些参数的含义:

    类似-Xms.-Xmn这些参数的含义: 答: 堆内存分配: JVM初始分配的内存由-Xms指定,默认是物理内存的1/64 JVM最大分配的内存由-Xmx指定,默认是物理内存的1/4 默认空余堆内存小于 ...

  7. python XlsxWriter模块创建aexcel表格

    https://blog.csdn.net/qq_41030861/article/details/82148777 安装使用pip install XlsxWriter来安装,Xlsxwriter用 ...

  8. 20184302 2019-2020-2 《Python程序设计》实验四报告

    20184302 2019-2020-2 <Python程序设计>实验四报告 课程:<Python程序设计> 班级: 1843 姓名: 李新锐 学号:184302 实验教师:王 ...

  9. YAML语法:

    1.基本语法 k:(空格)v:表示一对键值对(空格必须有): 以空格的缩进来控制层级关系:只要是左对齐的一列数据,都是同一个层级的 server: port: 8081 path: /hello 属性 ...

  10. @loj - 6039@ 「雅礼集训 2017 Day5」珠宝

    目录 @description@ @solution@ @accpeted code@ @details@ @description@ Miranda 准备去市里最有名的珠宝展览会,展览会有可以购买珠 ...