Did you know? 31 Applications of CSS Selectors_html/css_WEB-ITnose

Selector is a very important concept in CSS. All tags in HTML language are controlled through different CSS selectors. Users only need to control different HTML tags through selectors and assign various style declarations to achieve various effects.

1. *

* { margin: 0; padding: 0; }

The star selector is used to select all elements on the page. It can be used to quickly clear the margin and padding of all elements, but it is best Only use it during testing, and do not use it formally in CSS files, otherwise it will greatly increase the burden on the browser. In addition, the star selector can also set styles for all child elements of the parent layer. Repeat, use this method as little as possible:

#container * { border: 1px solid black; }

Compatible with IE6

2. #X

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

id selector, one of the most common selector usages, cannot be reused.

Compatible with IE6

3. . The id selector can select multiple elements at the same time, while the id selector can only style a unique element.

.error { color: red; }

Compatible with IE6

4. X Y

Descendant selector, selects all Y elements within the All links within the li tag.

li a { text-decoration: none; }

Compatible with IE6

5. X

Tag selector (type selector), used to select HTML tags (tags).

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

Compatible with IE6

6. X:visited and links, and :visited is used to select all visited links.

Compatible with IE6

7. X Y

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

Adjacent selector (adjacent selector), selects the first element that appears immediately after the This code will select the first element that appears after the ul element, which is the p element.

Compatibility IE6

8. The child selector X > Y only selects Y elements that appear directly within the parent layer X. For example, in the following HTML structure, #container > ul selects the ul element that appears directly within div#container, excluding ul elements nested within li:

ul + p { color: red; }

Compatible with IE6

9. All sibling elements. The above code will select all sibling p elements that appear after the ul element, instead of selecting the first p element that appears like ul p.

Compatible with IE7

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

10. The code will select all links that use the title attribute, or a[title="title content"]{color:green} to further narrow the selection.

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

Compatible with IE7

11. X[href="foo"]

ul ~ p { color: red; }

The above code will select all jumps to http://net.tutsplus .com links, these links will be displayed in green, other links will not be affected.

It’s just that this method is very strict and cannot differ by one character. More flexible usage will be introduced one by one below.

Compatible with IE7

12. X[href*="nettuts"]

a[title] { color: green; }

, this code will select links to jump to nettuts.com, net.tutsplus.com, or tutsplus.com.

Compatible with IE7

13. , this code is also commonly used to style all external links in the page.

a[href="http://net.tutsplus.com"] { color: #1f6053; /* nettuts green */ }

Compatible with IE7

14. Required, this code will select all links that jump to jpg images.

Compatible with IE7

15. To select all links that jump to the image, you can use the following method:

a[href*="tuts"] { color: #1f6053; /* nettuts green */ }

Or, first add the data- attribute to the image link (Note: HTML5 Custom Data Attributes)

Then select through the attribute selector:

a[href^="http"] { background: url(path/to/external/icon.png) no-repeat; padding-left: 10px; }

Compatible with IE7

　16. X[foo~="bar"]

a[data-info~="external"] { color: red; } a[data-info~="image"] { border: 1px solid black; }

　　如果属性值中有用空格分隔的一连串属性值，~ 可以选取其中一个属性值，比如：

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

　　借助 ~ 选取包含 external 或者 image 属性值的元素：

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

　　兼容 IE7+

　17. X:checked

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

　　:checked 伪类选择器用于选取所有标记为 checked 的元素，比如单选框 (radio button) 或复选框 (checkbox)。

　　兼容 IE9+

　18. X:after

　　:before 与 :after 是两个令人兴奋的伪类选择器，几乎每天都有人发明出一些新用法，这里简单介绍一下如何用它清除浮动：

.clearfix:after { content: ""; display: block; clear: both; visibility: hidden; font-size: 0; height: 0; } .clearfix { *display: inline-block; _height: 1%; }

　　这种方式通过 :after 在元素后面添加一块区域，然后将其隐藏，可以弥补 overflow: hidden; 的缺陷。

根据 CSS3 选择器标准，理论上伪类选择器应该使用双冒号，但实际上浏览器也支持单冒号的形式，所以可以继续使用单冒号。

　　兼容 IE8+

　19. X:hover

div:hover { background: #e3e3e3; }

　　最常用的伪类选择器，不多解释了，只是需要注意 IE6 不支持将 :hover 作用于除 a 链接外的其他元素。

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

　　另外提醒一点：border-bottom: 1px solid black; 的效果要比 text-decoration: underline; 好看一些。

　　兼容 IE6+ （在 IE6 中 :hover 只能作用于链接）

　20. X:not(selector)

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

　　:not 伪类选择器有时会起到很重要的作用，假设现在要选取除 #contaienr 外的所有 div 元素，就可以用上面的代码实现。

　　兼容 IE9+

　21. X::pseudoElement

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

　　通过伪元素（使用双冒号 ::）可以给元素的某一部分设定样式，比如第一行、或者第一个字母。需要注意的是，这只对块级元素 (block level elements) 生效。

提示：伪元素 (pseudo element) 使用双冒号 ::

　　选取段落的第一个字母

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

　　这段代码将选取页面中所有 p 元素，然后再选取其中的第一个字母。

　　选取段落的第一行

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

　　与上面的例子类似，通过 ::first-line 选取页面的第一行。

为了兼容 CSS1 与 CSS2 中的伪元素（比如 :first-line, :first-letter, :before 以及 :after），浏览器接受单冒号与双冒号两种格式，但对于 CSS3 中最新引入的伪元素，必须使用双冒号。

　　兼容 IE6+

　22. X:nth-child(n)

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

　　:nth-child(n) 用于选取 stack 中的某一个元素，只接受整数作参数（参数从 1 开始计数），如果你想选取第二个 li 元素，只需这样写 li:nth-child(2)。

　　也可以设定可变的参数，比如 li:nth-child(4n) 将选取第 4, 8 , 12… 个元素（4*n, n=1, n++）。

　　兼容 IE9+

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

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

　　除了正序（从上往下）选择，也可以使用 :nth-last-child(n) 倒序（从下往上）选择第几个元素，其他用法与第 22 条完全一样。

　　兼容 IE9+

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

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

　　:nth-of-type(n) 的作用不是选取子元素 (child element)，而是选取同类元素 (type of element)。想象一下 HTML 文件中包含 5 个 ul 元素，现在要选取第三个，只需使用上面的代码，而不用再单独这个 ul 添加 id。

关于 :nth-child 与 :nth-of-type 的区别，具体请查看 CSS-Tricks 网站的解释，简单来说，如果父层内只包含一种元素（比如都是 p 元素）那两种用法是等效的，如果父层包含多种元素（比如 p 元素与同级的其他元素），需要选取第几个 p 元素时应该用 :nth-of-type。

　　兼容 IE9+

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

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

　　与第 24 条用法相同，倒序选取同类元素。

　　兼容 IE9+

　26. X:first-child

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

　　选取父层内的第一个子元素。

　　兼容 IE7+

　27. X:last-child

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

　　与第 26 条用法相同，区别在于 :last-child 选取父层元素内的最后一个子元素。

　　:first-child 与 :last-child 通常用来清除边框 (border)，比如

内每个

都使用了 border-top 与 border-bottom 边框，结果是，第一个元素的上方与最后一个元素的下方会是单边框效果。这种情况可以用 :first-child 与 :last-child 清除上下的边框，而不用给第一个元素添加id="first" 或者给最后一个元素添加 id="last"。

　　兼容 IE9+

　28. X:only-child

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

　　这个伪类选择器不常用，它可以选取包含唯一指定子元素的父层。比如上面的代码中将选取下面第一个 div 元素，而不是第二个 div 中的 p 元素。

<div><p> My paragraph here. </p></div> <div> <p> Two paragraphs total. </p> <p> Two paragraphs total. </p> </div>

　　兼容 IE9+

　29. X:only-of-type

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

　　这个选择器会选取某个元素，并且这个元素在其父层内没有其他同级同类元素（不一定是唯一元素）。比如，要选取所有只包含一个 li 元素的 ul 元素该怎么做呢？如果使用 ul li 将选取所有 li 元素，应该使用 only-of-type。

　　兼容 IE9+

　30. X:first-of-type

　　first-of-type 伪类可以选取某种元素的第一个同类元素。

　　为了更好地理解它的用法，现在思考一下如何在下面的 HTML 结构中选取 List Item 2 ？

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

　　方法一

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

　　这段代码的意思是：首先选取第一个 ul 元素；然后选取其中的所有直接子元素，也就是 li；最后选取第二个子元素。

　　方法二

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

　　找到 p 元素后第一个出现的 ul 元素，然后选取其中的最后一个子元素。

　　方法三

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

　　找到第一个 ul 元素，然后从上往下选取第一个子元素。

　　兼容 IE9+

　31. 伪类选择器叠用

　　有些伪类选择器或者伪元素是可以叠用的，例如：

#post p:nth-of-type(2):first-letter { float: left; margin: 0 5px 0 1em; width: 1em; height: 1em; font-size: 2em; }

 

　　本文链接：