Analyse der am häufigsten verwendeten CSS-Selektoren

Möglicherweise beherrschen Sie die grundlegenden CSS-Selektoren wie ID, Klasse und Hintergrundselektor. Aber das ist noch lange nicht alles, was CSS ausmacht. Im Folgenden finden Sie eine systematische Analyse der 30 am häufigsten verwendeten Selektoren in CSS, einschließlich unseres problematischsten Browserkompatibilitätsproblems. Nur wenn Sie diese beherrschen, können Sie die große Flexibilität von CSS wirklich schätzen.

1. *

* { margin: 0; padding: 0;🎜>

Der Sternselektor funktioniert für jedes Element auf der Seite. Webdesigner verwenden es häufig, um den Rand und den Abstand aller Elemente auf der Seite auf 0 zu setzen. Der *-Selektor kann auch in untergeordneten Selektoren verwendet werden.

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

Der obige Code wird auf alle untergeordneten Elemente mit der ID des Containerelements angewendet. Sofern nicht unbedingt erforderlich, empfehle ich nicht, den Sternselektor auf der Seite zu verwenden, da sein Umfang zu groß ist und Browserressourcen verbraucht. Kompatible Browser: IE6, Firefox, Chrome, Safari, Opera

2. Elemente mit entsprechenden IDs im Hash-Bereich. id ist einer unserer am häufigsten verwendeten CSS-Selektoren. Die Vorteile des ID-Selektors sind Präzision und hohe Priorität (die Prioritätsbasis beträgt 100, was viel höher ist als die 10 der Klasse). Als beste Wahl für Javascript-Skript-Hooks liegen auch die Nachteile auf der Hand: Die Priorität ist zu hoch und Die Wiederverwendbarkeit ist schlecht. Bevor wir den ID-Selektor verwenden, sollten wir uns fragen, ob wir wirklich an dem Punkt angelangt sind, an dem wir den ID-Selektor nicht mehr verwenden müssen. Kompatible Browser: IE6, Firefox, Chrome, Safari, Opera

3. .X

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

Dies ist ein Klassenselektor. Der Unterschied zwischen dem Klassenselektor und dem ID-Selektor besteht darin, dass der Klassenselektor auf eine Gruppe von Elementen einwirken kann, die gestylt werden sollen. Kompatible Browser: IE6, Firefox, Chrome, Safari, Opera

4. Dies ist auch unser am häufigsten verwendeter Selektor – der Nachkommenselektor. Wird verwendet, um das Unterelement Y unter dem Element auszuwählen. Alle a in li sind unterstrichen, aber es gibt ein ul in li. Ich möchte nicht, dass das a in li unterstrichen wird. Überlegen Sie bei der Verwendung dieses Nachkommenselektors, ob ein Stil auf alle Nachkommenelemente angewendet werden soll. Eine weitere Funktion dieses Nachkommenselektors besteht darin, eine Namespace-ähnliche Funktion zu erstellen. Beispielsweise ist der Umfang des obigen Codestils offensichtlich li. Kompatible Browser: IE6, Firefox, Chrome, Safari, Opera

.error { color: red; }

X

Tag-Selektor. Verwenden Sie einen Tag-Selektor, um alle entsprechenden Tags innerhalb eines Bereichs zu bearbeiten. Die Priorität ist knapp höher als *. Kompatible Browser: IE6, Firefox, Chrome, Safari, Opera

li a { text-decoration: none; }

6. Die Pseudoklasse :hover funktioniert bei angeklickten Links. Kompatible Browser: IE7, Firefox, Chrome, Safari, Opera

7 benachbarte Selektoren, der obige Code stimmt mit dem ersten p nach ul überein und legt die Textfarbe innerhalb der fest Absatz auf Rot. (Entspricht nur dem ersten Element) Kompatible Browser: IE7, Firefox, Chrome, Safari, Opera

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

X>Y

Unterauswahl. Im Gegensatz zum Nachkommenselektor X Y funktioniert der Kinderselektor nur für die direkten Kinder Y unter X. In den obigen CSS- und HTML-Beispielen funktioniert div#container>ul nur mit der aktuellsten UL im Container. Theoretisch ist X > Y ein befürwortungswürdiger Selektor, aber leider wird er von IE6 nicht unterstützt. Kompatible Browser: IE7, Firefox, Chrome, Safari, Opera

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

9 Der Unterschied zwischen X und Y besteht darin, dass X~Y alle Y-Elemente auf derselben Ebene wie X abgleicht , während X Y nur mit dem ersten übereinstimmt. Kompatible Browser: IE7, Firefox, Chrome, Safari, Opera

ul + p { color: red; }

10 X[title]

Attributauswahl. Der obige Code gleicht beispielsweise Linkelemente mit Titelattributen ab.

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>

Kompatible Browser: IE7, Firefox, Chrome, Safari, Opera

11. X[title=“foo“]

Attributauswahl. Der obige Code stimmt mit allen Links überein, die das href-Attribut haben und der href ist http://www.xuanfengge.com.

Diese Funktion ist sehr gut, aber etwas eingeschränkt. Was ist, wenn wir alle Links abgleichen möchten, deren href css9.net enthält? Schauen Sie sich den nächsten Selektor an. Kompatible Browser: IE7, Firefox, Chrome, Safari, Opera

ul ~ p {color: red;}

12. Wie wir wollen, gleicht der obige Code alle Links ab, die „xuanfengge.com“ im href enthalten.

Kompatible Browser: IE7, Firefox, Chrome, Safari, Opera

a[title] {color: green;}

13. Eine andere Lösung besteht darin, allen Bildlinks ein bestimmtes Attribut hinzuzufügen, z. B. „Datendatei“

HTML-Code

, sodass die Schriftfarbe aller Links zu Bildern rot ist.

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

Kompatible Browser: IE7, Firefox, Chrome, Safari, Opera

15. X[foo~=“bar“]

Attributauswahl. Das Tilde-Symbol im Attributselektor ermöglicht es uns, einen von mehreren durch Leerzeichen getrennten Werten im Attributwert abzugleichen. Schauen Sie sich das folgende Beispiel an:

HTML-Code

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

CSS-Code

Passen Sie im obigen Beispiel die Schriftart an, die den „externen“ Link enthält Das Dateninfo-Attribut Die Farbe ist rot. Passen Sie Links an, die „image“ im Attribut „data-info“ enthalten, um einen schwarzen Rand festzulegen.

兼容浏览器：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选择器，因为类库的选择器引擎会通过浏览器内置解析它们，这样会获得更快的速度