Sélecteur de pseudo-classe structurelle : implémentation du nième enfant du cas de la table colorée (exemple de code)-tutoriel CSS-php.cn

Objectifs de cet article :

1. Maîtriser l'utilisation de nth-child, un sélecteur de pseudo-classe structurel en CSS

Questions :

1. effets suivants, et Lorsque vous utilisez du DIV+CSS pur, vous devez utiliser le sélecteur de pseudo-classe structurelle—nth-child

Sélecteur de pseudo-classe structurelle : implémentation du nième enfant du cas de la table colorée (exemple de code)

Lorsque la souris survole une cellule, l'arrière-plan devient violet

Sélecteur de pseudo-classe structurelle : implémentation du nième enfant du cas de la table colorée (exemple de code)

Remarques supplémentaires :

1 Chaque cellule mesure 145 de large, avec une bordure de 1 pixel, le remplissage gauche est de 5, le remplissage supérieur et inférieur est de 15<.>

2. La police du titre est de 20px, en gras

Faisons maintenant l'opération spécifique

1 Préparer le matériel : Aucun, pas besoin de préparer des images de matériel supplémentaires

<.>2. Créez index.html et écrivez l'architecture.

Analyse d'idée :

1. , mais pour le mieux Pour montrer le rôle du nième enfant, nous utilisons ul et li pour mettre en page

2 La couleur de chaque li change régulièrement

D'accord, suivez d'abord l'analyse et écrivez. it L'idée est d'ignorer l'implémentation du CSS pour le moment

Le code est le suivant :

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>结构性伪类选择器—nth-child</title>
</head>

<body>
    <div class="table">
        <div class="caption">项目基本情况</div>
        <ul>
            <li>项目名称</li>
            <li>xxxxxx</li>
            <li>地理位置</li>
            <li>xxxxxx</li>

            <li>交通状况</li>
            <li>xxxxxx</li>
            <li>开发商</li>
            <li>xxxxxx</li>

            <li>销售代理公司</li>
            <li>xxxxxx</li>
            <li>商业运营公司</li>
            <li>xxxxxx</li>

            <li>项目性质</li>
            <li>xxxxxx</li>
            <li>功能定位</li>
            <li>xxxxxx</li>

            <li>目标消费群</li>
            <li>xxxxxx</li>
            <li>开盘时间</li>
            <li>xxxxxx</li>

            <li>竣工时间</li>
            <li>xxxxxx</li>
            <li>开业时间</li>
            <li>xxxxxx</li>

            <li>售楼电话</li>
            <li>xxxxxx</li>
            <li>销售招商位置</li>
            <li>xxxxxx</li>

            <li>总建筑面积</li>
            <li>xxxxxx</li>
            <li>商业面积</li>
            <li>xxxxxx</li>

            <li>停车位面积</li>
            <li>xxxxxx</li>
            <li>产权年限</li>
            <li>xxxxxx</li>
            <li class="clear"> </li>
        </ul>

    </div>
</body>

</html>

Copier après la connexion

3 Écrivez des styles, créez un dossier css, créez un nouvel index.css. à l'intérieur, comment écrire les styles à l'intérieur, voici l'idée d'analyse

Analyse de l'idée :

Tableau global.table

1 Selon. Selon les exigences, la largeur de chaque colonne est divisée également, donc le conteneur La largeur = 145*4+8 bordures = 608, et la bordure grise affiche

, ajoutez donc le code suivant à index.css :

.table {
   width: 608px;
   border: 1px solid gray;
}

Copier après la connexion

Titre

1. La couleur de fond est grise, la couleur de la police est blanche, il y a un espace entre le haut et le bas, la taille de la police est 20, en gras, et centré

Ajoutez donc le code suivant à index.css :

.caption {
   background-color: gray;
   color: white;
   padding: 15px 0px;
   font-size: 20px;
   font-weight: bold;
   text-align: center;
}

Copier après la connexion

ul,li

1 a un remplissage par défaut, donc dans. afin de ne pas affecter la mise en page, vous devez annuler le remplissage par défaut, marge

2 Selon les exigences ci-dessus, li Sans points noirs, avec bordure grise, largeur 145, il y a un espacement de haut en bas, et. il est disposé horizontalement, il doit donc flotter

, ajoutez donc le code suivant à index.css :

ul{
   padding: 0;
   margin: 0;
}
li{
   list-style: none;
   border:1px solid lightgray;
   width: 145px;
   padding:15px 0 15px 5px;
   float: left;
}

Copier après la connexion

Effacer le li flottant

1 . Afin de permettre à l'ul d'envelopper toujours le li flottant, la dernière colonne doit effacer le flottant, mais afin de ne pas affecter la mise en page, la largeur et la hauteur doivent être définies sur 0, le remplissage et la marge doivent également l'être. défini sur 0, sinon il y aura toujours du remplissage

, ajoutez donc le code suivant à index.css :

.clear{
   width:0;
   height: 0;
   float: none;
   clear: both;
   padding: 0;
   margin: 0;
}

Copier après la connexion

li avec une police rouge

1. Nous avons trouvé le li avec une police rouge. En fait, les numéros de série de son li sont 3, 7, 11, 15, 19, 23... C'est régulier, nous pouvons donc utiliser nth- Pour l'implémenter. avec le sélecteur d'enfant, les expressions peuvent être remplies entre les crochets nth-child(), comme 2n. Le n de l'expression commence à 0, donc selon cette règle, nous pouvons obtenir que l'expression soit 4n+3. En remplaçant n à partir de 0, vous pouvez constater que les numéros de série seront 3, 7, 11, 15, 19, 23... Donc l'expression est correcte

Ajoutez donc le code suivant à index.css :

ul>:nth-child(4n+3){
   color:red;
}

Copier après la connexion

li avec une police verte

1 Nous avons trouvé que li avec une police verte, en fait, ses numéros de série li sont 1, 5, 9, 13, 17. respectivement ,21,25... C'est aussi régulier, nous pouvons donc utiliser le sélecteur nième enfant pour l'implémenter. Alors, comment écrire cette expression Après une étude approfondie, nous avons découvert que l'expression est

4n. +1 , on peut remplacer n à partir de 0 et constater que les numéros de série seront 1, 5, 9, 13... Donc l'expression est correcte

Ajoutez donc le code à index.css Comme suit :

ul>:nth-child(4n+1){
   color:green;
}

Copier après la connexion

li avec des polices bleues

1 Nous avons trouvé le li avec des polices bleues. En fait, les numéros de série de son li sont respectivement 2 et 4. .6, 8, 10, 12... C'est aussi régulier. En fait, c'est une colonne paire, mais 0 est manquant, nous pouvons donc utiliser le sélecteur nième enfant pour l'implémenter. étudiez attentivement On constate que l'expression est 2n+2. Nous pouvons substituer n à partir de 0 et constater que les numéros de série seront 2, 4, 6, 8, 10, 12... Donc l'expression est correcte. , l'expression est aussi Elle peut s'écrire 2n, mais elle est correcte car la colonne 0 n'existe pas et n'affecte pas l'effet final

Ajoutez donc le code suivant à index.css :

ul>:nth-child( 2n+2 ){
   color:blue;
}

Copier après la connexion

Les 4 dernières colonnes

1、最后4列（序号为33,34,35,36的li）我们发现底部边框是不需要的，所以需要去除掉，因为最外层的容器的已经有个边框了

所以index.css中添加代码如下：

ul>:nth-child(33){
   border-bottom: 0;
}
ul>:nth-child(34){
   border-bottom: 0;
}
ul>:nth-child(35){
   border-bottom: 0;
}
ul>:nth-child(36){
   border-bottom: 0;
}

Copier après la connexion

鼠标悬浮效果

1、当鼠标悬浮的时候，背景需要变色变成紫色

所以index.css中添加代码如下：

li:hover{
   background-color: plum;
   cursor: pointer;
}

Copier après la connexion

到此为止，index.css代码如下：

.table {
   width: 608px;
   border: 1px solid gray;
}
.caption {
   background-color: gray;
   color: white;
   padding: 15px 0px;
   font-size: 20px;
   font-weight: bold;
   text-align: center;
}

ul{
   padding: 0;
   margin: 0;
}
li{
   list-style: none;
   border:1px solid lightgray;
   width: 145px;
   padding:15px 0 15px 5px;
   float: left;
}
.clear{
   width:0;
   height: 0;
   float: none;
   clear: both;
   padding: 0;
   margin: 0;
}

ul>:nth-child(4n+3){
   color:red;
}
 ul>:nth-child(4n+1){
   color:green;
}
ul>:nth-child( 2n+2 ){
   color:blue;
}
ul>:nth-child(33){
   border-bottom: 0;
}
ul>:nth-child(34){
   border-bottom: 0;
}
ul>:nth-child(35){
   border-bottom: 0;
}
ul>:nth-child(36){
   border-bottom: 0;
}
li:hover{
   background-color: plum;
   cursor: pointer;
}

Copier après la connexion

然后将index.css引入index.html中

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>结构性伪类选择器—nth-child</title>
    <link href="css/index.css" rel="stylesheet" type="text/css">
</head>

<body>
    <div class="table">
        <div class="caption">项目基本情况</div>
        <ul>
            <li>项目名称</li>
            <li>xxxxxx</li>
            <li>地理位置</li>
            <li>xxxxxx</li>

            <li>交通状况</li>
            <li>xxxxxx</li>
            <li>开发商</li>
            <li>xxxxxx</li>

            <li>销售代理公司</li>
            <li>xxxxxx</li>
            <li>商业运营公司</li>
            <li>xxxxxx</li>

            <li>项目性质</li>
            <li>xxxxxx</li>
            <li>功能定位</li>
            <li>xxxxxx</li>

            <li>目标消费群</li>
            <li>xxxxxx</li>
            <li>开盘时间</li>
            <li>xxxxxx</li>

            <li>竣工时间</li>
            <li>xxxxxx</li>
            <li>开业时间</li>
            <li>xxxxxx</li>

            <li>售楼电话</li>
            <li>xxxxxx</li>
            <li>销售招商位置</li>
            <li>xxxxxx</li>

            <li>总建筑面积</li>
            <li>xxxxxx</li>
            <li>商业面积</li>
            <li>xxxxxx</li>

            <li>停车位面积</li>
            <li>xxxxxx</li>
            <li>产权年限</li>
            <li>xxxxxx</li>
            <li class="clear"> </li>
        </ul>

    </div>
</body>

</html>

Copier après la connexion

最终运行效果如下：

Sélecteur de pseudo-classe structurelle : implémentation du nième enfant du cas de la table colorée (exemple de code)