Une brève introduction au résumé d'utilisation de 30 sélecteurs CSS3

Les sélecteurs que nous connaissons mieux sont : les sélecteurs #id .class et tag. Mais cela ne suffit pas. Afin de faciliter le développement, cet article résume 30 sélecteurs CSS3, dans l'espoir d'être utile à tout le monde.

1* : Sélecteur universel

* {   margin:0;   padding:0;  }

* Le sélecteur sélectionne tous les éléments de la page. La fonction du code ci-dessus est de combiner la marge et le remplissage de. tous les éléments. Définissez sur 0, le moyen le plus simple d'effacer le style par défaut du navigateur. Le sélecteur

* peut également être appliqué aux sélecteurs enfants, comme le code suivant :

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

De cette façon, tous les éléments enfants sont marqués avec le conteneur ID Tous sont sélectionnés et la bordure est définie.

2 #id : le sélecteur d'identifiant

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

le sélecteur d'identifiant est très strict et vous ne pouvez pas le dupliquer Utilisez-le . Il faut quand même être très prudent lors de son utilisation. Vous devez vous demander : dois-je attribuer un identifiant à cet élément pour le localiser ?

3.class : sélecteur de classe

.error {
  color: red;
}

Ceci est un sélecteur de classe. Il est différent du sélecteur d'identifiant dans la mesure où il peut cibler plusieurs éléments. Vous pouvez utiliser la classe lorsque vous souhaitez styliser plusieurs éléments. Lorsque vous souhaitez modifier un élément spécifique, utilisez l'identifiant pour le localiser.

4 sélecteur1 sélecteur2 : sélecteur descendant

li a {
  text-decoration: none;
}

Le sélecteur descendant est un sélecteur plus couramment utilisé. Vous pouvez l'utiliser si vous souhaitez être plus précis sur la localisation des éléments. Par exemple, que se passe-t-il si vous n'avez pas besoin de localiser tous les éléments a, mais uniquement la balise a sous la balise li ? À ce stade, vous devez utiliser des sélecteurs descendants.

Astuce : Si votre sélecteur ressemble à X Y Z A B.error, alors vous vous trompez. Rappelez-vous toujours si vous avez vraiment besoin de modifier autant d’éléments.

5 tagName : sélecteur de balises

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

Si vous souhaitez cibler toutes les balises de la page, pas par identifiant Ou 'class', qui est simple et utilise directement le sélecteur de type.

6 sélecteur : sélecteur de lien : sélecteur visité : sélecteur de survol : sélecteur de pseudo-classe actif

Généralement, le sélecteur est une balise et les quatre pseudo-classes ci-dessus sélections La signification de l'appareil est la suivante :

lien : L'état normal de la connexion.

visité : Une fois la connexion visitée.

survol : Lorsque la souris est posée sur la connexion.

actif : Lorsque la connexion est enfoncée.

Lorsque le lien d'une balise n'est pas déplacé : lien

Lorsque le lien d'une balise est déplacé : lien, survolez

Lorsque l'on clique sur le lien d'une balise : lien, survolez , actif

Lorsque vous cliquez et ne vous déplacez pas vers la connexion d'une étiquette : lien, visité

Lorsque vous cliquez et passez à la connexion d'une étiquette : lien, visité, survolez

Après cliquer et cliquer à nouveau sur l'étiquette pour vous connecter : lien, visité, survol, actif

C'est le style de toutes les combinaisons.

S'il y a plusieurs styles identiques, les styles ultérieurs écraseront les styles précédents, donc la définition de ces quatre pseudo-classes a des exigences d'ordre, et c'est aussi pour cette raison que tout le monde appelle 'lvha' .

7 sélecteur1 + sélecteur2 : Sélecteur adjacent

ul + p {
   color: red;
}

Il sélectionnera uniquement les éléments successeurs immédiats de l'élément spécifié. L'exemple ci-dessus sélectionne le premier paragraphe après toutes les balises ul et définit leur couleur sur rouge.

8 sélecteur1 > sélecteur2 : sous-sélecteur

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

La différence entre cela et c'est que la commande derrière il le sélectionne directement comme élément enfant. Regardez l'exemple ci-dessous

<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 sélectionnera uniquement tous les éléments ul directs sous p avec l'identifiant 'container'. Il ne localisera pas l'élément ul sous le premier li. Pour certaines raisons, la combinaison de sélecteurs avec des nœuds enfants présente un certain nombre d'avantages en termes de performances. En fait, cela est fortement recommandé lors de l'utilisation de sélecteurs CSS en JavaScript.

9 sélecteur1 ~ sélecteur2 : sélecteurs frères et sœurs

ul ~ p {
  color: red;
}

Les sélecteurs de combinaison de nœuds frères et sœurs sont très similaires aux sélecteurs adjacents, puis ce n'est pas si strict. Le sélecteur ul + p sélectionnera uniquement les éléments qui suivent immédiatement l'élément spécifié. Ce sélecteur sélectionnera tous les éléments correspondants suivant l'élément cible.

10 sélecteur[titre] : Sélecteur d'attribut

a[title] {
  color: green;
}

Dans l'exemple ci-dessus, seul le titre sera l'élément d'attribut sélectionné . Les balises d'ancrage qui n'ont pas cet attribut ne seront pas modifiées par ce code.

11 sélecteur[href="foo"] : Sélecteur d'attribut

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

Le code ci-dessus sera la balise d'ancrage dont La valeur de l'attribut href est http://strongme.cn et est définie sur vert, tandis que les autres balises ne sont pas affectées.

Remarque : Nous avons placé la valeur entre guillemets doubles. Utilisez ensuite des guillemets doubles lorsque vous utilisez Javascript. Si possible, utilisez les sélecteurs CSS3 standard.

12 sélecteur[href*=”strongme”] : Sélecteur d'attribut

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中关于选择器的使用总结