Sélecteurs CSS

Sélecteurs CSS

[Sélecteurs Wildcard]

* Le sélecteur étoile correspondra à chaque élément de la page, mais je vous recommande de ne jamais l'utiliser dans le code de production. Cela impose une charge inutile au navigateur.

*{

margin:0;

padding:0;

}

[Sélecteur de balise] (également appelé sélecteur de type ) : Autrement dit, utilisez le nom de la balise html comme sélecteur

demo : ul {}

[id selector] : les sélecteurs d'ID doivent être utilisés avec prudence.

Personnalisez le nom de l'identifiant pour la balise de style requise. Ensuite, écrivez #custom id name{CSS style} dans le fichier CSS. Remarque : chaque nom d'identifiant doit être différent.

# IDname {width. : 960px; margin: auto; }

Le sélecteur d'identifiant est unique et la réutilisation n'est pas autorisée. Si possible, essayez d'abord d'utiliser un nom de balise, un nouvel élément HTML5 ou même une pseudo-classe.

[Class Selector] (class)

Personnalisez le nom de la classe, comment l'utiliser : écrivez .class name {css style}.

.className dans le fichier css {border-color: blue; font-size:16px;>

Remarque : une étiquette peut utiliser plusieurs noms de classe, et un nom de classe peut être utilisé par plusieurs étiquettes.

La différence entre l'identifiant et la classe

sélecteur d'identifiant, un nom d'identifiant ne peut être utilisé qu'une seule fois et ne peut pas être répété. getElementById('')

sélecteur de classe, un nom de classe peut être utilisé à plusieurs reprises, par exemple, plusieurs éléments de la page peuvent utiliser la même définition de style.

[Sélecteur de groupe] : contrôlez plusieurs balises en même temps. Les noms de balises sont séparés par

a,p,span{}

[Sélecteur de combinaison] : nous pouvons également sélectionner en mélangeant et en faisant correspondre les noms de balises, les noms d'identifiant et les noms de classe, en ajoutant le le style

p .p {} représente toutes les balises de classe p sous la balise p.

p,#a {} représente la balise avec l'identifiant a et toutes les balises p.

[Sélecteur de relation] : le sélecteur de relation peut être divisé en

Nom du sélecteur                   Description                     Version     Nom anglais  

E F    Sélecteur d'inclusion  Sélectionnez tous les éléments F contenus dans les éléments E. . CSS1 (Combinateur descendant) est également appelé sélecteur descendant

E>F sélectionne tous les éléments enfants F qui sont des éléments E. CSS2 (combinateur enfant)

Le sélecteur adjacent E F sélectionne l'élément F immédiatement après l'élément E. CSS2 (combinateur de frères et sœurs adjacents)

Le sélecteur de frères et sœurs E~F sélectionne tous les éléments frères et sœurs F de l'élément E. CSS3 (Combinateur frère général)

[Sélecteur de pseudo-classe]

Toutes les balises ne peuvent pas utiliser de sélecteurs de pseudo-classe. Ici, nous ne parlons que des sélecteurs de pseudo-classe de la balise a

a:link {color: #FF0000; text-decoration: none}         //未访问的链接
a:visited {color: #00FF00; text-decoration: none}     //已访问的链接
a:hover {color: #FF00FF; text-decoration: underline}   //鼠标在链接上
a:active {color: #0000FF; text-decoration: underline}  //激活链接

✪Remarque : vous pouvez écrire une ou plusieurs des pseudo-classes ci-dessus. Mais vous devez les écrire dans l’ordre, sinon des problèmes surviendront !

Sélecteur Version Version Description

E:link CSS1 Définissez le style du lien hypertexte a avant d'y accéder.

E:visited CSS1 Définit le style du lien hypertexte a lorsque son adresse de lien a été visitée.

E:hover CSS1/2 Définit le style de l'élément lorsqu'il est survolé par la souris.

E:active CSS1/2 Définit le style de l'élément lorsqu'il est activé par l'utilisateur (un événement qui se produit entre le clic et le relâchement de la souris).

E:focus CSS1/2 Définit le style de l'élément lorsqu'il devient le focus d'entrée (l'événement onfocus de l'élément se produit).

E:lang(fr) CSS2 Correspond à l'élément E en utilisant un langage spécial. Rarement utilisé

E:not(s) CSS3 correspond à l'élément E qui ne contient pas le sélecteur s.

<:> E : racine CSS3 correspondant à l'élément racine de l'élément E dans le document. Fait souvent référence à l'élément html

E:first-child CSS2 correspond au premier élément enfant E de l'élément parent.

E:last-child CSS3 Correspond au dernier élément enfant E de l'élément parent.

E:only-child CSS3 Correspond au seul élément enfant E de l'élément parent.

E:nth-child(n) CSS3 Correspond au nième élément enfant E de l'élément parent.

E:nth-last-child(n) CSS3 Correspond au nième élément enfant E à partir du bas de l'élément parent.

E:first-of-type CSS3 Correspond au premier élément frère E du même type.

E:last-of-type CSS3 Correspond au dernier élément frère E du même type.

E:only-of-type CSS3 Correspond au seul élément frère E du même type.

E:nth-of-type(n)    　CSS3    匹配同类型中的第n个同级兄弟元素E。

E:nth-last-of-type(n) CSS3    匹配同类型中的倒数第n个同级兄弟元素E。

E:empty              　　 CSS3    匹配没有任何子元素（包括text节点）的元素E。

E:checked            　　CSS3    匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)

E:enabled            　　 CSS3    匹配用户界面上处于可用状态的元素E。

E:disabled           　　 CSS3    匹配用户界面上处于禁用状态的元素E。

E:target               　　 CSS3    匹配相关URL指向的E元素。

 

  ★first-child 与first-of-type的区别：

举例：

4533d610cdb8960dc10af1294aeeedba
e388a4556c0f65e1904146cc1a846bee第一个子元素94b3e26ee717c64999d7867364b1b4a3
4a249f0d628e2318394fd9b75b4636b1第二个子元素473f0a7621bec819994bb5020d29372a
45a2772a6b6107b401db3c9b82c049c2第三个子元素54bdf357c58b8a65c66d7c19c8e4d114
45a2772a6b6107b401db3c9b82c049c2第四个子元素54bdf357c58b8a65c66d7c19c8e4d114
94b3e26ee717c64999d7867364b1b4a3

语法说明：

p:first-child  　　　　  匹配到的是p元素,因为p元素是p的第一个子元素；

h1:first-child  　　　　匹配不到任何元素，因为在这里h1是p的第二个子元素，而不是第一个；

span:first-child  　　   匹配不到任何元素，因为在这里两个span元素都不是p的第一个子元素；

p:first-of-type  　　　　匹配到的是p元素,因为p是p的所有为p的子元素中的第一个，事实上这里也只有一个为p的子元素；

h1:first-of-type  　　   匹配到的是h1元素，因为h1是p的所有为h1的子元素中的第一个，事实上这里也只有一个为h1的子元素；

span:first-of-type  　　匹配到的是第三个子元素span。这里p有两个为span的子元素，匹配到的是第一个。

所以，通过以上两个例子可以得出结论：

:first-child 　　   匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。

:first-of-type 　　匹配的是某父元素下相同类型子元素中的第一个，比如 p:first-of-type，就是指所有类型为p的子元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了。

✪注意：当然这些元素的范围都是属于同一级的，也就是同辈的。

同样类型的选择器 :last-child  和 :last-of-type、:nth-child(n)  和  :nth-of-type(n) 也可以这样去理解。

【属性选择符】

选择符         　　　　　版本   　　描述

E[att]               　　CSS2  选择具有att属性的E元素。

E[att="val"]    　　 CSS2  选择具有att属性且属性值等于val的E元素。

E[att~="val"] 　　 CSS2  选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素。

E[att^="val"] 　　 CSS3  选择具有att属性且属性值为以val开头的字符串的E元素。

E[att$="val"] 　　 CSS3  选择具有att属性且属性值为以val结尾的字符串的E元素。

E[att*="val"]  　　CSS3  选择具有att属性且属性值为包含val的字符串的E元素。

E[att|="val"]  　　 CSS2  选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。

【伪对象选择符】

选择符                              　　　　版本     描述

E:first-letter/E::first-letter  　CSS1/3  设置对象内的第一个字符的样式。

E:first-line/E::first-line       　CSS1/3  设置对象内的第一行的样式。

E:before/E::before　　　　　　CSS2/3  设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用

E:after/E::after                 　　CSS2/3  设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用

E::placeholder                   　   CSS3    设置对象文字占位符的样式。

E::selection                     　　  CSS3    设置对象被选择时的颜色。    

 

✪注意：CSS3的语法改成:: ,原本CSS1是: ,故还是直接用两个冒号为妥。

举例：

html：

<input type="search" placeholder="测试">

css:

input::-webkit-input-placeholder {color: green;}

 

更多CSS选择符 相关文章请关注PHP中文网！