Il existe plusieurs sélecteurs dérivés en CSS

Il existe trois types de sélecteurs dérivés en CSS : 1. Sélecteur descendant, syntaxe "E F{code de style}" ; 2. Sélecteur d'élément enfant, syntaxe "E > F {code de style}" ; syntaxe "E + F {code de style}".

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

Sélecteur dérivé CSS (sélecteur de contexte)

Le sélecteur (sélecteur) est une partie très importante des connaissances en CSS.

D'après ma brève compréhension, CSS consiste à appliquer différents styles aux éléments d'un code HTML.

La première étape consiste donc à localiser avec précision l'élément que vous souhaitez styliser.

CSS utilise divers sélecteurs pour positionner les éléments. Il existe de nombreux types de sélecteurs en CSS. Aujourd'hui, je veux juste parler des « sélecteurs dérivés ».

Quand j'ai entendu le nom "sélecteur dérivé", je n'ai vraiment pas compris de quel type de sélecteur il s'agissait. À première vue, le nom anglais est "contextual selectors". S'il est traduit littéralement, il est appelé "contextual selector". Bien que le nom ne soit pas élégant, je préfère ce nom.

le sélecteur contextuel définit des styles basés sur la relation contextuelle de l'élément à sa position.

Il existe trois types de sélecteurs de contexte : les sélecteurs descendants, les sélecteurs d'éléments enfants et les sélecteurs frères et sœurs adjacents.

Descendant Selector

eg:

html Code:

    <h1>This is a<em>important</em>heading</h1>

css Code:

    h1 em {color:red;}

La règle de syntaxe est entre H1 et EM un espace. Ensuite, ce code CSS sera appliqué à tous les éléments contenus dans la balise

.
Un point important concernant les sélecteurs descendants est que le nombre de générations entre le premier paramètre et le deuxième paramètre peut être infini.

eg:

Code HTML:

<ul> 
    <li>
        <ul>
            <li>
                <em>This will be styled.</em>
             </li>
        </ul>
    </li>
    <li>
        <em>This will be styled too.</em>
    </li>
</ul>

Code CSS:

ul em{color:red;}

Le style CSS ci-dessus sera appliqué aux deux éléments orange

Sélecteur d'enfant (sélecteur d'enfant)

Le sélecteur d'enfant sélectionnera uniquement les éléments enfants d'un certain élément et ne s'étendra à aucun élément descendant.

par exemple :

Code HTML :

<h1>This is <strong>This will be styled.</strong> important.</h1>
<h1>This is <em>really <strong>This will not be styled.</strong></em> important.</h1>

Code CSS :

h1 > strong {color:red;}

La règle de syntaxe est qu'il y aura un symbole ">" entre h1 et strong. L'espace entre ce ">" et le h1 précédent ou le fort suivant est facultatif.

Dans l'exemple ci-dessus, dans la première ligne du code HTML, l'élément est un élément enfant de

, et tous les sélecteurs forts h1 >

Dans la deuxième ligne du code HTML, n'est pas un élément enfant de

, mais un petit-fils de

, donc le sélecteur fort h1 >

Sélecteur de frères et sœurs adjacents

相邻兄弟选择器会选择某一元素紧随其后的元素，但是前提是他们拥有相同的父级。 

eg：

HTML代码：

<h1>
    <h2>This is a heading<h2>
    <strong>This will be styled.</strong>
    <strong>This will not be styled.</strong>
<h1>

CSS代码：

h2 + strong {color:red;}

语法规则是h2和strong之间有一个“＋”，“＋”和前面的h1或者后面的strong之间的空格都是可有可无的。

在 以上例子中，第一个strong紧邻着h2并且他们拥有相同的父级(h1)，所以h2 + strong会选择到第一个而不会选到第二个.

eg2:

HTML代码：

<p> 
    <ul>     
        <li>List item 1</li> 
        <li>List item 2</li> 
        <li>List item 3</li> 
    </ul> 
     <ol> 
         <li>List item 1</li> 
         <li>List item 2</li> 
         <li>List item 3</li> 
    </ol> 
</p>

CSS代码：

li + li {color:red;}

在以上的例子中li+li是选择紧挨着li后面的第一个

，所以第一个

不会被选择；而第二个

是紧挨着第一个li的，所有会被选择；第三个

是紧挨着第二个

的，也会被选择。

（学习视频分享：css视频教程）

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!