类型选择器和全体选择器 我们要介绍的第一个简单选择器就是类型选择器,它根据一个元素的标签名来选中元素。我们还必须要考虑 html 或者 xml 元素的命名空间问题。 比如我们的 svg 元素,实际上在: http://www.w3.org/2000/svg 命名空间之下。 svg 和 html 中都有 a 元素,我们若要想区分选择 svg 中的 a 和 html 中的 a,就必须用带命名空间的类型选择器。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Bin</title> </head> <body> <svg width="100" height="28" viewBox="0 0 100 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <desc>Example link01 - a link on an ellipse </desc> <a xlink:href="http://www.w3.org"> <text y="100%">name</text> </a> </svg> <br/><a href="javascript:void 0;">name</a> </body> </html> @namespace svg url(http://www.w3.org/2000/svg); @namespace html url(http://www.w3.org/1999/xhtml); svg|a { stroke:blue; stroke-width:1; } html|a { font-size:40px }这里有一个特殊的选择器,就是“ * ” ,它称为全体选择器,可以选中任意元素。它的用法跟类型选择器是完全一致的,这里就把它们放到一起介绍了。 id 选择器与 class 选择器 id 选择器和 class 选择器都是针对特定属性的选择器。id 选择器是“#”号后面跟随 id 名,class 选择器是“.”后面跟随 class 名。我们来看看基本用法:
#myid { stroke:blue; stroke-width:1; } .mycls { font-size:40px }这两个选择器都是在属性选择器之前就设计出来的选择器,属性选择器出来了以后,理论上可以一定程度上替代它们。但是要注意,class 选择器识别的是:用空格分隔的 class 语法。
<a class="a b c">xxx</a> .a { color:red; }在这个例子中,我们使用了用空格分隔的 class 属性,使用“.a”“.b”或者“.c”都能够选中元素,也可以使用多个 class 选择器来要求元素具有多个类。 属性选择器 属性选择器根据 HTML 元素的属性来选中元素。属性选择器有四种形态。 第一种,[att] 直接在方括号中放入属性名,是检查元素是否具有这个属性,只要元素有这个属性,不论属性是什么值,都可以被选中。 第二种,[att=val] 精确匹配,检查一个元素属性的值是否是 val。 第三种,[att~=val] 多种匹配,检查一个元素的值是否是若干值之一,这里的 val 不是一个单一的值了,可以是用空格分隔的一个序列。 第四种,[att|=val] 开头匹配,检查一个元素的值是否是以 val 开头,它跟精确匹配的区别是属性只要以 val 开头即可,后面内容不管。 有些 HTML 属性含有特殊字符,这个时候,可以把 val 用引号括起来,形成一个 CSS 字符串。CSS 字符串允许使用单双引号来规避特殊字符,也可以用反斜杠转义,这样,就可以表示出任意属性值啦。 伪类选择器 接下来我们开始介绍伪类选择器,伪类选择器是一系列由 CSS 规定好的选择器,它们以冒号开头。伪类选择器有普通型和函数型两种。 我们首先来介绍一下伪类中最常用的部分:树结构关系伪类。 树结构关系伪类选择器
*|*:not(:hover)
选择器 3 级标准中,not 只支持简单选择器,在选择器 4 级标准,则允许 not 接受一个选择器列表,这意味着选择器支持嵌套,仅靠 not 即可完成选择器的一阶真值逻辑完备,但目前还没有看到浏览器实现它。
在 Selector Level 4 草案中,还引入了:is :where :has 等逻辑伪类,但是它们有一些违背了选择器匹配 DOM 树不回溯的原则,所以这部分设计最终的命运如何还不太确定。 其它伪类选择器 还有一些草案中或者不常用的选择器,你仅做大概了解即可。 国际化:用于处理国际化和多语言问题。