CSS选择器是CSS规则的一部分，用于确定受CSS规则影响的HTML元素。这是一个CSS规则示例：

div {
    border: 1px solid black;
}

上面的CSS规则的CSS选择器部分是这样的：

div

这个选择器意味着所有的div元素都应该被CSS规则作为目标。

有几种不同类型的CSS选择器。 CSS 1.0，CSS 2.1和CSS 3.0都向CSS标准添加了选择器。本文的其余部分将通过这些CSS选择器进行介绍。

通用选择器

通用CSS选择器用于选择所有元素。标有" \ *"。这是一个通用的CSS选择器示例：

* {
    font-size: 18px;
}

本示例选择所有HTML元素并设置其font-sizeCSS属性。

通用CSS选择器并不是经常单独使用。它更常与子选择器或者子代选择器一起使用。

元素选择器

元素选择器是最基本的CSS选择器。它选择相同类型的所有HTML元素。例如，所有div元素或者p元素。

使用元素CSS选择器，我们只需编写要应用CSS规则的元素的元素名称。这是三个示例：

div {
    border: 1px solid black;
}
p {
    font-size: 18px;
}
input {
    border: 1px solid #cccccc;
}

这三个CSS规则每个都有一个选择器，用于选择所有特定类型的HTML元素。第一个CSS选择器选择所有div元素。第二个CSS选择器选择所有p元素。第三个CSS选择器选择器选择所有input元素。

我们可以使用元素选择器选择任何HTML元素。该类型/名称的所有元素都会受到具有元素选择器的CSS规则的影响。

类选择器

类选择器是另一个非常常用的CSS选择器。类选择器选择所有设置了给定CSS类的HTML元素。我们可以通过为HTML元素提供一个class属性来在CSS元素上设置CSS类。这是一个例子：

<div class="green"> Text... </div>

<p class="green"> Paragraph... </p>

如我们所见，我们可以为不同类型的HTML元素提供相同的CSS类。这是完全有效的(如果我们需要的话)。

通过创建一个与要选择的CSS类同名的CSS规则并以点('.`)为前缀，来定位这些HTML元素。这是一个CSS规则示例，该示例从上面的示例中选择了两个HTML元素：

.green {
    border: 1px solid green;
}

CSS规则示例选择所有设置了CSS类green的HTML元素。请注意CSS规则的开头CSS选择器部分(.green)中的.。这向浏览器发出信号，它是一个CSS类选择器，而.之后的名称是要选择的CSS类的名称。

我们可以使用任何名称作为CSS类。没有内置的CSS类名称。使用以字母开头而不是数字或者其他特殊字符的CSS类名称。 CSS类名称区分大小写，因此" GREEN"与" green"或者" Green"不是同一CSS类。

ID选择器

ID选择器选择具有给定ID的HTML元素。 HTML元素的ID是通过id属性设置的。这是一个例子：

<div id="myElement"> My Element </div>

我们可以使用ID选择器来选择此HTML元素，方法是在CSS选择器前面添加一个#号，然后编写HTML元素的ID。这是一个通过ID选择上述HTML元素的示例：

#myElement {
    border: 1px solid blue;
}

本示例使用"#"表示选择器是一个ID选择器，然后使用"#"之后的ID" myElement"标记要选择的ID。

属性选择器

CSS属性选择器用于通过HTML属性的属性选择HTML元素。看一下这个HTML：

<a href="http://theitroad.local"> Java and Web Development Tutorials</a>
    
<a name="jump-here"></a>

注意两个a元素如何具有不同的属性。第一个a元素具有href属性，第二个a元素具有name属性。

我们可以使用属性选择器分别选择这两个a元素。这是一个CSS属性选择器示例：

[href] {
    font-size: 18px;
}

此示例CSS规则选择所有具有href属性的HTML元素。这意味着前面显示的HTML中的第一个a元素将被CSS规则定位，但是第二个a元素将不被CSS规则定位。

组成属性选择器的是[attrName]。在方括号([])中，写入要定位的属性的名称。

我们还可以基于HTML元素的属性值来选择它们。在以下各节中，我将向我们展示几种方法。

属性等于

我们可以根据其属性值选择一个HTML元素，如下所示：

[href="http://jenkov.com"]

在属性名称后面添加一个" ="，然后编写所需的属性值。在这种情况下，我想选择所有具有href属性且值为http：// jenkov.com的HTML元素。

属性始于

我们可以基于属性值的开头选择HTML元素。而不是在属性名称和属性值之间使用" ="符号，而是编写" ^ ="。这是一个例子：

<a href="http://jenkov.com"></a>
    

<style>
    [href^="http://"] {
        font-size: 18px;
    }    
</style>

本示例将选择所有具有href属性的HTML元素，该属性的值以http：//开头。

属性以语言代码开头

CSS属性以语言代码选择器开头，用于选择具有给定语言代码的HTML元素。看一下这个HTML：

<p lang="en"   > English text</p>    
<p lang="en-UK"> UK English text</p>    
<p lang="en-US"> US English text</p>

然后，我们可以使用以语言代码选择器开头的CSS属性，以选择所有语言代码以" en-"开头的HTML元素，如下所示：

[lang|="en"] {
    font-size: 18px;    
}

注意上面CSS规则中选择器的| =部分。该部分表示在语言代码中属性值应该为" en"或者以" en-"开头。

属性以

我们还可以根据属性值的结尾选择HTML元素。在属性名称和属性值之间写入" $ ="，而不是写" ^ ="。这是另一个示例：

<a href="http://jenkov.com"></a>

<style>
    [href$=".png"] {
        font-size: 18px;
    }
</style>

此示例CSS规则选择所有具有" href"属性且其值以" .png"结尾的HTML元素。

属性包含

CSS属性包含选择器用于选择具有给定属性(包含指定子字符串)的所有HTML元素。这是一个包含选择器示例的CSS属性：

[href*="jenkov.com"] {
    font-size: 18px;    
}

此示例CSS规则选择所有具有href属性的HTML元素，该属性在其属性值中的某个位置包含子字符串jenkov.com。因此，它将选择以下a元素中的两个第一个，而不是第三个：

<a href="http://jenkov.com">Jenkov.com</a>    
<a href="http://theitroad.local">Tutorials</a>
<a href="http://google.com">Google</a>

属性包含单词

CSS属性包含单词选择器，可以选择具有值包含给定单词的属性的HTML元素。该选择器与包含属性的选择器的区别在于，对于该选择器，目标子字符串必须在属性值中用空格包围。换句话说，它必须作为单词出现在属性值中，而不仅仅是一个任意的子字符串。

查看以下两个HTML元素：

<div myattr="iamaprogrammer"></div>    

<div myattr="i am a programmer"></div>

这两个div元素都在其myattr属性值内包含子字符串programmer，但是只有第二个div元素将其作为空格分隔的单词。因此，此CSS规则中的选择器：

[myattr~="programmer"] {

}

...只会选择上面显示的div元素中的第二个元素。

组选择器

CSS组选择器用于将多个选择器组合在一起，成为一个大型CSS选择器。这意味着，任何选择器定位的所有元素都将受到CSS规则的影响。这是一个CSS组选择器示例：

div, p {
    font-size : 18px;
}

这个示例CSS规则设置了div和p元素的字体大小。

注意示例中的两个选择器之间如何用逗号分隔(" div"和" p")。逗号使其成为组选择器，这意味着CSS规则将应用于与一个(或者多个)选择器组合在一起的所有元素。

儿童选择器

子CSS选择器用于选择所有其他元素的直接子元素。这是一个子CSS选择器示例：

li>a {
    font-size: 18px;
}

本示例选择所有a元素，它们是li元素的子元素。因此，将在此HTML中仅选择第二个a元素：

<a href="...">This will not be selected</a>

<ul>
    <li><a href="...">This WILL be selected</a></li>
</ul>

第一个a元素不是li元素的子元素。因此，它不是由子选择器选择的。另一方面，第二个a元素是li元素的子元素，因此CSS规则适用于该元素。

它是">"字符，将选择器标记为子选择器。注意上例中选择器的li和a之间的>字符。

我们可以使用多个级别的子选择器。这是一个例子：

ol>li>a {
    font-size: 18px;
}

本示例仅选择作为" li"子级的" a"元素，这些元素又是" ol"元素的子级。因此，CSS规则不适用于嵌套在" ul"(无序列表)中的" a"元素。

后代选择器

后代CSS选择器用于选择作为其他元素后代的元素。所选元素不必是指定祖先的直接子代。它们只需要嵌套在祖先内部的某个位置。这就是后代选择器与子选择器的不同之处。看一下这个HTML：

Link 1

我们可以使用以下CSS规则选择嵌套在ol元素内的所有a元素：

ol a {
    font-size : 18px;
}

后代选择器通过空格字符标记。注意上面CSS规则中选择器中的ol和a之间的空格。该空间指定此选择器是后代选择器，并选择所有(ol)元素(嵌套其中)作为后代的所有a元素。只要它在层次结构中较高的某个位置具有" ol"作为祖先，它就不在乎" a"在元素层次结构中嵌套的深度。

相邻兄弟选择器

相邻的同级CSS选择器用于选择与某些其他HTML元素的相邻同级的HTML元素。看一下这个HTML：

<body>
    <h1>Headline</h1>

    <p>

    </p>

    <p>

    </p>

    <table>

    </table>

    <table>

    </table>
</body>

此示例中的所有HTML元素均为同级，这意味着它们具有相同的父HTML元素(" body"元素)。但他们并非都是相邻的兄弟姐妹。相邻是指元素彼此紧跟，中间没有其他HTML元素。

我们可以使用此相邻的同级选择器选择h1之后的第一个p元素：

h1+p {

}

这将选择所有在其前面具有" h1"元素的" p"元素作为同级。在上面的HTML中，这意味着在h1元素之后的第一个p元素，而不是在随后的p元素，因为它们前面是p元素，而不是h1元素。

同样，我们可以使用此相邻的同级选择器选择与p元素相邻的所有table元素：

p+table {

}

通用兄弟选择器

CSS常规的同级选择器用于选择具有相同父元素的HTML元素。与相邻的同级选择器不同，常规同级选择器选择所有在另一个元素之后的元素(在同一个父元素内)，即使这两个元素不直接相邻也是如此。

看下面的HTML示例：

<body>
    <h1>Headline</h1>

    <p>

    </p>

    <p>

    </p>

</body>

使用通用兄弟选择器的CSS规则可用于选择所有p元素，然后在同一位置(同一父级中)的另一个p元素之前，如下所示：

p~p {

}

注意CSS规则的选择器部分中两个p之间的~字符。 ~字符将其标记为常规的同级选择器。

伪类

CSS定义了一组伪类，我们可以在CSS选择器中使用它们。 CSS伪类实际上是HTML元素的状态。因此，我们可以根据HTML元素状态为HTML元素分配不同的CSS样式。 CSS 3.0向该标准添加了许多新的CSS伪类。我将在以下各节中介绍这些CSS伪类中的每一个。

a：链接，a：已访问，a：悬停，a：活动

a元素(代表链接)可以处于四个不同的状态，每个状态都有一个关联的伪类：

a：active伪类不会"长寿"。它仅在用户单击链接(从而变为活动状态)和浏览器加载链接所指向的页面之间的短时间内应用。

以下是一些a元素伪类示例：

a:link    { color: #00ff00; }
a:visited { color: #009900; }
a:hover   { color: #66ff66; }
a:active  { color: #ffff00; }

这些示例根据链接状态(伪类)将链接(" a"元素)的颜色设置为不同的颜色。

：第一个孩子，：最后一个孩子

：first-childCSS伪类选择所有作为父HTML元素的第一个子元素的元素。 ：last-childCSS伪类选择所有作为某些父HTML元素的最后一个子元素的元素。这是一个例子：

<div>
    <p>First child</p>
    <p>Second child</p>
</div>
    
<style>
    p:first-child {
        background-color: #ff00ff;
    }
    p:last-child {
        background-color: #00ff00;
    }
</style>

此示例的第一个CSS规则选择所有p元素作为其父元素的第一个子元素。在这个例子中，这将是带有"第一个孩子"主体的" p"元素。该HTML元素的背景色设置为#ff00ff。

该示例的第二条CSS规则选择所有p元素，它们是其父元素的最后一个子元素。在这个例子中，这将是带有"第二个孩子"身体的" p"元素。

：nth-child()

：nth：child()CSS伪类选择某些父级的第n个元素。 n可以是每个元素，每个第二个元素，每个第三个元素等。这是一个示例：

<div>
    <p>1st child</p>
    <p>2nd child</p>
    <p>3rd child</p>
    <p>4th child</p>
    <p>5th child</p>
    <p>6th child</p>
</div>

<style>
    p:nth-child(2n) {
        background-color: #ffff00;
    }
</style>

这个示例CSS规则在其父元素内每隔一秒选择一次p元素。这意味着与身体"第二个孩子"，"第四个孩子"和"第六个孩子"的p个元素。

是p：nth-child(2n)中的2指定要选择的第二个p元素。如果我们改为编写" p：nth-child(3n)"，则应选择其父母的每三个" p"元素。

：first-of-type，：last-of-type

：first-of-typeCSS伪类选择在其父元素内为其类型的第一个子元素的元素。 ：last-of-typeCSS伪类在其父元素内选择其类型的最后一个元素。这是一个例子：

<div>
    <h2>1st h2</h2>
    <p>1st p</p>

    <h2>2nd h2</h2>
    <p>2nd p</p>

    <h2>3rd h2</h2>
    <p>3rd p</p>
</div>

<style>
    p:first-of-type {
        background-color: #ffff00;
    }
    p:last-of-type {
        background-color: #00ff00;
    }
</style>

此示例包含2条CSS规则。 " p：first-of-type"将选择作为其父级的前" p"个元素的" p"个元素，而不管父级包含哪些其他元素。在此示例中，这是带有主体" 1st p"的" p"元素。 p：last-of-type将选择作为其父代的最后p元素的p元素。在这个例子中，这将是带有主体" 3rd p"的" p"元素。

：nth-of-type()

nth-of-type()CSS伪类选择所有在其父代中属于其类型n的元素。在圆括号内，我们可以指定它们是否是其父类型中的每个元素，每秒，三分之一等。这是一个CSSnth-of-type()示例：

<div>
    <h2>1st h2</h2>

    <p>1st p</p>
    <p>2nd p</p>

    <p>3rd p</p>
    <p>4th p</p>

    <p>5th p</p>
    <p>6th p</p>
</div>

<style>
    p:nth-of-type(2n) {
        background-color: #ffff00;
    }
</style>

此示例中的CSS规则选择其父元素中的每个第二个p元素。因此，具有身体"第二个p"，"第四个p"和"第六个p"的" p"个元素。我们可以将2n更改为3n，并在其父级中获取此类元素的第三个元素。

:nth-last-child()

：nth-last-child()CSS伪类选择其父级的第n个子级。它的工作方式与：nth-child()伪类相似，不同的是它从最后一个到第一个向后计数元素。

:nth-last-of-type()

：nth-last-of-type()CSS伪类在其父级中选择同类的第n个子级。它的工作方式与：nth-of-type()伪类相似，不同之处在于它从每个父级中的最后一个元素向第一个元素向后计数元素。

:only-child

：only-childCSS伪类选择所有元素作为其父元素的唯一子元素。

:only-of-type

：only-of-typeCSS伪类会选择所有属于其父类内唯一子元素的元素。

:empty

：emptyCSS伪类选择所有为空的HTML元素，这意味着它们的主体内没有文本或者子元素。这是一个：empty伪类的例子：

div:empty {

}

该CSS规则选择所有为空的div元素。

:not()

：not()CSS伪类选择所有与:: :()伪类作为参数(在括号内)不匹配的CSS选择器的HTML元素。这是一个例子：

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

这个CSS规则会选择所有p元素，这些元素不是其父母的最后一个孩子。

:checked

：checkedCSS伪类选择所有选中的输入字段，即所有复选框。这是一个：checked的例子：

input[type="checkbox"]:checked {

}

该CSS规则选择所有具有" type"属性且值为" checkbox"的" input"字段，并对其进行检查。

:enabled,:disabled

：enabled和：disabledCSS伪类选择启用或者禁用的HTML元素。这通常是输入字段。这是一个例子：

input:enabled {
    border: 1px solid #6666ff;
}

input:disabled {
    border: 1px solid #666666;
}

此示例在所有启用的" input"元素上设置了蓝色边框颜色，并在所有禁用的" input"字段上设置了灰色边框。

伪元素

CSS伪元素是可以设置样式的部件元素，但本身并不是真正的HTML元素。

在CSS选择器中使用双冒号(::)，然后使用伪元素的名称来指定伪元素。该语法是CSS 3.0中新增的。这是一个CSS 3.0伪元素示例：

p::first-letter {
    font-size : 20px;
}

在CSS 3.0之前，标准是单个冒号，如下所示：

p:first-letter {
    font-size : 20px;
}

为了向后兼容，单冒号表示法在大多数浏览器中仍然有效，但是建议我们使用双冒号表示法。

我们可以使用几种不同的伪元素。以下各节介绍了CSS伪元素。

::first-letter

：first-letterCSS伪元素可以用来选择HTML元素的首字母。例如，要选择所有p元素的首字母，我们应该编写：

p::first-letter {
    font-size: 20px;
}

本示例将所有p元素内的第一个字母设置为20px字体大小。

::first-line

与::first-letter一样，我们可以选择HTML元素的第一行，并以不同的方式设置样式。第一行不是第一句话。它是文本的第一条水平线，无论它构成的是小于还是大于完整的句子。

这是一个：first-line伪元素的例子：

p::first-line {
    font-size: 19px;
}

本示例将所有p元素的第一行设置为字体大小19px。

::after，::after

CSS伪元素：before和：after匹配所选HTML元素的虚拟第一个和最后一个子元素。这通常用于使用contentCSS属性在该虚拟最后一个孩子之前或者之后插入一些额外的内容(文本或者HTML)。 " content" CSS属性用于生成内容，并通过CSS插入DOM。这是一个例子：

<div id="#theId">
    HTML Text
</div>

<style>
    #theId::after {
        content : " - Generated Content";
    }
</style>

本示例在id为theId的元素的最后一个孩子(最后的内容)之后插入在content属性的CSS属性中定义的内容。

如果改用了：before伪元素，则生成的内容将被插入在第一个内容之前，而不是最后一个内容之后。

::selection

当用户选择例如：用鼠标一段文字。 IE和Chrome支持此伪元素，但Firefox不支持。它是CSS 3.0提案的一部分，但不再是规范的一部分。

这是一个:: selectionCSS伪元素示例：

::selection {
    background-color: #ff00ff;
}

本示例将所选文本的背景色设置为紫色。