常用的 30 个CSS 选择器

*

星号可以用来定义页面的所有元素，一般用来定义全局样式，比如用来把 margin 和 padding 都设置为 0，也可以用于子元素

* { margin: 0; padding: 0; }
#container * { board: 1px solid black; }

#X

id 选择器，缺点是比较局限不能重用，用之前先问问自己：是否真的需要使用id来定义元素的样式？如果可以的话，优先尝试使用HTML5 的其中新元素标签名称，或使用伪类。

#container { width: 960px; margin: auto; }

.X

类选择器

.error { color: red; }

X Y

后代选择器

li a { text-decoration: none; }

经验分享

如果你的选择器看起来像X Y Z A B.error这样就错了。问问自己是否真的需要加入这么多负荷。

X

标签选择器

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

:visited 和 :link 伪类选择器，:visited 定义已经访问过的链接，:link 定义还没点击的链接

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

X + Y

相邻选择器，只会选中紧接在另一个元素后的元素

ul + p { color: red; } /* 只有每个 ul 后面的第一个 p 是红色的 */

X > Y

直系后代选择器，与 X Y 的区别是 X > Y 只会选中直接后代，不会影响间接的后代

#container > ul { border: 1px solid black; } /* 只会定义 #container 下面第一层 ul 元素 */

X ~ Y

兄弟选择器，跟X + Y很像，但没有那么严格，兄弟选择器更广泛。

ul ~ p { color: red; } /* 只要在 ul 后的 p 兄弟元素都会被选中 */

X[title]

属性选择器

a[title] { color: green; } /* 只有带有 title 属性的 a 标签才会被匹配 */

X[href="foo"]

属性值选择器

/* 所有指向 http://net.tutsplus.com 的链接都是 nettuts 品牌的绿色 */
a[href="http://net.tutsplus.com"] { color: #1f6053; /* nettuts green */ }

X[href*="nettuts"]

属性值任意选择器，星号表示赋值可以出现在属性值的任意处

/* 定义了指向 nettuts.com，net.tutsplus.com 甚至 tutsplus.com 的链接 */
a[href*="tuts"] { color: #1f6053; /* nettuts green */ }

X[href^="http"]

属性值前缀选择器，^ 表示赋值必须出现在属性值的开头

有些网站是在链接旁边加一个小图标指示这是外部链接，它们标示着链接会导向到另外的网站，就可以通过指定前缀的属性值选择器很容易地实现。

/* 定义所有 href 属性前缀为 http 的链接标签 */
a[href^="http"] { background: url(path/to/external/icon.png) no-repeat; padding-left: 10px; }

可以看到上面没有使用http://，因为没有必要，而且这样不能匹配以https://开头的 url

X[href$=".jpg"]

属性值后缀选择器，$ 表示赋值必须出现在属性值的结尾

a[href$=".jpg"] { color: red; } /* 匹配所有指向以 .jpg 结尾的图片 url */

X[data-*="foo"]

自定义属性赋值选择器

用上面的属性值后缀选择器匹配所有的图片，包括png，jpeg，jpg和gif需要使用多个选择器。

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; }

X[foo~="bar"]

波浪符号（~）可以让你定义取值带有空格的属性。

继续使用前面的自定义属性，创建data-info属性来匹配带有空格的取值。举个例子，这里我们匹配外部链接和图片链接。

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

使用上面的代码，现在我们可以用波浪号的技巧来定义包含其中一个值的元素

/* 定义 data-info 属性值包含 "external" 的元素 */
a[data-info~="external"] { color: red; }

/* 以及包含 "image" 的元素 */
a[data-info~="image"] { border: 1px solid black; }

X:checked

:checked 伪类选择器，这个伪类可以用来定义选中（checked）的元素，比如单选按钮（radio）或多选按钮（checkbox）

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

X::before 和 X::after

这两个伪类可以在元素前面和后面添加内容。

/* 利用:after在元素后面添加间隔和清除浮动的元素 */
.clearfix::after {
  content: "";
  display: block;
  clear: both;
  visibility: hidden;
  font-size: 0;
  height: 0;
}

根据 CSS3 选择器规范，语法上你应该使用双冒号来::来指定伪类。然而，为了兼容多数浏览器，单冒号也被承认。

X:hover

用户交互伪类，用于给用户鼠标划过的元素添加样式

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

经验分享 border-bottom: 1px solid black;比text-decoration: underline;的效果更好。

X:not(selector)

否定伪类选择器

*:not(p) { color: green; } /* 选中所有不是段落标签的元素 */

X::pseudoElement

我们可以使用伪元素（用::表示）来定义某些片段元素，比如第一行或第一个字母。要记住的是这只能用于块状（block）元素。

/* 匹配段落的第一行 */
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;
}

X:nth-child(n)

匹配一组序列元素里的第 n 个元素，从1数起。

甚至可以使用这种方法来选择一系列的子元素。比如li:nth-child(4n)可以选择排在 4 的倍数的元素。

li:nth-child(3) { color: red; } /* 匹配 li 列表里的第 3 个元素 */

X:nth-last-child(n)

这个技巧跟上面的一样，但是从集合的最后一个数起

li:nth-last-child(2) { color: red; } /* 匹配 li 列表里的第 2 个元素 */

X:nth-of-type(n)

通过元素的类型type来选择，而不是子元素child。

如果你想定义第三个ul的样式，但又没有id来进行匹配，那么可以使用伪类nth-of-type(n)。

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

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

使用nth-last-of-type来选择倒数第 n 个type 元素。

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

X:first-child

用于选中母元素的第一个子元素，常常用于去掉第一个或最后一个元素的边框。

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

X:last-child

last-child是first-child的反面，可以匹配最后一个子元素。

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

X:only-child

only-child 可以让你匹配唯一的子元素。

例如，在下面的代码中，只有当div只有一个p子元素的时候段落字体才是红色的。

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

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

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

第二个div里面的段落不会被选中，只有第一个div的段落才被选中。只要母元素含有超过一个子元素，only-child伪类就会失效。

X:only-of-type

only-of-type 会匹配母元素里没有邻近兄弟元素的子元素。例如，匹配所有只有一个列表元素的ul。

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

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; }

方案 3

还可以尝试使用不同的组合，先找到页面的第一个ul，然后找到倒数第一个元素。

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

results matching ""

    No results matching ""