资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/css选择器和jQuery选择器

css选择器和jQuery选择器

niuxiaowei111 / 2896人阅读

摘要：通用选择器组合子和否定伪类对特异性没有影响。选择器大部分还是和选择器保持了一致，但是有以下一些部分的改动第一个元素最后一个元素所有偶数元素，索引值从开始，第一个元素是偶数，第二个元素是奇数，以此类推。

选择器

在书写样式和查找节点的时候，选择器是必不可少的，所以了解选择器的书写方式和使用就显得极为重要，本文主要分开讲了css选择器和jQuery选择器；

css选择器

大家都可能知道，在浏览器渲染的时候会构建dom、cssom然后render，这里盗图两张：


看看就好了，本文还是讲css和dom的关联过程，书写css的格式均是：

body .test{       //选择器
    color:red;    //样式名和值
}

看到就很熟悉，这里需要提醒大家，虽然书写是从左至右，但是css的遍历方式且是从右到左的方式，原因是从右至左的遍历方式存在效率问题，因为一般写在左边的是父级元素、后边跟着子元素，如果从左到右的查找，就会遍历父级元素下的所有子元素，相反，如果从右至左的话，只需要找到子元素然后一级级的往上查找即可；
对于css的书写规范可以参考：https://github.com/doyoe/html... 里面写的还是很全的，现在开始讲解选择器问题，

基本类型选择器

元素选择器

类选择器

id选择器

通配符选择器 * 【应该尽量少用】

属性选择器

这其中属性选择器的方式较为多样，具体如下【大部分规则和正则有点类似】：
[attr]
表示带有以 attr 命名的属性的元素。
[attr=value]
表示带有以 attr 命名的，且值为"value"的属性的元素。
[attr~=value]
表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少一个值为"value"。
[attr|=value]
表示带有以 attr 命名的属性的元素，属性值为“value”或是以“value-”为前缀（"-"为连字符，Unicode编码为U+002D）开头。典型的应用场景是用来来匹配语言简写代码（如zh-CN，zh-TW可以用zh作为value）。
[attr^=value]
表示带有以 attr 命名的，且值是以"value"开头的属性的元素。
[attr$=value]
表示带有以 attr 命名的，且值是以"value"结尾的属性的元素。
[attr*=value]
表示带有以 attr 命名的，且值包含有"value"的属性的元素。
[attr operator value i]
在带有属性值的属性选型选择器表达式的右括号（]括号）前添加用空格间隔开的字母i（或I）可以忽略属性值的大小写（ASCII字符范围内的字母），后面加个i、I来标识不区分大小写，

结合选择器

相邻兄弟选择器 div + p 【表示p元素为选择项，但是他的前方紧邻的兄弟必须是div】

通用相邻元素 div ~ p 【表示p元素为选择项，但是他的前方必须有div兄弟元素，可以不紧邻】

子选择器 div > p 【表示p元素的直接父级元素必须是div才会匹配】

后代选择器 div p 【空格即可，所少个空格无关】

自身选择器 div.test 【有class为test的div元素】

伪类选择器

伪类选择器可以看成是和类选择器类似的形式，只不过类class是使用.来表示，而伪类使用:来表示

:active  [当用鼠标交互时，它代表的是用户按下按键和松开按键之间的时间。 :active 伪类通常用来匹配tab键交互]
:any  [.a > :-moz-any(.b, .c) === .a .b,.a .c 这样的书写方便相同样式的元素的组合，试验阶段，少用为好]
:any-link [所有的超链接]
:checked  [一些选择表单元素被选择了，可以用于实现点击某些CheckBox来线上更多的模块]
:default []
:dir()  [文字书写方向 :dir(rtl) 文字从右到左  和属性选择器不同，
    [dir=rtl] 或 [dir=ltr]不会匹配到dir属性的值为auto的元素。
    而 :dir()会匹配经过客户端计算后的属性, 不管是继承的dir值还是dir值为auto的]
:disabled [被禁用的元素]
:empty  [没有子元素的元素。 这里说的子元素，只计算元素结点及文本（包括空格），注释、运行指令不考虑在内。]
:enabled [和disabled相反]
:first [@page :first 和打印配合，改变打印时的一些属性]
:first-child [element:first-child 第一个子元素]
:first-of-type [伪类匹配子元素中新的种类的元素（第一次出现元素类型就是新的）]
:fullscreen [实验性，全屏的时候匹配的某些元素的样式]
:focus [在一个元素成为焦点时生效，用户可以通过键盘或鼠标激活焦点]
:focus-within []
:hover [适用于用户使用指示设备虚指一个元素（没有激活它）的情况，大部分是指鼠标悬停]
:indeterminate [一下三种情况，
    indeterminate 属性被 JavaScript 置为 true 的  元素 
    所有 radio 按钮都未被选中的  元素
    处于 indeterminate 状态的  元素]
:in-range [input框的输入内容在max min等限制的范围内时候会匹配上]
:invalid [表示任何  或 
 元素的内容无法通过输入的类型设置的验证]
:lang  [element:lang(language-code) { style properties }主要是元素使用的语言]
:last-child [最后一个孩子元素]
:last-of-type [最后出现的类型]
:left [@page :left 配合打印来设置]
:link [链接]
:not() [:not(selector) 在选择器上增加一层过滤的功能]
:nth-child []
    :nth-child(  [ of # ]? )
    where 
     =  | even | odd
    允许对子元素做一些算法操作，用以匹配某些想要匹配的节点
:nth-last-child [和上面的一样，只是顺序是从后往前数]
:nth-last-of-type [和上面一样，只是不是统计子元素，而是子元素的类型为一种匹配，来匹配span的odd或者div类型的odd]
:nth-of-type []
:only-child []
:only-of-type []
:optional [表示任意没有required属性的  或