CSS 选择器的多种应用（更新包含CSS1/2/3/4...）

序：CSS 选择器在不断进化中，说不定某一天能飞上天。    

CSS 1 ：

Element 选择器

对于 Element「标签」选择器最为熟悉不过了。 如 div 标签   例：div{ ... }。

注：不建议这样直接使用标签选择器，范围杀伤力太大了。

 

class 选择器

同样，class「类」是日常必写的。 如 my 类 例：.my{ ... }。 对于类，是一个美好的标签，但不建议嵌套 5 个及以上的类，对页面响应非常不友好，例：.my1 .my2 .my3 .my4 .my5 { ... }。  

ID 选择器

ID 选择器能少用就少用。 所用之处只建议以下几个方向： 如登录名、地址选择、购物车等等具有特殊性的需调用的 例：#loginName{ ... }； 如关于页面、联系页面、登录页面、首页等等单页面 例：#about{ ... }； 如页面侧边栏、页面主内容、页面头部、页面底部等等大框架 例：#sidebar{ ... }。

注：ID 选择器慎用、少用、精用。

 

:link、:visited 伪类选择器

:link 伪类是表示超链接原始的状态「a 标签专属」。 如超链接初始字体颜色为红，例：a:link{ color:red; }。 :visited 伪类是表示超链接访问后的状态「a 标签专属」。 如超链接访问后背景颜色为蓝色，例：a:visited{ background:blue; }。  

:active 伪类选择器

:active 伪类是表示元素的激活状态，如按钮按下时的背景颜色为黑色，例：button:active{ background:black; }。    

CSS 2：

* 选择器

* 「全局」选择器在 CSS 2 中被定义不见得出奇，毕竟当时一个全局「*」搞掂全局「Global」。 同样的现在使用的也被经常提起，一个 *{margin:0; padding:0;} 搞定各种浏览器水土不服。

注：不建议通过 * 的来重定义浏览器差异，通过标签重定义是恰好的办法。

 

[] Attribute 选择器

Attribute 「属性」选择器很美妙，这个美妙体现在后面的 CSS 3 中，在 CSS 3 中大量拓展了属性选择器。 如每个具有 alt 属性的图片，例：img[alt]:{ ... } 。

属性选择器和类选择器具有相同的优先值。标签中必不可少的属性，在写样式时，恰好的运用属性选择器，能减轻代码量。

对于行内样式，我是深恶痛绝的。通过人工排查行内样式？ javascript 快速排查行内样式？no no no 。 如图：一个 *[style]{border: 2px solid red;}简单 CSS 代码，就能快速圈出所有行内样式。  

[~=] 选择器

[~=] 属性选择器是 CSS2 的属性选择器其中的一个进阶尝试，对属性选择器的值作了一个模糊筛选功能，该筛选功能通过词语间的空格进行划分。 如属性值中具有 darlang 词语 例：a[title~=darlang]{ ... }。  

[|=] 选择器

[|=] 属性选择器是 CSS2 的属性选择器其中的一个进阶尝试，对于属性选择器的值作了一个简单的判断，判断筛选所有以指定词语开头的属性选择器。

注：[|=] 属性选择器对于指定词语开头的需在词语后面加中横线「 - 」连接。

如属性值中具有 darlang 的词语 例：a[title|=darlang]{ ... }  

:hover、:focus 伪类选择器

:hover 估计是CSS书写中最常见的鼠标动作了，意为鼠标悬浮时执行的动作。如鼠标悬浮 div 时执行的样式，例：div:hover{ ... } 。 当然，拓展一下该动作的额外用法，如 例：.big-div:hover .inside-div { ... }。 :focus 多用于输入框，选择框等鼠标焦点动作。如当点击输入框时进行书写时<input type="text">，例：input:focus { ... }。

注：在手机端，:focus 的应用往往比 :hover 有更佳的实用性。

 

:first-child 伪类选择器

:first-child 伪类指定了父元素下的第一个子元素。 如作用于 div 的子元素 span ，那么类名 first 是第一个，表示作用于它 例：.parent span:first-child{ ... } 。  

+ 选择器

+ 选择器的目的很单纯，即指定与当前元素紧挨于后边的同级元素。 如.first + div 表示指第二个类 middle，所以只对类 middle 起作用，而再往后的类last 的 div 则波及不到 例：.first + div { ... }。  

> 选择器

> 选择器是对下级子元素的一个操作，表示对当前元素指定的下级元素进行作用，下下级不受影响。 如.e1 > .c2 表示类 e1 所有下级子元素 c2 ，但对于下下级的 c2 不受影响 例：.e1 > .c2 { ... } 。  

:lang() 选择器

:lang() 选择器地位有点尴尬，可有，用处几乎为无，可无，但搁在那儿。括号里面填写的是地区语言识别码。

相对 HTML 作用来说，是对文字语言作甄别，:lang() 所支持的语言版本种类相对比较少，CSS 中控制的话，需要完整填写语言代码。

CSS 4 进阶

:lang(,,,) 可填写多个地区代码，也支持简单的通配符， :lang(en,cn) 或者 :lang(*-CH) 也是可以的。    

CSS 3：

~ 选择器

~ 选择器恰好的是 + 选择器的一个范围放大，对指定元素后面的所有相符合的元素进行一窝端（前面的不受牵连）。 如 .first ~ div 那么它的作用范围将会是类 middle 及所有同级以后的 div 例：.first ~ div { ... }。  

:not() 选择器

:not() 选择器指定某个排除的元素，该元素将不在样式展示。 如:not(div) ，表示样式中将会不影响所有 div ，当然也可以指定标签属性或类或ID等。 例：body > :not(div){ ... }。 拓展的，当遇到文档中标签属性书写不规范的时候，为了快速排除，可以这样巧写排错。  

CSS 4 进阶

在CSS4中，:not(,,,) 可定义多个排除，各值用逗号分割，简化了原有中的多个排除值的臃肿写法。 原有也可以多个值排除，写法：:not(div):not(span):not(a){ ... } 。 CSS 4 写法：:not(div,span,a){ ... } 。

在 CSS 4 中，:not() 可以配合 :matches() 使用。

 

[^=] 选择器

[^=] 选择器定义了以指定属性开头的标签，[|=] 同样有这种效果，与 [|=] 不同的是，[^=] 可以指定任意开头的字母或数字而 [|=] 则需要指定值后面具有中横线「-」分割。 如匹配 darlang 开头的值：

注意大小写敏感。

例：a[title^="darlang"]{ ... } 。 拓展的：快速排查所有不具有 http 开头的超链接  

[$=] 选择器

与 [^=] 相反， [$=] 选择器表示指定结尾的属性值，作用效果一样。 如指定 darlang 结尾 例：a[title$=darlang] { ... } 。 拓展一下，快速找出具有 .html 后缀的超链接  

[*=] 选择器

匹配当前所有字符串中包含的内容，内容位置不限制。 如指定包含 darlang 单词的都起作用。 例：div[class*=darlang] { ... }。 拓展，通过 CSS 去广告，如百度推广的 id 为bd_xxx的、友盟的广告位xxxuuidxxx，那么通过display:none方式去掉。  

:target 选择器

:target 的作用比较专一，只对当前href的目标描点作用。

注：只有点击后，链接目标的样式才起作用。

如突出当前链接到的页面描点，当点击链接时，链接目标的样式起作用。 例： p:target { ... }。  

:enabled、:disabled 选择器

:enabled 多用于表单，作用于当前启用状态的表单，而 :disabledd 则恰好相反，对当前为禁用状态的表单起作用。 如启用状态的为蓝色，禁用状态的为红色 例：:enabled { color:blue; ... } :disabled { color:red; ... }。  

:checked 选择器

:checked 对选中部分起作用，但目前主流浏览器还是不起作用。  

:root 选择器

:root 选择器仅作用于页面根元素，即 html 元素。:root { ... } ，对 HTML 标签。  

:empty 选择器

:empty 选择器匹配子元素节点或文本为空，意外是，对于 input 类似的单标签，也是能够匹配的。 如匹配空的标签 例： *:empty { ... }。  

:nth-child(n) 选择器

:nth-child(n) 伪类中的 「n」 为常数或者为变量，即指定了父元素下的位置为 n 的子元素。 在常数中用的是1,2,3,4... ，变量的则可以 1n,3n+1,3n,2n+2... 变量 n 即为倍数。

3n 的作用为 3n => 3/6/9/12/15...，那么只要是3的累加数，就能作用到。

如 p 标签的 3n ，则 p 标签累加数为3的倍数，则能作用到，下方标签为 6 的不是 p 标签则不能作用到，但却是累计入后方的数量。 例： p:nth-child(3n){ ... } 。  

:nth-last-child(n) 伪类选择器

:nth-last-child(n) 与 :nth-child(n) 作用效果一样，不过 :nth-last-child(n) 是从后往前数，为倒数计数。 1 表示倒数第一，2 表示倒数第二 ...  

:last-child() 伪类选择器

:last-child() 与 first-child() 效果类似，:last-child() 作用于同级元素的最后一个。 如作用于 div 的子元素 span ，那么类名 last 是最后一个，表示作用于它 例：.parent span:last-child{ ... } 。  

:only-child 伪类选择器

:only-child 伪类选择器只对字元素或节点只有一个的起作用。 如子节点（包括元素）存在2个及以上的，则无效。 例：.parents :only-child{ ... } 。  

:first-of-type 选择器

:first-of-type 选择器对于类型的匹配颇为挑剔，只对同级所有元素的同类型的第一个起作用。 如匹配到第一个 p 标签及第一个 div 标签 例： .parent :first-of-type { ... } 。  

:nth-of-type(n) 选择器

:nth-of-type(n) 选择器是 :nth-child(n) 选择器的一个细分，:nth-child(n) 对同级元素第一个开始计算，包括任意类型的标签。而 :nth-of-type(n) 选择器则对指定标签进行计数，不同标签忽略，不计收入顺序。 如对类型的 p 标签第六个进行操作 例： p:nth-of-type(6) { ... } 。  

:nth-last-of-type(n) 选择器

:nth-last-of-type(n) 选择器是 :nth-of-type(n) 选择器的作用效果相同、顺序相反。在倒数计数中，它对指定位置元素进行操作，计数时忽略不同类型的元素。 如对类型的 p 标签倒数第六个进行操作 例： p:nth-of-type(6) { ... } 。  

:last-of-type 选择器

:last-of-type 选择器与 :first-of-type 选择器效果相同、顺序相反，它是只对同级所有元素的同类型的最后一个起作用。 如匹配到最后一个 p 标签及最后一个 div 标签 例： .parent :last-of-type { ... } 。  

:only-of-type 选择器

:only-of-type 选择器比较有意思，在同级元素中，该类型中，只有它一个，它才起作用。 如同级元素中的 p 标签，只有一个则起作用，有一个以上的同类型，都不行。对于其他类型的标签，多少个都与 p 标签无关 例： .parent p:only-of-type{ ... } 。    

CSS 4：

截至目前20171120，支持 CSS 4 的浏览器还是一片飘红。以下仅供参考 [secret key="密码"] https://zhuanlan.zhihu.com/p/26065867 https://www.w3.org/TR/selectors4/ https://css-tricks.com/almanac/selectors/ [/secret]