Analysis of the most commonly used CSS selectors

You may have mastered the basic CSS selectors such as id, class, and background selector. But this is far from all there is to CSS. The following is a systematic analysis of the 30 most commonly used selectors in CSS, including our most troublesome browser compatibility issue. Only by mastering them can you truly appreciate the great flexibility of CSS.

1. *

* { margin: 0; padding: 0; }

The star selector will work on every element on the page. Web designers often use it to set the margin and padding of all elements in the page to 0. The * selector can also be used in child selectors.

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

The above code will be applied to all child elements with the id of the container element. Unless necessary, I do not recommend using the star selector in the page because its scope is too large and consumes browser resources. Compatible browsers: IE6+, Firefox, Chrome, Safari, Opera

2. #X

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

Elements with corresponding ids in the hash scope. id is one of our most commonly used css selectors. The advantages of the id selector are precision and high priority (the priority base is 100, which is much higher than the 10 of class). As the best choice for javascript script hooks, the disadvantages are also obvious: the priority is too high and the reusability is poor, so in Before using the id selector, we'd better ask ourselves, are we really at the point where we don't need to use the id selector? Compatible browsers: IE6+, Firefox, Chrome, Safari, Opera

3. .X

.error { color: red; }

This is a class (Class) Selector. The difference between the class selector and the id selector is that the class selector can act on a group of elements that are desired to be styled. Compatible browsers: IE6+, Firefox, Chrome, Safari, Opera

4. X Y

li a { text-decoration: none; }

This is also our most commonly used selector - the descendant selector. Used to select the sub-element Y under the All the a's in li are underlined, but there is an ul in li. I don't want the a in li under ul to be underlined. When using this descendant selector, consider whether you want a style to apply to all descendant elements. Another function of this descendant selector is to create a namespace-like function. For example, the scope of the above code style is obviously li. Compatible browsers: IE6+, Firefox, Chrome, Safari, Opera

5. X

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

Tab selector. Use a tag selector to act on all corresponding tags within a scope. The priority is just higher than *. Compatible browsers: IE6+, Firefox, Chrome, Safari, Opera

6. X:visited and X:link

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

use:link pseudo-class to act on unclicked link tags. The :hover pseudo-class works on clicked links. Compatible browsers: IE7+, Firefox, Chrome, Safari, Opera

7. X+Y

ul + p { color: red; }

Adjacent selector, the above code will match the first p after ul and set the text color in the paragraph is red. (Only matches the first element) Compatible browsers: IE7+, Firefox, Chrome, Safari, Opera

8. X>Y

div#container > ul {border: 1px solid black;}
<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>

Sub-selector. Unlike the descendant selector X Y, the child selector only works on the immediate children Y under X. In the above css and html examples, div#container>ul only works on the most recent ul in the container. Theoretically speaking, X > Y is a selector worth advocating, but unfortunately IE6 does not support it. Compatible browsers: IE7+, Firefox, Chrome, Safari, Opera

9. level of all Y elements, while X+Y only matches the first one. Compatible browsers: IE7+, Firefox, Chrome, Safari, Opera

10. X[title]

ul ~ p {color: red;}

Attribute selector. For example, the above code matches link elements with title attributes.

Compatible browsers: IE7+, Firefox, Chrome, Safari, Opera

11. X[title=”foo”]

a[title] {color: green;}

Attribute selector. The above code matches all links that have the href attribute and the href is http://www.xuanfengge.com.

This function is very good, but it is somewhat limited. What if we want to match all links whose href contains css9.net? Look at the next selector. Compatible browsers: IE7+, Firefox, Chrome, Safari, Opera

12. X[title*=”css9.net”]

a[href="http://www.xuanfengge.com"] {color: #1f6053;}

Attribute selector. As we want, the above code matches all links that contain "xuanfengge.com" in the href.

Compatible browsers: IE7+, Firefox, Chrome, Safari, Opera

13. Another solution is to add a specific attribute to all image links, such as 'data-file'

html code

a[href*="xuanfengge.com"] {color: #1f6053;}

so that the font color of all links to images is red.

Compatible browsers: IE7+, Firefox, Chrome, Safari, Opera

15. X[foo~=”bar”]

Attribute selector. The tilde symbol in the attribute selector allows us to match one of multiple values ​​separated by spaces in the attribute value. Look at the following example:

html code

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

css code

<a href="path/to/image.jpg" data-filetype="image"> 图片链接 </a>
css代码如下： a[data-filetype="image"] { color: red;}

In the above example, the font color of the link containing "external" in the matching data-info attribute is red. Set a black border for links that match "image" in the data-info attribute.

兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera

17. X:checked

checked伪类用来匹配处于选定状态的界面元素，如radio、checkbox。

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

上面代码中匹配的是所有处于选定状态的单选radio，设置1px的黑色边框。

兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera

18. X:after和X:before

这两个伪类与content结合用于在元素的前面或者后面追加内容，看一个简单的例子：

h1:after {content:url(/i/logo.gif)}

上面的代码实现了在h1标题的后面显示一张图片。

我们也经常用它来实现清除浮动，写法如下：

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

19. X:hover

div:hover {
background: #e3e3e3;
}

:hover伪类设定当鼠标划过时元素的样式。上面代码中设定了div划过时的背景色。

需要注意的是，在ie 6中，:hover只能用于链接元素。

这里分享一个经验，在设定链接划过时出现下滑线时，使用border-bottom会比text-decoration显得更漂亮些。代码如下：

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

兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera

20. X:not(selector)

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

兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera(IE6竟然支持，有些意外啊。)

22. X:nth-child(n)

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

这个伪类用于设定一个序列元素(比如li、tr)中的第n个元素(从1开始算起)的样式。在上面例子中，设定第三个列表元素li的字体颜色为红色。

看一个更灵活的用法，在下面例子中设定第偶数个元素的样式，可以用它来实现隔行换色：

tr:nth-child(2n) {
background-color: gray;
}

兼容浏览器：IE9+、Firefox、Chrome、Safari

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

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

与X:nth-child(n)功能类似，不同的是它从一个序列的最后一个元素开始算起。上面例子中设定倒数第二个列表元素的字体颜色。

兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera

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

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

与X:nth-child(n)功能类似，不同的是它匹配的不是某个序列元素，而是元素类型。例如上面的代码设置页面中出现的第三个无序列表ul的边框。

兼容浏览器：IE9+、Firefox、Chrome、Safari

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

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

与X:nth-of-type(n)功能类似，不同的是它从元素最后一次出现开始算起。上面例子中设定倒数第三个无序列表的边框

兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera

26. X:first-child

:first-child伪类用于匹配一个序列的第一个元素。我们经常用它来实现一个序列的第一个元素或最后一个元素的上(下)边框，如：

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

兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera

27. X:last-child

ul > li:last-child {
border-bottom:none;
}

与:first-child类似，它匹配的是序列中的最后一个元素。

兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera

28. X:only-child

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

这个伪类用的比较少。在上面例子中匹配的是div下有且仅有一个的p，也就是说，如果div内有多个p，将不匹配。

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

在上面代码中第一个div中的段落p将会被匹配，而第二个div中的p则不会。

兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera

29. X:only-of-type

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

这个伪类匹配的是，在它上级容器下只有它一个子元素，它没有邻居元素。例如上面代码匹配仅有一个列表项的列表元素。

兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera

30. X:first-of-type

:first-of-type伪类与:nth-of-type(1)效果相同，匹配出现的第一个元素。我们来看个例子：

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

方案二：

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

方案三：

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

兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera。

总结：

如果你正在使用老版本的浏览器，如IE 6，在使用上面css选择器时一定要注意它是否兼容。不过，这不应成为阻止我们学习使用它的理由。在设计时，你可以参考浏览器兼容性列表，也可以通过脚本手段让老版本的浏览器也支持它们。

另一点，我们在使用javascript类库的选择器时，例如jquery，要尽可能的使用这些原生的css3选择器，因为类库的选择器引擎会通过浏览器内置解析它们，这样会获得更快的速度