你必须记住的30个 CSS 选择器

学习 css：完整指南

我们构建了一个完整的指南来帮助您 学习 CSS，无论您是刚刚开始学习基础知识还是想要探索更高级的 CSS。

CSS 选择器

所以你学习了 base  id、 class和 descendant selectors——然后就结束了？如果是这样，您将失去极大的灵活性。您有责任将这些高级 CSS 和 CSS3 选择器提交到内存中。

基本选择器

1. *

* {

 margin: 0;

 padding: 0;

}

对于初学者来说，让我们先把明显的选择器淘汰掉，然后再继续使用更高级的选择器。

星号将针对页面上的每个元素。许多开发人员将使用此技巧将 margins 和 padding. 虽然这对于快速测试当然很好，但我建议您永远不要在生产代码中使用它。它给浏览器增加了太多的 重量 ，而且是不必要的。

* 也可以与子选择器一起使用。 

#container * {

 border: 1px solid black;

}

这将针对作为 #container div. 同样，尽量不要使用这种技术，如果有的话。

2. #X

#container {

   width: 960px;

   margin: auto;

}

将哈希符号添加到选择器的前缀允许我们以 为目标 id。这很容易成为最常见的用法；但是，在使用 id 选择器时要小心。

问问自己：我是否绝对需要对 id 这个元素应用 an 才能定位它？

id 选择器是刚性的，不允许重用。如果可能，首先尝试使用标签名称、新的 html5 元素之一，甚至是伪类。

3. .X

.error {  color: red;}

这是一个 class 选择器。ids 和 es 之间的区别在于 class，使用后者，您可以定位多个元素。class当您希望将样式应用于一组元素时，请使用 es。或者，使用 ids 来大海捞针，并仅设置特定元素的样式。

4. X

a { color: red; }ul { margin-left: 0; }

如果您想根据页面上的所有元素而不是名称来定位页面上的所有元素  怎么 type办 ？保持简单，并使用类型选择器。如果您需要定位所有无序列表，请使用 .idclassul {}

基本选择器的现场演示

See the Pen  Basic CSS Selectors by Envato Tuts+ (@tutsplus)  on CodePen.

组合选择器

5. X Y

li a {  text-decoration: none;}

下一个最常见的选择器是 descendant 选择器。当您需要更具体地使用您的选择器时，您可以使用这些。例如，如果您不需要定位 所有锚标记，而只需要定位无序列表中的锚，该怎么办？这特别是当您使用后代选择器时。

专业提示： 如果您的选择器看起来像 X Y Z A B.error，那么您做错了。总是问自己是否绝对有必要施加所有的重量。

6. X + Y

ul + p {   color: red;}

这被称为相邻选择器。它将 仅选择 紧接在前一个元素之前的元素。在这种情况下，只有每个段落之后的第一段 ul 会有红色文本。

7. X > Y

div#container > ul {  border: 1px solid black;}

X Y 与标准的 区别在于 X > Y 后者只会选择直接子代。例如，考虑以下标记。

<div id="container">

   <ul>

      <li> List Item

        <ul>

           <li> Child </li>

        </ul>

      </li>

      <li> List Item </li>

      <li> List Item </li>

      <li> List Item </li>

   </ul>

</div>

选择器 将#container > ul 只针对 s 的 ul直接子代 s   。 例如，它不会针对  作为 first 的子级的 。dividcontainerulli

出于这个原因，使用子组合器有性能优势。事实上，特别推荐在使用基于 javascript 的 CSS 选择器引擎时。

8. X ~ Y

ul ~ p {   color: red;}

这个兄弟组合器类似于 X + Y，但不那么严格。虽然相邻选择器 ( ul + p) 只会选择 前一个选择器紧接 在其前面的第一个元素，但这个选择器更通用。参考我们上面的例子，它会选择任何 p 元素，只要它们跟在 ul.

组合选择器的现场演示

See the Pen  CSS Combinator Selectors by Envato Tuts+ (@tutsplus)  on CodePen.

属性选择器

9. X[title]

a[title] {   color: green;}

称为 属性选择器，在我们上面的示例中，它只会选择具有 title 属性的锚标记。没有的锚标签不会收到这种特殊的样式。但是，如果您需要更具体怎么办？看看下一个例子！

10. X[href="foo"]

a[href="https://code.tutsplus.  com"] {  color: #83b348; /* Envato green */}

上面的代码片段将为链接到 https://code.tutsplus.  com的所有锚标签设置样式；他们会收到我们品牌的绿色。所有其他锚标记将不受影响。

请注意，我们将值用引号括起来。请记住，在使用 JavaScript CSS 选择器引擎时也要这样做。如果可能，请始终使用 CSS3 选择器而不是非官方方法。

这很好用，虽然它有点死板。如果链接确实指向 Envato Tuts+，但路径可能是 code.tutsplus. com 而不是完整 URL，该怎么办？在这些情况下，我们可以使用一些正则表达式语法。

11. X[href*="foo"]

a[href*="tutsplus"] {  color: #83b348; /* Envato green */}

我们开始了；这就是我们需要的。星号表示后续值必须出现  在属性值的某处。这样，这涵盖了 tutsplus. com、  code.tutsplus. com ， 甚至是 webdesign.tutsplus。com。

请记住，这是一个广泛的声明。如果锚标记链接到某个非 Envato 站点，并且 URL 中带有字符串 tutsplus 怎么办？当您需要更具体时，请使用 ^ and $来分别引用字符串的开头和结尾。

12. X[href^="http"]

a[href^="http"] {   

background: url(path/to/external/icon.png) no-repeat;   

padding-left: 10px;}

有没有想过一些网站如何能够在外部链接旁边显示一个小图标？我敢肯定你以前见过这些；它们很好地提醒您该链接会将您定向到一个完全不同的网站。

这是一个带有克拉符号的小包。它最常用于正则表达式中，用于指定字符串的开头。如果我们想定位所有以href 开头 的锚标记http，我们可以使用类似于上面显示的片段的选择器。

请注意，我们不是在搜索 https://; 这是不必要的，并且不考虑以 . 开头的 URL  https://。

现在，如果我们想为所有链接到照片的锚点设置样式怎么办？在这些情况下，让我们搜索 字符串的结尾 。

13. X[href$=".jpg"]

a[href$=".jpg"] {   color: red;}

同样，我们使用正则表达式符号 , $来表示字符串的结尾。在这种情况下，我们正在搜索链接到图像的所有锚点——或者至少是一个以 . 结尾的 URL  .jpg。请记住，这不会捕获 GIF 和 PNG 图像。

14. X[data-*="foo"]

a[data-filetype="image"] {   color: red;}

我们如何补偿所有不同的图像类型？好吧，我们可以创建多个选择器，例如：

a[href$=".jpg"],a[href$=".jpeg"],a[href$=".png"],a[href$=".gif"] {   color: red;}

但这很痛苦，而且效率低下。另一种可能的解决方案是使用自定义属性。如果我们将自己的 data-filetype 属性添加到链接到图像的每个锚点会怎样？

<a href="path/to/image.jpg" data-filetype="image"> Image Link </a>

然后，有了那个 钩子 ，我们可以使用标准的属性选择器来只定位那些锚点。

a[data-filetype="image"] {   color: red;}

15. X[foo~="bar"]

a[data-info~="external"] {   

color: red;} a[data-info~="image"] {   

border: 1px solid black;}

这是一个特别的，会打动你的朋友。没有太多人知道这个技巧。波浪号 ( ~) 符号允许我们定位具有以空格分隔的值列表的属性。

与上面第 15 条中的自定义属性一起，我们可以创建一个 data-info 属性，它可以接收以空格分隔的列表，其中包含我们需要注意的任何内容。在这种情况下，我们将记录外部链接和图像链接——仅作为示例。

"<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>

~ 有了这个标记，现在我们可以使用属性选择器技巧来定位任何具有这些值的标签 。

/* Target data-info attr that contains the value "external" */

a[data-info~="external"] {

   color: red;

}

 

/* And which contain the value "image" */

a[data-info~="image"] {

  border: 1px solid black;

}

很漂亮吧？

属性选择器的现场演示

See the Pen  CSS Attribute Selectors by Envato Tuts+ (@tutsplus)  on CodePen.

伪选择器

16. X:visited 和 X:link

a:link { color: red; }a:visited { color: purple; }

我们使用 :link 伪类来定位所有尚未点击的锚标签。

或者，我们也有 :visited 伪类，正如您所期望的，它允许我们仅将特定样式应用于页面上已单击或“访问”的锚 标记 。

17. X:checked

input[type=radio]:checked {   border: 1px solid black;}

这个伪类将只针对已选中的用户界面元素——如单选按钮或复选框。就这么简单。

18. X:after

和 伪before 类 after 很棒。似乎每天，人们都在寻找新的和创造性的方法来有效地使用它们。它们只是围绕所选元素生成内容。

许多人是在遇到 clear-fix hack 时第一次接触这些课程的。

.clearfix:after {

    content: "";

    display: block;

    clear: both;

    visibility: hidden;

    font-size: 0;

    height: 0;

    }

 

.clearfix {

   *display: inline-block;

   _height: 1%;

}

这个hack使用 :after 伪类在元素后面附加一个空格，然后清除它。这是一个很好的技巧，可以放在你的工具包中，尤其是在 overflow: hidden; 无法使用该方法的情况下。

对于另一个创造性的使用， 请参阅我关于创建阴影的快速提示。

根据 CSS3 选择器规范，您应该在技术上使用两个冒号的伪元素语法 ::。但是，为了保持兼容，用户代理也将接受单个冒号的使用。 

19. X:hover

div:hover {  background: #e3e3e3;}

哦，来吧。你知道这个。官方术语是“用户操作伪类”。这听起来令人困惑，但事实并非如此。想要在用户将鼠标悬停在元素上时应用特定样式？这将完成工作！

:hover 请记住，当伪类应用于锚标记以外的任何内容时，旧版本的 Internet Explorer 不会响应 。

border-bottom 例如，当您将鼠标悬停在锚点标签上时，您最常使用此选择器 。

a:hover { border-bottom: 1px solid black;}

专业提示： border-bottom: 1px solid black; 看起来比 text-decoration: underline;.

20. X:not(selector)

div:not(#container) {   color: blue;}

否定伪类特别有用。假设我想选择所有 divs，除了 id 为 的那个 container。上面的代码片段将完美地处理该任务。

或者，如果我想选择除段落标签之外的每个元素（不建议），我们可以这样做：

*:not(p) {  color: green;}

21. X::pseudoElement

p::first-line {   font-weight: bold;   font-size: 1.2em;}

我们可以使用伪元素（由 指定 ::）来设置元素片段的样式，例如第一行或第一个字母。请记住，这些必须应用于块级元素才能生效。

伪元素由两个冒号组成： ::

定位段落的第一个字母

p::first-letter {   float: left;   font-size: 2em;   font-weight: bold;   font-family: cursive;   padding-right: 2px;}

这个片段是一个抽象，它将找到页面上的所有段落，然后仅以该元素的第一个字母为目标。

这最常用于为文章的第一个字母创建类似报纸的样式。

定位段落的第一行

p::first-line {   font-weight: bold;   font-size: 1.2em;}

类似地， ::first-line 伪元素将如预期的那样仅设置元素第一行的样式。

 “为了与现有样式表兼容，用户代理还必须接受以前在 CSS 级别 1和 2 中引入的伪元素的单冒号表示法（即 、 :first-line和 :first-letter）  。这种兼容性不允许用于引入的新伪元素在本规范中。”— W3C 选择器规范:before:after

伪选择器的现场演示

See the Pen  CSS Pseudo Selectors by Envato Tuts+ (@tutsplus)  on CodePen.

第 N 个子项和类型选择器

22. X:nth-child(n)

li:nth-child(3) {   color: red;}

还记得我们无法针对堆栈中的特定元素的日子吗？nth-child 伪类解决了这个问题！ 

请注意，它 nth-child 接受整数作为参数，但这不是从零开始的。如果您希望定位第二个列表项，请使用 li:nth-child(2).

我们甚至可以使用它来选择一组可变的孩子。例如，我们可以 li:nth-child(4n) 每隔四个列表项选择一次。

23. X:nth-last-child(n)

li:nth-last-child(2) {   color: red;}

如果您在 a 中有一个巨大的项目列表 ul，并且您只需要访问例如倒数第三个项目怎么办？而不是做 li:nth-child(397)，你可以改为使用 nth-last-child 伪类。

这种技术的工作原理几乎与上面的第 16 条相同。不同之处在于它从集合的末尾开始，然后返回。

24. X:nth-of-type(n)

ul:nth-of-type(3) {   border: 1px solid black;}

有时 child，您需要根据 type of 元素进行选择，而不是选择 a 。

想象一下包含五个无序列表的标记。如果您只想设置第三个样式 ul，并且没有唯一 id 要挂钩的，您可以使用 nth-of-type(n) 伪类。在上面的代码片段中，只有第三个 ul 会有边框。

25. X:nth-last-of-type(n)

ul:nth-last-of-type(3) {   border: 1px solid black;}

是的，为了保持一致，我们还可以使用 nth-last-of-type 从选择器列表的末尾开始，然后返回以定位所需的元素。

26. X:first-child

ul li:first-child {   border-top: none;}

这个结构伪类允许我们只定位元素父元素的第一个子元素。您将经常使用它来删除第一个和最后一个列表项的边框。

例如，假设您有一个行列表，每个行都有 a border-top 和 a  border-bottom。好吧，通过这种安排，该集合中的第一个和最后一个项目看起来有点奇怪。

许多设计师应用 first 和 的类last 来弥补这一点。相反，您可以使用这些伪类。

27. X:last-child

ul > li:last-child {   color: green;}

first-child, 的反面 last-child 将针对元素父项的最后一项。

last-child 选择器示例

让我们构建一个简单的示例来演示这些类的一种可能用法。我们将创建一个样式列表项。

<ul>   

<li> List Item </li>   

<li> List Item </li>   

<li> List Item </li>

</ul>

对于标记，没有什么特别之处：只是一个简单的列表。

这是CSS：

ul {

 width: 200px;

 background: #292929;

 color: white;

 list-style: none;

 padding-left: 0;

}

 

li {

 padding: 10px;

 border-bottom: 1px solid black;

 border-top: 1px solid #3c3c3c;

}

此样式将设置背景，删除 上的浏览器默认填充 ul，并为每个应用边框以 li 提供一点深度。

要为您的列表添加深度，请将 a 应用于 比的背景颜色深一border-bottom 到 li 两个的阴影 。li接下来，涂上 浅色border-top 几号的a  。

如上图所示，唯一的问题是边框将应用于无序列表的顶部和底部——这看起来很奇怪。让我们使用 :first-child 和 :last-child 伪类来解决这个问题。

li:first-child {

    border-top: none;

}

 

li:last-child {

   border-bottom: none;

}

我们开始了；修复它！

28. X:only-child

div p:only-child {   color: red;}

老实说，您可能不会发现自己 only-child 经常使用伪类。尽管如此，它是可用的，如果你需要它。

 它允许您定位作为其父级唯一子级的元素 。例如，参考上面的片段，只有作为唯一子级的段落 div 才会被涂成红色。

让我们假设以下标记。

<div><p> My paragraph here. </p></div> <div>   

<p> Two paragraphs total. </p>   

<p> Two paragraphs total. </p></div>

在这种情况下，第二个 div的段落将不会被定位；只有第一个 div。一旦你对一个元素应用了多个子元素， only-child 伪类就不再生效。

29. X:only-of-type

li:only-of-type {   font-weight: bold;}

这个结构伪类可以以一些巧妙的方式使用。它将针对在其父容器中没有任何兄弟姐妹的元素。例如，让我们定位所有 ul只有一个列表项的 s。

首先，问问自己你将如何完成这项任务。您可以这样做 ul li，但这将针对 所有 列表项。唯一的解决方案是使用 only-of-type.

ul > li:only-of-type {   font-weight: bold;}

30. X:first-of-type

first-of-type 伪类允许您选择其类型的第一个兄弟姐妹。 

一个测试

为了更好地理解这一点，让我们做一个测试。将以下标记复制到您的代码编辑器中：

<div>

   <p> My paragraph here. </p>

   <ul>

      <li> List Item 1 </li>

      <li> List Item 2 </li>

   </ul>

 

   <ul>

      <li> List Item 3 </li>

      <li> List Item 4 </li>

   </ul>  

</div>

现在，无需进一步阅读，尝试找出如何仅定位 "List Item 2"。当您弄清楚（或放弃）后，请继续阅读。

解决方案 1

有多种方法可以解决此测试。我们将审查其中的一些。让我们从使用 first-of-type.

ul:first-of-type > li:nth-child(2) {   font-weight: bold;}

这个片段本质上说，要找到页面上的第一个无序列表，然后只找到直接子项，它们是列表项。接下来，将其过滤到该集合中的第二个列表项。

解决方案 2

另一种选择是使用相邻选择器。

p + ul li:last-child {   font-weight: bold;}

在这种情况下，我们找到 ul 立即执行 p 标记的 ，然后找到元素的最后一个子元素。

解决方案 3

使用这些选择器，我们可以随心所欲地变得讨厌或好玩。

ul:first-of-type li:nth-last-child(1) {   font-weight: bold;   }

这一次，我们抓取 ul 页面上的第一个，然后找到第一个列表项，但从底部开始！ 

第 N 个子项和类型选择器的现场演示

See the Pen  CSS Nth Child and Type Selectors by Envato Tuts+ (@tutsplus)  on CodePen.

结论

如果您正在补偿旧浏览器，例如 Internet Explorer 6，则在使用这些较新的选择器时仍然需要小心。但请不要让这阻止你学习这些。你会对自己造成极大的伤害。请务必在 此处参考浏览器兼容性列表。 或者，您可以使用 Dean Edward 出色的 IE9.js 脚本 为旧版浏览器提供对这些选择器的支持。

其次，在使用 javaScript 库（如流行的 jquery）时，尽可能尝试在库的自定义方法/选择器上使用这些原生 CSS3 选择器。它将使您的代码更快，因为选择器引擎可以使用浏览器的本机解析，而不是它自己的。