你应当了解的30个css挑选器

2021-01-20 09:50 jianzhan

1.*


拷贝编码
编码以下:

* {
margin: 0;
padding: 0;
}


针对初学者，在学习培训更多高級挑选器以前，最开始掌握的挑选器。

星号挑选器将配对网页页面里的每个元素。许多开发设计者应用这个技能将外边距和内边距重设为零。尽管在迅速检测时这的确很功能强大，但我提议你始终不必再造产编码中应用它。它给访问器带来很多无须要的压力。

* 也能做为子挑选符应用。


拷贝编码
编码以下:

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


这将配对#container div的每个子孙后代元素。再度强调，尽可能不必应用这类技术性。

查询事例


适配性

•IE6+
•Firefox
•Chrome
•Safari
•Opera

2.#X


拷贝编码
编码以下:

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

井号前缀容许大家挑选id。这是最多见的用法，但是应当谨慎应用ID挑选器。

不断问自身：我1定必须id来配对要挑选的元素吗？

id挑选符是唯1的，不容许反复应用。假如将会的话，先尝试应用1个标识名字，1个新的HTML5元素，乃至是1个伪类。

查询事例

适配性

•IE6+
•Firefox
•Chrome
•Safari
•Opera

3. .X


拷贝编码
编码以下:

.error {
color: red;
}

如今详细介绍的是类挑选符。id和类的不一样的地方在于后者能够数次应用。当你想给1组元素运用款式的情况下可使用类挑选符。此外，当你紧想给独特元素运用款式的情况下才应用id。

查询事例

适配性

•IE6+
•Firefox
•Chrome
•Safari
•Opera

4. X Y


拷贝编码
编码以下:

li a {
text-decoration: none;
}


下1个最常见的挑选符是子孙后代挑选符。当你必须给你的挑选符提升独特性的情况下你可使用。比如，假如你只想配对无编码序列表下的锚元素？此时子孙后代挑选符派上用处。

小贴士——假如你的挑选符看起来像这样 X Y Z A B.error，那你就错了。時刻问自身应用这高的权重是不是必须。

查询事例

适配性

•IE6+
•Firefox
•Chrome
•Safari
•Opera

5. X


拷贝编码
编码以下:

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


假如你想配对网页页面上的全部的元素，依据她们的种类，而并不是id或类名？不言而喻，应用种类挑选符。假如你必须挑选全部的无编码序列表，请应用ul {}。

查询事例

适配性

•IE6+
•Firefox
•Chrome
•Safari
•Opera

6. X:visited and X:link


拷贝编码
编码以下:

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


大家应用:link 伪类挑选符挑选全部早已被点一下过的锚标识。

另外，大家也是有:visited伪类挑选符，正如你期待的，容许大家仅给网页页面上被点一下过的或被浏览过的锚标识运用款式。

查询事例

适配性

•IE7+
•Firefox
•Chrome
•Safari
•Opera

7. X + Y


拷贝编码
编码以下:

ul + p {
color: red;
}


这被称作邻近挑选符。它将只挑选紧贴在X元素以后Y元素。上面的事例，仅每个ul以后的第1个段落元素的文字为鲜红色。

查询事例

适配性

•IE7+
•Firefox
•Chrome
•Safari
•Opera

8. 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将只挑选id为container的div的立即子代ul。它不配对更深层次的li的子代的ul。

因而，应用子代挑选符性爱能上的优点。客观事实上，这一样可用于根据css挑选器的javascript模块。

查询事例

适配性

•IE7+
•Firefox
•Chrome
•Safari
•Opera

9. X ~ Y


拷贝编码
编码以下:

ul ~ p {
color: red;
}


这是弟兄挑选符和X + Y1样，但是，它沒有管束。与邻近挑选符（ul + li）仅挑选前1个挑选符后边的第1个元素比起来，弟兄挑选符更宽泛。它会挑选，大家上面事例中更在ul后边的任何p元素。

查询事例

适配性

•IE7+
•Firefox
•Chrome
•Safari
•Opera

10. X[title]


拷贝编码
编码以下:

a[title] {
color: green;
}


被称为特性挑选器，在大家上面的事例里，这只会挑选有title特性的锚标识。沒有此特性的锚标识将不会受到影象。但假如你必须更多的特点如何办呢？呵呵……

查询事例

适配性

•IE7+
•Firefox
•Chrome
•Safari
•Opera

11. X[href=foo]


拷贝编码
编码以下:

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


上面的编码段将给全部href特性为http://net.tutsplus.com的锚标识加上款式；她们可能显示信息为大家的品牌翠绿色。全部别的的锚标识将不会受到危害。

留意大家将href值用引号包裹。记牢，当应用javascript的css挑选符模块时也这么做。假如将会的话，尽量应用css3挑选符替代非官方的方式。

这工作中的很好，但有点不足灵便。假如连接的确立即联接到Nettus+还好，可是，或许相对路径是到nettust的相对性相对路径呢？在这类状况下，大家可使用1点正则表达式表述式英语的语法。

查询事例

适配性

•IE7+
•Firefox
•Chrome
•Safari
•Opera

12. X[href*=nettuts]


拷贝编码
编码以下:

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


来了并不是~这便是大家必须的编码。*号特定了包括该特性的值务必包括界定的值。便是说，这句编码包括了href值为 nettuts.com，net.tutsplus.com或tutsplus.com。

记牢这个叙述过度宽泛，假如是某个锚点标识连接到某个联接中带有tuts非Envato的网站（tutsplus属于Envato旗下网站）呢？因而你必须更多特点来限定，各自应用^和&来限制标识符串的刚开始和完毕。

查询事例

适配性

•IE7+
•Firefox
•Chrome
•Safari
•Opera

13. X[href^=http]


拷贝编码
编码以下:

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


有木有想过一些网站是怎样界定1个标志的连接的？我明确你毫无疑问看到过。这些连接很非常容易让你自动跳转到另外一个网站。

应用^(carat)符灰常简易啦。这个标记经常在正则表达式表述式中表明标识符串的刚开始。假如大家想指向全部以”http”开始的”href”特性的锚点的话，大家便可以应用相近于上面的那段编码啦。

留意啦，大家不必须检索”http://”,彻底没必要，由于大家还要包括以https://开始的连接呢。

假如大家想为全部连接到照片的连接界定款式咋办？这类状况下，大家得检索标识符串的完毕了并不是。

查询事例

适配性

•IE7+
•Firefox
•Chrome
•Safari
•Opera

14. X[href$=.jpg]


拷贝编码
编码以下:

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


又来了，大家還是应用正则表达式表述式标记，$(dolor)，来做为标识符串的完毕标识。这类状况下，大家就会检索全部url以.jpg为末尾的锚点啦。记牢记牢这类状况下gif和png文件格式的照片不容易被挑选哦。

查询事例

适配性

•IE7+
•Firefox
•Chrome
•Safari
•Opera

15. X[data-*=foo]


拷贝编码
编码以下:

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


回望近期1条，大家怎样能包括各种各样照片种类:png,jpeg,jpg,gif?很非常容易想起，大家能根据好几个挑选器来并不是，像这样：


拷贝编码
编码以下:

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


但是，这样很蛋疼，高效率极低。另外一个处理方法是应用自定特性。假如大家加了1种自身的 data-filetype 特性给每个连接到照片的锚点的话呢？


拷贝编码
编码以下:

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


这样关系后，大家就可以应用规范的特性挑选器来特定这些连接啦。看下面：


拷贝编码
编码以下:

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


查询事例

适配性

•IE7+
•Firefox
•Chrome
•Safari
•Opera

16. X[foo~=bar]


拷贝编码
编码以下:

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


这儿有个不为人知的独特技能，肯定让你印象時刻。~(tilda)符，它能够协助大家指向那些以空格分隔好几个值的特性的元素（真拗口，这汉语翻译我自身都看不懂，水平难题）

以大家第15条的自定特性为例，上面的编码中大家建立了 data-info特性，这个特性能够界定以空格隔开的好几个值。这样，这个连接自身便是个icon，而且指向的也是1个照片连接，像下面这样。


拷贝编码
编码以下:

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


有了这样适度的标识，根据应用 ~ 特性挑选器的技能，大家便可以指向任何具备着两种特性的任何1种啦。


拷贝编码
编码以下:

/* 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+
•Firefox
•Chrome
•Safari
•Opera

17. X:checked


拷贝编码
编码以下:

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


这类伪类只会配对早已被选定的单选元素。便是这么简易。

查询事例

适配性

•E9+
•Firefox
•Chrome
•Safari
•Opera

18. X:after

before 和 after 伪元素也很蛋疼。貌似人们每日都能寻找或创造发明1些新方法来合理地应用它们。它们很非常容易操纵挑选器周边的內容。

许多第1次应用是由于她们必须对clear-fix开展改善。


拷贝编码
编码以下:

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


这个改善应用了:after伪类元向来在元素后提升1个室内空间，随后消除它。这个牛X的技能你应当个人收藏到专用工具包里，非常是当overflow:hidden方式束手无策的情况下。

想看看别的造就性的用法：浏览我滴建立黑影的小技巧

根据Css3挑选器的规范表明书，你应当有技能地应用这些伪类英语的语法——双冒号::。但是以便适配，访问器会接纳1个双引号。

适配性

•IE8+
•Firefox
•Chrome
•Safari
•Opera

19. X:hover


拷贝编码
编码以下:

div:hover {
background: #e3e3e3;
}


我去，这个你务必懂。典型的官方方式的客户开启伪类。听起来会有点蒙蔽，但是具体上并不是这般。想在客户在某个元素上面悬停时界定个非常的款式？这个特性便是做这个的。

记牢啦，较old版本号的IE，只能在锚点标识后应用这个hover。

这个挑选器你用得数最多的状况，估算将会便是在锚点的悬停时加个border-bottom啦。


拷贝编码
编码以下:

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


小贴士： border-bottom:1px solid black;比 text-decoration:underline;漂亮1点哦。（真的？我去）

适配性

•IE6+ (In IE6, :hover must be applied to an anchor element)
•Firefox
•Chrome
•Safari
•Opera

20. X:not(selector)


拷贝编码
编码以下:

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


not伪类灰常有效。比如我要挑选全部的div，除有id为container的。上面那个编码片断就可以完善的完成。

假如我想挑选除p之外的全部元素，我能够这么做：


拷贝编码
编码以下:

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


查询事例

适配性

•IE9+
•Firefox
•Chrome
•Safari
•Opera

21. X::pseudoElement


拷贝编码
编码以下:

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


大家可使用伪元素（以::为表明）来界定元素的款式。比如第1行，第1个标识符，记牢啦，这类方式只能运用于同级元素才合理。

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

特定p的第1个标识符的款式


拷贝编码
编码以下:

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


这段编码会寻找全部段落，随后再从中界定这些段落的第1个标识符。

这经常应用在仿报纸的文章内容首字母款式。

特定p的首行款式


拷贝编码
编码以下:

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


一样，这个::first-line伪元素会像大家期待的那样，只界定段落的第1行的款式。

查询事例

适配性

•IE6+
•Firefox
•Chrome
•Safari
•Opera

22. X:nth-child(n)


拷贝编码
编码以下:

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


想一想那些无法从元素堆选中择元素的生活。nth-child伪类处理了这个难题。

请留意 nth-child接受整数金额和自变量，但是并不是从0刚开始的，假如你想选定第2个li，应用 li:nth-child(2).

大家乃至应用这个方法来挑选随意的子元素。比如，大家能够用 li:nth-child(4n)来进行4为倍数的全部元素的挑选。

查询事例

适配性

•IE9+
•Firefox 3.5+
•Chrome
•Safari

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


拷贝编码
编码以下:

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


假如我有灰常多的li在ul里边，我只要想最终3个li如何办？无须应用li:nth-child(397),你可使用nth-last-child伪类。

这类技能和第6条基本上1样合理，但是二者的不一样的地方在于它从完毕刚开始搜集，用回溯的方法开展。

查询事例

适配性

•IE9+
•Firefox 3.5+
•Chrome
•Safari
•Opera

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


拷贝编码
编码以下:

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


你应当有许多情况下要想元素种类来挑选元素而并不是根据孩子。

想像1下标识5个无编码序列表（UL）。假如你想界定第3个ul，而且沒有1个唯1的id来寻找它，你便可以应用 nth-of-type(3)伪类了。在上面这个编码段中，仅有第3个ul才会有黑色的边框。

查询事例

适配性

•IE9+
•Firefox 3.5+
•Chrome
•Safari

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


拷贝编码
编码以下:

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


没错，大家1样可使用nth-last-of-type来从完毕刚开始回溯这个挑选器，来寻找大家要想的元素

适配性

•IE9+
•Firefox 3.5+
•Chrome
•Safari
•Opera

26. X:first-child


拷贝编码
编码以下:

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


这个构造的伪类让大家能够挑选某个元素的第1个子孩子。你一般可使用这个方法来删掉第1个或最终1个元素的边框。

比如，你有1系列的rows，每个都有border-top 和border-bottom。这类状况下，第1行和最终1行看起来会灰常怪。

许多设计方案师会应用first和last类来填补这个缺点。相反，你可使用这些伪类来处理这些难题。

查询事例

适配性

•IE7+
•Firefox
•Chrome
•Safari
•Opera

27. X:last-child


拷贝编码
编码以下:

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


与first-child相反，last-child会挑选父连接点的最终1个子连接点。

事例：

大家创建1些事例来示范性这些类的将会的用法。大家会创建1种设计风格来展现。

标识


拷贝编码
编码以下:

<ul>
<li> List Item </li>
<li> List Item </li>
<li> List Item </li>
</ul>


没啥非常的，便是1个简易的编码序列。

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




这个款式会设定1个情况，删掉访问器默认设置的ul的padding值，并界定边框给每个li来出示1点深层。

如上图所示，唯1的难题是最上面的边框和最下面的边框看起来有点儿怪。让大家来应用:first-child和:last-child来处理这个难题。


拷贝编码
编码以下:

li:first-child {
border-top: none;
}
li:last-child {
border-bottom: none;
}




看上图，处理了并不是。

查询事例

适配性

•IE9+
•Firefox
•Chrome
•Safari
•Opera
是滴，IE8适用 first-child 但是不适用last-child。

28. X:only-child


拷贝编码
编码以下:

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


说实话说，你极可能会发现你不容易常常应用 only-child伪类。虽然这般，它的确有效，你应当必须它。

它能够协助你挑选是父连接点的独生子（没其他孩子啦）的元素。比如，应用上面的编码，仅有是div的唯1子孩子的p段落才会界定其色调为red。

让大家来假设下面的标识。


拷贝编码
编码以下:

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


这样，第2个div的p标识的內容不容易被选定。仅有第1个div的p才会被选定。

查询事例

适配性

•IE9+
•Firefox
•Chrome
•Safari
•Opera

29. X:only-of-type


拷贝编码
编码以下:

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


这类构造的伪类有几种灰常聪慧的用法。它能够选定在其父连接点内沒有弟兄连接点的元素。比如，大家能够挑选仅有1个li做为其子孩子的ul。

最先，取决于你想如何进行这1总体目标。你可使用 ul li，但是，这回挑选全部li元素。唯1的方法是应用only-of-type。


拷贝编码
编码以下:

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


查询事例

适配性

•IE9+
•Firefox 3.5+
•Chrome
•Safari
•Opera

30. X:first-of-type

first-of-type 伪类可让你挑选该种类的第1个弟兄连接点。

1个检测

以便更好自然地理解它，让大家来检测1下啊。复制下面的标识到你的编写器。


拷贝编码
编码以下:

<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

有许多方法能搞定这个检测。大家回望在其中1小一部分。以应用first-of-type刚开始。


拷贝编码
编码以下:

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


这个编码段实质上表明，“寻找第1个无编码序列表，随后寻找这里边的li，随后，再次应用过虑器直至寻找第2个li。

处理方法2

另外一个可行的方法是紧邻挑选器。


拷贝编码
编码以下:

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


在这个计划方案中，大家寻找p的邻近连接点ul，随后寻找ul的li的最终1个孩子。

处理方法3

大家能够无拘无束滴挑选这些挑选器。

ul:first-of-type li:nth-last-child(1) {
font-weight: bold;
}这次，大家取到第1个ul，随后寻找第1个元素，但是是从最终1个刚开始数。哈哈。

查询事例

适配性

•IE9+
•Firefox 3.5+
•Chrome
•Safari
•Opera

结果
假如你仍在为处理old访问器的缺点而纠结，如IE6。在应用这些新的挑选器层面，你依然必须十分当心。但是，别由于这个阻拦了你对这些新玩意的学习培训。别凌虐自身。保证关心这里的适配性目录。应1层面，你可使用 Dean Edward’s excellent IE9.js script 来为旧访问器出示新的挑选器适用。（我去。cool）

其次，当应用javascript库时，如时兴的jQuery，最好是尽量应用这些css3自身的挑选器而并不是应用库的自定方式/挑选器。这能让你的编码更快哦，由于这些挑选器模块自身就可以被访问器分析，而并不是用这些库挑选器。

谢谢阅读文章，期待你能学到1两个技能。

译者注

本文问汉语翻译文章内容，原文为“The 30 CSS Selectors you Must Memorize”

为您推荐