Eine kurze Einführung in die Verwendungszusammenfassung von 30 CSS3-Selektoren

Die Selektoren, mit denen wir besser vertraut sind, sind: #id .class- und Tag-Selektoren. Dies reicht jedoch nicht aus, um die Entwicklung komfortabler zu gestalten. In diesem Artikel werden 30 CSS3-Selektoren zusammengefasst, in der Hoffnung, für alle hilfreich zu sein.

1 *: Universeller Selektor

* {   margin:0;   padding:0;  }

* Der Selektor wählt alle Elemente auf der Seite aus. Die Funktion des obigen Codes besteht darin, den Rand und den Abstand von zu kombinieren Alle Elemente auf 0 setzen, die einfachste Möglichkeit, den Standardstil des Browsers zu löschen. Der

*-Selektor kann auch auf untergeordnete Selektoren angewendet werden, wie zum Beispiel der folgende Code:

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

Auf diese Weise werden alle untergeordneten Elemente mit markiert Im ID-Container werden alle ausgewählt und der Rahmen festgelegt.

2 #id: ID-Selektor

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

ID-Selektor ist sehr streng und Sie können ihn nicht duplizieren. Verwenden Sie ihn . Dennoch muss man bei der Verwendung sehr vorsichtig sein. Sie müssen sich fragen: Muss ich diesem Element eine ID zuweisen, um es zu finden?

3.Klasse: Klassenauswahl

.error {
  color: red;
}

Dies ist eine Klassenauswahl. Er unterscheidet sich vom ID-Selektor dadurch, dass er auf mehrere Elemente abzielen kann. Sie können die Klasse verwenden, wenn Sie mehrere Elemente formatieren möchten. Wenn Sie ein bestimmtes Element ändern möchten, verwenden Sie die ID, um es zu finden.

4 Selektor1 Selektor2: Nachkommenselektor

li a {
  text-decoration: none;
}

Der Nachkommenselektor ist ein häufiger verwendeter Selektor. Sie können dies verwenden, wenn Sie die Lokalisierung von Elementen genauer bestimmen möchten. Was ist beispielsweise, wenn Sie nicht alle a-Elemente suchen müssen, sondern nur das a-Tag unter dem li-Tag? Zu diesem Zeitpunkt müssen Sie Nachkommenselektoren verwenden.

Tipp: Wenn Ihr Selektor wie „X Y Z A B.error“ aussieht, dann liegen Sie falsch. Denken Sie immer daran, ob Sie wirklich so viele Elemente ändern müssen.

5 tagName: Tag-Selektor

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

Wenn Sie alle Tags auf der Seite gezielt ansprechen möchten, nicht nach ID Oder 'Klasse', die einfach ist und den Typselektor direkt verwendet.

6 selector:link selector:visited selector:hover selector:active Pseudoklassenselektor

Im Allgemeinen ist der Selektor ein Tag und die oben genannten vier Pseudoklassen Auswahlmöglichkeiten Die Bedeutung des Geräts ist wie folgt:

Link: Der normale Zustand der Verbindung.

besucht: Nachdem die Verbindung besucht wurde.

Hover: Wenn die Maus auf der Verbindung platziert wird.

aktiv: Wenn die Verbindung gedrückt wird.

Wenn der A-Tag-Link nicht verschoben wird: Link

Wenn der A-Tag-Link verschoben wird: Link, bewegen Sie den Mauszeiger

Wenn der A-Tag-Link angeklickt wird: Link, bewegen Sie den Mauszeiger , aktiv

Beim Anklicken und nicht Bewegen zu der A-Label-Verbindung: Link, besucht

Beim Anklicken und Bewegen zur A-Label-Verbindung: Link, besucht, Hover

Nachher Klicken und erneut auf die Beschriftung klicken, um eine Verbindung herzustellen: Link, besucht, schweben, aktiv

Dies ist der Stil aller Kombinationen.

Wenn es mehrere gleiche Stile gibt, überschreiben die späteren Stile die vorherigen Stile, sodass die Definition dieser vier Pseudoklassen Reihenfolgeanforderungen hat und aus diesem Grund auch jeder „lvha“ nennt.

7 Selektor1 + Selektor2: Benachbarter Selektor

ul + p {
   color: red;
}

Es werden nur die unmittelbaren Nachfolgerelemente des angegebenen Elements ausgewählt. Das obige Beispiel wählt den ersten Absatz nach allen ul-Tags aus und setzt deren Farbe auf Rot.

8 Selektor1 > Selektor2: Unterselektor

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

Der Unterschied zwischen it und it besteht darin, dass der Befehl dahinter steht Es wählt das direkt untergeordnete Element aus. Schauen Sie sich das Beispiel unten an

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

#container > ul wählt nur alle direkten ul-Elemente unter p mit der ID „Container“ aus. Das ul-Element wird nicht unter dem ersten li gefunden. Aus bestimmten Gründen bietet die Kombination von Selektoren mit untergeordneten Knoten eine Reihe von Leistungsvorteilen. Tatsächlich wird dies bei der Verwendung von CSS-Selektoren in JavaScript dringend empfohlen.

9 Selektor1 ~ Selektor2: Geschwisterselektoren

ul ~ p {
  color: red;
}

Geschwisterknoten-Kombinationsselektoren sind benachbarten Selektoren sehr ähnlich es ist nicht so streng. Der ul + p-Selektor wählt nur die Elemente aus, die unmittelbar auf das angegebene Element folgen. Dieser Selektor wählt alle passenden Elemente aus, die dem Zielelement folgen.

10 Selektor[Titel]: Attributselektor

a[title] {
  color: green;
}

Im obigen Beispiel wird nur der Titel als Attributelement ausgewählt . Ankertags, die dieses Attribut nicht haben, werden von diesem Code nicht geändert.

11 selector[href="foo"] : Attributselektor

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

Der obige Code wird das Anker-Tag, dessen Der Wert des href-Attributs lautet http://strongme.cn und ist auf Grün gesetzt, während andere Tags nicht betroffen sind.

Hinweis: Wir haben den Wert in doppelte Anführungszeichen gesetzt. Verwenden Sie dann doppelte Anführungszeichen, wenn Sie Javascript verwenden. Verwenden Sie nach Möglichkeit Standard-CSS3-Selektoren.

12 Selektor[href*=“strongme“]: Attributselektor

a[href*="strongme"] {
  color: #1f6053;
}

指定了strongme这个值必须出现在锚点标签的href属性中，不管是strongme.cn还是strongme.com还是www.strongme.cn都可以被选中。  

但是记得这是个很宽泛的表达方式。如果锚点标签指向的不是strongme相关的站点，如果要更加具体的限制的话，那就使用^和$，分别表示字符串的开始和结束。

13 selector[href^=”href”]  : 属性选择器

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

大家肯定好奇过，有些站点的锚点标签旁边会有一个外链图标，我也相信大家肯定见过这种情况。这样的设计会很明确的告诉你会跳转到别的网站。  

用克拉符号就可以轻易做到。它通常使用在正则表达式中标识开头。如果我们想定位锚点属性href中以http开头的标签，那我们就可以用与上面相似的代码。  

注意我们没有搜索http://，那是没必要的，因为它都不包含https://。

14 selector[href$=”.jpg”]  : 属性选择器

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

这次我们又使用了正则表达式$，表示字符串的结尾处。这段代码的意思就是去搜索所有的图片链接，或者其它链接是以.jpg结尾的。但是记住这种写法是不会对gifs和pngs起作用的。

15 selector[data-*=”foo”] : 属性选择器

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

回到上一条，我们如何把所有的图片类型都选中呢png,jpeg,’jpg’,’gif’？我们可以使用多选择器。看下面：

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

但是这样写着很蛋疼啊，而且效率会很低。另外一个办法就是使用自定义属性。我们可以给每个锚点加个属性data-filetype指定这个链接指向的图片类型。

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

16 selector[foo~=”bar”] : 属性选择器

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

这个我想会让你的小伙伴惊呼妙极了。很少有人知道这个技巧。这个~符号可以定位那些某属性值是空格分隔多值的标签。  

继续使用第15条那个例子，我们可以设置一个data-info属性，它可以用来设置任何我们需要的空格分隔的值。这个例子我们将指示它们为外部连接和图片链接。

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

给这些元素设置了这个标志之后，我们就可以使用~来定位这些标签了。

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

17 selector:checked ： 伪类选择器

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

上面这个伪类写法可以定位那些被选中的单选框和多选框，就是这么简单。

18 selector:after ： 伪类选择器  

before和after这俩伪类。好像每天大家都能找到使用它们的创造性方法。它们会在被选中的标签周围生成一些内容。  

当使用.clear-fix技巧时许多属性都是第一次被使用到里面的。

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

上面这段代码会在目标标签后面补上一段空白，然后将它清除。这个方法你一定得放你的聚宝盆里面。特别是当overflow:hidden方法不顶用的时候，这招就特别管用了。  

根据CSS3标准规定，可以使用两个冒号::。然后为了兼容性，浏览器也会接受一个冒号的写法。其实在这个情况下，用一个冒号还是比较明智的。

19 selector:hover  ： 伪类选择器

p:hover {
  background: #e3e3e3;
}

不用说，大家肯定知道它。官方的说法是user action pseudo class.听起来有点儿迷糊，其实还好。如果想在用户鼠标飘过的地方涂点儿彩，那这个伪类写法可以办到。  

注意：旧版本的IE只会对加在锚点a标签上的:hover伪类起作用。  

通常大家在鼠标飘过锚点链接时候加下边框的时候用到它。

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

专家提示：border-bottom:1px solid black;比text-decoration:underline;要好看很多。

20 selector1:not(selector2) ： 伪类选择器

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

取反伪类是相当有用的，假设我们要把除id为container之外的所有p标签都选中。那上面那么代码就可以做到。  

或者说我想选中所有出段落标签之外的所有标签

:not(p) {
  color: green;
}

21 selector::pseudoElement ： 伪类选择器

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

上面这段代码会找到页面上所有段落，并且指定为每一段的第一个字。

它通常在一些新闻报刊内容的重点突出会使用到。

定位某段的第一行

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

跟::first-line相似，会选中段落的第一行  

为了兼容性，之前旧版浏览器也会兼容单冒号的写法，例如:first-line,:first-letter,:before,:after.但是这个兼容对新介绍的特性不起作用。

22 selector:nth-child(n) ： 伪类选择器

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

还记得我们面对如何取到堆叠式标签的第几个元素时无处下手的时光么，有了nth-child那日子就一去不复返了。  

请注意nth-child接受一个整形参数，然后它不是从0开始的。如果你想获取第二个元素那么你传的值就是li:nth-child(2).  

我们甚至可以获取到由变量名定义的个数个子标签。例如我们可以用li:nth-child(4n)去每隔3个元素获取一次标签。

23 selector:nth-last-child(n) ： 伪类选择器

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

假设你在一个ul标签中有N多的元素，而你只想获取最后三个元素，甚至是这样li:nth-child(397)，你可以用nth-last-child伪类去代替它。

24 selectorX:nth-of-type(n) ： 伪类选择器

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

曾几何时，我们不想去选择子节点，而是想根据元素的类型来进行选择。  

想象一下有5个ul标签。如果你只想对其中的第三个进行修饰，而且你也不想使用id属性，那你就可以使用nth-of-type(n)伪类来实现了，上面的那个代码，只有第三个ul标签会被设置边框。

25 selector:nth-last-of-type(n) ： 伪类选择器  

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

同样，也可以类似的使用nth-last-of-type来倒序的获取标签。

26 selector:first-child ： 伪类选择器

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

这个结构性的伪类可以选择到第一个子标签，你会经常使用它来取出第一个和最后一个的边框。  

假设有个列表，每个标签都有上下边框，那么效果就是第一个和最后一个就会看起来有点奇怪。这时候就可以使用这个伪类来处理这种情况了。

27 selector:last-child ： 伪类选择器

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

跟first-child相反，last-child取的是父标签的最后一个标签。  

例如  

标签

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

这里没啥内容，就是一个了 List。

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

上面的代码将设置背景色，移除浏览器默认的内边距，为每个li设置边框以凸显一定的深度。

28 selector:only-child ： 伪类选择器

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

说实话，你会发现你几乎都不会用到这个伪类。然而，它是相当有用的，说不准哪天你就会用到它。  

它允许你获取到那些只有一个子标签的父标签下的那个子标签。就像上面那段代码，只有一个段落标签的p才被着色。

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

上面例子中，第二个p不会被选中。一旦第一个p有了多个子段落，那这个就不再起作用了。

29 selector:only-of-type： 伪类选择器

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

结构性伪类可以用的很聪明。它会定位某标签下相同子标签的只有一个的目标。设想你想获取到只有一个子标签的ul标签下的li标签呢？  

使用ul li会选中所有li标签。这时候就要使用only-of-type了。

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

最后记住：使用像jQuery等工具的时候，尽量使用原生的CSS3选择器。可能会让你的代码跑的很快。这样选择器引擎就可以使用浏览器原生解析器，而不是选择器自己的。

相关推荐：

详解CSS选择器 Selector

如何用CSS3属性选择器替代JS的作用

css中关于选择器的使用总结