suchen

Heim >Web-Frontend >CSS-Tutorial >Struktureller Pseudoklassenselektor – N-te-Kind-Implementierung des farbigen Tabellenfalls (Codebeispiel)

Struktureller Pseudoklassenselektor – N-te-Kind-Implementierung des farbigen Tabellenfalls (Codebeispiel)

易达
易达Original
2020-06-10 17:05:402210Durchsuche

Ziele dieses Artikels:

1. Beherrschen Sie die Verwendung von nth-child, einem strukturellen Pseudoklassenselektor in CSS.

Fragen:

1 folgende Effekte, und Wenn Sie reines DIV+CSS verwenden, müssen Sie den strukturellen Pseudoklassenselektor verwenden – nth-child

Struktureller Pseudoklassenselektor – N-te-Kind-Implementierung des farbigen Tabellenfalls (Codebeispiel)

Wenn die Maus über einer Zelle schwebt, dreht sich der Hintergrund lila

Struktureller Pseudoklassenselektor – N-te-Kind-Implementierung des farbigen Tabellenfalls (Codebeispiel)

Zusätzliche Hinweise:

1 Jede Zelle ist 145 breit, mit 1 Pixel Rand, der linke Abstand beträgt 5, der obere und untere Abstand beträgt 15

2. Die Titelschrift ist 20px, fett

Jetzt führen wir den spezifischen Vorgang aus

1. Materialien vorbereiten: Keine, es müssen keine zusätzlichen Materialbilder vorbereitet werden

2. Erstellen Sie index.html und schreiben Sie die Architektur.

Das Ziel ist tatsächlich eine Tabelle , aber zum Besseren Um die Rolle des n-ten Kindes zu zeigen, verwenden wir ul und li zum Layout

2 Die Farbe jedes Li ändert sich regelmäßig

Okay, folgen Sie zuerst der Analyse und schreiben Sie Die Idee ist, die Implementierung von CSS vorerst zu ignorieren.

Der Code lautet wie folgt: 

<!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>

3. Schreiben Sie Stile, erstellen Sie einen CSS-Ordner und erstellen Sie eine neue index.css Im Inneren, wie man die Stile im Inneren schreibt, ist das Folgende die Analyseidee

Ideenanalyse:

Gesamttabelle.tabelle

1 Gemäß den Anforderungen ist die Breite jeder Spalte gleichmäßig aufgeteilt, sodass der Container die Breite = 145 * 4 + 8 Ränder = 608 hat und der graue Rand

anzeigt. Fügen Sie daher den folgenden Code zu index.css hinzu: 

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

Titel

1. Die Hintergrundfarbe ist grau, die Schriftfarbe ist weiß, zwischen oben und unten ist Platz, die Schriftgröße ist 20, fett, und zentriert

Fügen Sie also den folgenden Code zu index.css hinzu: 

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

ul,li

1 ul hat standardmäßig Auffüllung, also in Um das Layout nicht zu beeinträchtigen, müssen Sie den Standardabstand, Rand

2, aufheben. Gemäß den oben genannten Anforderungen ist li ohne schwarze Punkte mit einem grauen Rand und einer Breite von 145 vorhanden unten, und es ist horizontal angeordnet, sodass es schweben muss

, also fügen Sie den folgenden Code zu index.css hinzu: 

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

Löschen Sie das schwebende Li

1. Damit die UL das Floating-Li weiterhin umschließen kann, muss die letzte Spalte das Floating löschen, aber um das Layout nicht zu beeinträchtigen, müssen Breite und Höhe auf 0 eingestellt werden muss ebenfalls auf 0 gesetzt werden, sonst erfolgt noch Auffüllung

, also füge folgenden Code zur index.css hinzu: 

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

li mit roter Schrift


1. Wir haben das Li mit roter Schrift gefunden. Tatsächlich sind die Seriennummern seines Li 3, 7, 11, 15, 19, 23... Das ist regulär, also können wir nth- verwenden. Zu implementierender untergeordneter Selektor, nth-child() Klammern können mit Ausdrücken gefüllt werden, z. B. 2n, das n des Ausdrucks beginnt bei 0, sodass wir gemäß dieser Regel den Ausdruck als 4n + 3 erhalten können, den wir durch Ersetzen von n setzen können Beginnend bei 0 können Sie feststellen, dass die Seriennummern 3, 7, 11, 15, 19, 23 sind ... Der Ausdruck ist also korrekt

Fügen Sie also den folgenden Code zu index.css hinzu: 

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

li mit grüner Schrift

1 Wir haben festgestellt, dass li mit grüner Schrift tatsächlich die li-Seriennummern 1, 5, 9, 13, 17 sind. 21,25... Das ist auch regulär, also können wir den n-ten-Kind-Selektor verwenden, um ihn zu implementieren. Nach sorgfältiger Untersuchung haben wir herausgefunden, dass der Ausdruck

4n+1 ist , wir können n beginnend mit 0 ersetzen und feststellen, dass die Seriennummern 1, 5, 9, 13 sind ... Der Ausdruck ist also korrekt


Fügen Sie also den Code wie folgt zu index.css hinzu : 

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

li mit blauen Schriftarten

1 Tatsächlich sind die Seriennummern seiner li 2 und 4 , 8, 10, 12 ... Dies ist tatsächlich eine gerade Spalte, aber 0 fehlt, sodass wir den n-ten untergeordneten Selektor verwenden können, um ihn zu implementieren Es wurde festgestellt, dass der Ausdruck 2n+2 ist. Wir können n beginnend mit 0 einsetzen und feststellen, dass die Seriennummern 2, 4, 6, 8, 10, 12 sind. Der Ausdruck ist also tatsächlich korrekt Ausdruck ist auch Es kann als 2n geschrieben werden, ist aber korrekt, da Spalte 0 nicht existiert und den endgültigen Effekt nicht beeinflusst

Fügen Sie also den folgenden Code zu index.css hinzu:

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

Die letzten 4 Spalten

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

鼠标悬浮效果

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

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

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

到此为止，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;
}

然后将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>

最终运行效果如下：

Struktureller Pseudoklassenselektor – N-te-Kind-Implementierung des farbigen Tabellenfalls (Codebeispiel)

Struktureller Pseudoklassenselektor – N-te-Kind-Implementierung des farbigen Tabellenfalls (Codebeispiel)

总结：

1、学习了结构性伪类选择器—nth-child的用法，这里的难点就是在于要写表达式，所以写表达式的时候需要多花点耐心去总结规律

Das obige ist der detaillierte Inhalt vonStruktureller Pseudoklassenselektor – N-te-Kind-Implementierung des farbigen Tabellenfalls (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Struktureller Pseudoklassenselektor – Zielimplementierung des durchsuchbaren Menüs (Codebeispiel)Nächster Artikel：Struktureller Pseudoklassenselektor – Zielimplementierung des durchsuchbaren Menüs (Codebeispiel)

In Verbindung stehende Artikel

Mehr sehen