css选择器详解

　　css选择器定义了css的规则将影响文档的哪些部分。本文将css的不同选择器加以汇总，包括css3新增的选择器。鉴于css2已在各浏览器上很好的实现，因此css2选择器的浏览器支持不再一一写出，仅表明添加选择器的css版本。本文概念描述借鉴MDN文档。

　　文中d代表形如 input 的html标签，w代表形如 color 的字符串。

一、基础选择器

1，元素选择器 eg：d （css1）

　　CSS元素选择器(也称为类型选择器)通过node节点名称匹配元素. 因此,在单独使用时,寻找特定类型的元素时,元素选择器都会匹配该文档中所有此类型的元素.

 示例：

span {
  background-color: DodgerBlue;
  color: #ffffff;
}

 

2，通配选择器 * （css2.1引入、css3增强）

　　在CSS中,一个星号(*)就是一个通配选择器.它可以匹配任意类型的HTML元素.在配合其他简单选择器的时候,省略掉通配选择器会有同样的效果.比如,*.warning 和.warning 的效果完全相同.

　　在CSS3中,星号(*)可以和命名空间组合使用:

• ns|* - 会匹配ns命名空间下的所有元素
• *|* - 会匹配所有命名空间下的所有元素
• |* - 会匹配所有没有命名空间的元素

示例：

*[lang^=en]{color:green;}
*.warning {color:red;}
*#maincontent {border: 1px solid blue;}

浏览器兼容情况：

　　基础功能：IE7+

　　命名空间：IE9+

 

3，类选择器  .w （css1）

　　在一个HTML文档中，CSS类选择器会根据元素的类属性中的内容匹配元素。类属性被定义为一个以空格分隔的列表项，在这组类名中，必须有一项与类选择器中的类名完全匹配，此条样式声明才会生效。

示例：

span.classy {
  background-color: DodgerBlue;
}

 

4，ID选择器  #w （css1）

　　在一个HTML文档中,CSS ID 选择器会根据该元素的ID属性中的内容匹配元素,元素ID属性名必须与选择器中的ID属性名完全匹配，此条样式声明才会生效。

示例：

span#identified {
  background-color: DodgerBlue;
}

 

5，属性选择器  [w] （css2）

①简单属性选择

　　如果希望选择有某个属性的元素，而不论该属性的值是什么，可以使用一个简单属性选择器。这个策略在XML文档中相当有用，因为XML语言主张要针对元素和属性的用途来指定元素名和属性名。

/* <a> elements with a title attribute */
a[title] {
  color: purple;
}

②根据具体属性值选择

　　除了选择有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素。可以为任何元素指定属性和值的组合，不过文档中没有出该组合，选择器将无法匹配。同样的，XML文档也可以用这种方式来设置样式。

　　另外，id选择器和指定id属性的属性选择器不是一回事。

/* <a> elements with an href matching "https://example.org" */
a[href="https://example.org"] {
  color: green;
}

③根据部分属性值选择

[attr~=value] 表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少一个值为"value"。

[attr^=value] 表示带有以 attr 命名的，且值是以"value"开头的属性的元素。

[attr$=value] 表示带有以 attr 命名的，且值是以"value"结尾的属性的元素。

[attr*=value] 表示带有以 attr 命名的，且值包含有"value"的属性的元素。

④特定属性选择类型

[attr|=value] 表示带有以 attr 命名的属性的元素，属性值为“value”或是以“value-”为前缀（"-"为连字符，Unicode编码为U+002D）开头。典型的应用场景是用来来匹配语言简写代码（如zh-CN，zh-TW可以用zh作为value）。

 

 二、关系选择器

1，后代选择器 d d （css1）

　　当使用 ␣ 选择符 (这里代表一个空格,更确切的说是一个或多个的空白字符) 连接两个元素时使得该选择器可以只匹配那些由第一个元素作为祖先元素的所有第二个元素(后代元素) . 后代选择器与 子选择器很相似, 但是后代选择器不需要相匹配元素之间要有严格的父子关系.

div span { background-color: DodgerBlue; }

 

2，子选择器 d > d （css2.1）

　　当使用  > 选择符分隔两个元素时,它只会匹配那些作为第一个元素的直接后代(子元素)的第二元素. 与之相比, 当两个元素由 后代选择器 相连时, 它表示匹配存在的所有由第一个元素作为祖先元素(但不一定是父元素)的第二个元素, 无论它在 DOM 中"跳跃" 多少次。

 

div > span {
  background-color: DodgerBlue;
}

 

3，相邻兄弟选择器 d + d （css2.1）

　　这被称为一个相邻选择器. 它只会匹配紧跟其前方元素的同胞元素。

li + li {
  color: red;
}

• 在 Internet Explorer 7 中,当一个元素动态的被插入到目标元素之前时,浏览器不会正确的更新样式.
• 在 Internet Explorer 8 中,如果一个元素是通过点击一个链接动态的被插入的话,直到此链接失去焦点之前该元素的第一个子代元素的样式是不会生效的.

 

 

4，通用兄弟选择器 d ~ d （css3）

　　在使用 ~ 连接两个元素时,它会匹配第二个元素,条件是它必须跟(不一定是紧跟)在第一个元素之后,且他们都有一个共同的父元素。

p ~ span {
  color: red;
}

　　浏览器兼容情况：IE7+

 

 三、伪类选择器

1，:link （css1初次定义，css2提升严格性仅限于a标签）

　　:link伪类选择器是用来选中元素当中的链接。它将会选中所有尚未访问的链接，包括那些已经给定了其他伪类选择器的链接（例如:hover选择器，:active选择器，:visited选择器）。为了可以正确地渲染链接元素的样式，:link伪类选择器应当放在其他伪类选择器的前面，并且遵循LVHA的先后顺序，即：:link — :visited — :hover — :active。:focus伪类选择器常伴随在:hover伪类选择器左右，需要根据你想要实现的效果确定它们的顺序。

a:link {color: slategray;}
.external:link {background-color: lightblue;}

 

2，:visited（css1初次定义，css2提升严格性仅限于a标签）

　　选择已访问的链接，并设置其样式。

a:visited { color: #4b2f89; }
a:visited { background-color: white }

 

3，:focus（css2.1）

 　　表示获得焦点的元素（如表单输入）。当用户点击或触摸元素或通过键盘的 “tab” 键选择它时会被触发。此伪类仅适用于焦点元素本身。如果要选择包含焦点元素的元素，请使用 :focus-within 。

/* Selects any <input> when focused */
input:focus {
  color: red;
}

 

4，:hover（css2.1）

　　适用于用户使用指示设备虚指一个元素（没有激活它）的情况。这个样式会被任何与链接相关的伪类重写，像:link  :visited和 :active等。为了确保生效，:hover规则需要放在:link和:visited规则之后，但是在:active规则之前，按照LVHA的循顺序声明:link－:visited－:hover－:active。

　　:hover伪类可以任何伪元素上使用。

　　用户的可视客户端比如Firefox, Internet Explorer, Safari, Opera or Chrome, 会在光标（鼠标指针）悬停在元素上时提供关联的样式。

　　注意: 在触摸屏上 :hover 有问题，基本不可用。不同的浏览器上:hover 伪类表现不同。 可能从不会触发；或者在触摸某元素后触发了一小会儿；或者总是触发即使用户不在触摸了，直到用户触摸别的元素。 触摸屏非常普遍，所以网页开发人员不要让任何内容只能通过悬停才能展示出来，不然这些内容对于触摸屏使用者来说是很难或者说不可能看到。

:link:hover { outline: dotted red; }
.foo:hover { background: gold; }

 

5，:active（css1）

　　匹配被用户激活的元素。它让页面能在浏览器监测到激活时给出反馈。当用鼠标交互时，它代表的是用户按下按键和松开按键之间的时间。 :active 伪类通常用来匹配tab键交互。通常用于但并不限于<a>  和<button> HTML元素。

　　这个样式可能会被后声明的其他链接相关的伪类覆盖，这些伪类包括 :link，:hover和:visited 。为了正常加上样式，需要把 :active的样式放在所有链接相关的样式后，这种链接伪类先后顺序被称为LVHA顺序: :link — :visited — :hover — :active。

　　注意: 在有多键鼠标的系统中，CSS 3 规定 :active 伪类必须只匹配主按键；对于右手操作鼠标来说就是左键。

body { background-color: #ffffc9 }
a:link { color: blue } /* 未访问链接 */
a:visited { color: purple } /* 已访问链接 */
a:hover { font-weight: bold } /* 用户鼠标悬停 */
a:active { color: lime } /* 激活链接 */

 

6，:checked（css3）

　　表示任何处于选中状态的radio(<input type="radio">), checkbox (<input type="checkbox">) 或("select") 元素中的option HTML元素("option")) 。用户通过点击元素或选择其他的值，可以改变该元素的 :checked 状态，并:checked属性赋给一个新的对象(例如其他的option值)。

input:checked {
  margin-left: 25px;
  border: 1px solid blue;
}

　　浏览器兼容情况：IE9+

 

7，:default（css3）

　　表示一组相关元素中的默认表单元素。该选择器可以在 <button>, <input type="checkbox">, <input type="radio">, 以及 <option> 上使用。允许多个选择的分组元素也可以具有多个默认值，即，它们可以具有最初选择的多个项目。在这种情况下，所有默认值都使用 :default 伪类表示。例如，您可以在一组复选框之间设置默认复选框。

/* Selects any default <input> */
input:default {
  background-color: lime;
}

　　浏览器兼容情况：不兼容IE浏览器

 

8，:disabled（css3）

　　表示任何被禁用的元素。如果一个元素不能被激活（如选择、点击或接受文本输入）或获取焦点，则该元素处于被禁用状态。元素还有一个启用状态（enabled state），在启用状态下，元素可以被激活或获取焦点。

input[type="text"]:disabled { background: #ccc; }

　　浏览器兼容情况：IE9+

 

9，:empty（css3）

　　代表没有子元素的元素。子元素只可以是元素节点或文本（包括空格），无论一个元素是否为 (empty 或 not), 注释或处理指令都不会产生影响。

/* Selects any <div> that contains no content */
div:empty {
    background: lime;
}

　　浏览器兼容情况：IE9+

 

10，:enabled（css3）

　　表示任何启用的（enabled）元素。如果一个元素能够被激活（如选择、点击或接受文本输入）或获取焦点，则该元素是启用的。元素还有一个禁用的状态（disabled state），在被禁用时，元素不能被激活或获取焦点。

input:enabled {
    color: #22AA22;
}

　　浏览器兼容情况：IE9+

 

11，:first-child（css3）

　　代表了一组兄弟元素中的第一个元素。在level3实现中，被匹配的元素需要具有一个父级元素，而在level4实现中则不需要。

span:first-child {
    background-color: lime;
}

　　浏览器兼容情况：IE7+

 

12，:first-of-type（css3）

　　表示一组兄弟元素中其类型的第一个元素。

/* 选择在父元素中第一个出现的<p>，而不管其在兄弟内的位置如何 */
p:first-of-type {
  color: red;
}

　　浏览器兼容情况：IE9+

 

13，:lang（css2.1）

　　基于元素语言来匹配页面元素。

/* 选取任意的英文（en)段落 */
p:lang(en) {
  quotes: '\201C' '\201D' '\2018' '\2019';
}

　　浏览器兼容情况：IE8+

 

14，:last-child（css3）

　　代表父元素的最后一个子元素。

li:last-child {
  background-color: lime;
}

　　浏览器兼容情况：IE9+

 

15，:last-of-type（css3）

　　表示了在（它父元素的）子元素列表中，最后一个给定类型的元素。当代码类似Parent tagName:last-of-type的作用区域包含父元素的所有子元素中的最后一个选定元素，也包括子元素的最后一个子元素并以此类推。

p em:last-of-type {
  color: lime;
}

　　浏览器兼容情况：IE9+