構造擬似クラスセレクター - 色付きテーブルケースの n 番目の子の実装 (コード例)-CSSチュートリアル-php.cn

構造擬似クラスセレクター - 色付きテーブルケースの n 番目の子の実装 (コード例)

易达

リリース： 2020-06-10 17:08:12

オリジナル

2204 人が閲覧しました

この記事の目的:

1. CSS の構造擬似クラスセレクターである nth-child の使い方をマスターします。

質問:

1. 達成します。次の効果と、純粋な DIV CSS では、構造擬似クラスセレクター -nth-child

構造擬似クラスセレクター - 色付きテーブルケースの n 番目の子の実装 (コード例)

マウスをセル上に置くと、背景が変わります。紫

構造擬似クラスセレクター - 色付きテーブルケースの n 番目の子の実装 (コード例)

追加メモ:

1. 各セルの幅は 145、境界線は 1 ピクセル、左のパディングは 5、上下のパディングは 15 です。

2. タイトルのフォントは 20px、太字です

それでは、具体的な操作を行ってみましょう

1. 素材の準備: なし、追加の素材画像を準備する必要はありません

2. 優れたindex.htmlの作成、優れたアーキテクチャの作成、アーキテクチャの分析方法

アイデア分析:

1. 目標は実際にはテーブルであり、次の方法で達成できます。さまざまな方法がありますが、より良い方法です n 番目の子の役割を示すために、ul と li を使用してレイアウトします

2。各 li の色は定期的に変化します

わかりました、最初に分析に従います当面は CSS の実装に関係なく、アイデアを書き留めます。

コードは次のとおりです:

<!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. スタイルを記述し、CSS フォルダーを作成し、新しいインデックスを作成します.css 内のスタイルの書き方、以下が分析アイデアです

アイデア分析:

全体の table.table

1要件に従って、各列の幅は均等に分割されるため、コンテナーの幅 = 145*4 8 個の境界線 = 608 となり、灰色の境界線には

が表示されるため、次のコードをindex.css に追加します。 ##

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

ログイン後にコピー

Title

1. 背景色はグレー、フォントの色は白、上下の間にスペースがあり、フォントサイズは 20、太字、

したがって、次のコードをindex.cssに追加します:

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

ログイン後にコピー

ul,li

1. ulにはデフォルトでパディングがあるため、レイアウトに影響を与えないようにするには、デフォルトのパディング、margin

2 をキャンセルする必要があります。上記の要件によると、li にはパディングがありません。黒い点、灰色の境界線、幅 145、間隔があります。下向きに配置され、水平方向に配置されるため、浮動する必要があります

したがって、次のコードをindex.cssに追加します:

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

ログイン後にコピー

Clear Floating li

1 ul がフローティング li をラップできるようにするには、最後の列で float をクリアする必要がありますが、レイアウトに影響を与えないように、幅と高さを 0 に設定し、パディングとマージンも設定する必要があります。 0 に設定しないと、まだパディングが残ってしまいます。

したがって、次のコードをindex.cssに追加します:

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

ログイン後にコピー

li with red font

#1. 赤いフォントの li が見つかりました。実際、その li のシリアル番号は 3、7、11、15、19、23... これは規則的であるため、n 番目の子選択を使用できます。 , nth-child() の括弧には 2n などの式を入れることができます。式の n は 0 から始まるため、このルールに従って式を 4n 3 として取得できます。n を 0 から変更できます。代わりに、シリアル番号が 3、7、11、15、19、23... であることがわかります。したがって、式は正しいです。

したがって、次のコードをindex.css に追加します。

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

ログイン後にコピー

緑のフォントの li #1. 緑のフォントの li が見つかりました。実際、その li のシリアル番号は 1、5、9、13、17、21、25 です。 ...これも正規なので、nth-child セレクターを使用して実装できます。それでは、この式をどのように記述するか? 慎重に検討した結果、式は

4n 1 であることがわかりました。 n を 0 から置き換えると、シリアル番号が 1、5、9、13... であることがわかり、式は正しいです。

#そこで、次のコードをindex.css に追加します。

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

ログイン後にコピー

li と青いフォント

1. 青いフォントの li が見つかりました。実際、その li 番号は 2、4、6、8 です。10、12。 .. これも正規です。実際、これは偶数列ですが、0 が欠落しているので、nth-child セレクターを使用して実装できます。では、この式をどのように書くか? 慎重に検討した結果、次の式が見つかりました。が 2n 2 の場合、n を 0 から置き換えると、シリアル番号は 2、4、6、8、10、12... となることがわかり、式は正しいです。実際、式は 2n と書くこともできます。ただし、列 0 は存在しないため、これは正しく、最終的な効果には影響しません。

したがって、次のコードをindex.css に追加します。

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

ログイン後にコピー

最後の 4列

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>

ログイン後にコピー

最终运行效果如下：

構造擬似クラスセレクター - 色付きテーブルケースの n 番目の子の実装 (コード例)