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

この記事の目的:

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 の実装に関係なく、アイデアを書き留めます。

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

    结构性伪类选择器—nth-child 
   项目基本情况
  项目名称
 xxxxxx
 地理位置
 xxxxxx
 交通状况
 xxxxxx
 开发商
 xxxxxx
 销售代理公司
 xxxxxx
 商业运营公司
 xxxxxx
 项目性质
 xxxxxx
 功能定位
 xxxxxx
 目标消费群
 xxxxxx
 开盘时间
 xxxxxx
 竣工时间
 xxxxxx
 开业时间
 xxxxxx
 售楼电话
 xxxxxx
 销售招商位置
 xxxxxx
 总建筑面积
 xxxxxx
 商业面积
 xxxxxx
 停车位面积
 xxxxxx
 产权年限
 xxxxxx

ログイン後にコピー

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中

    结构性伪类选择器—nth-child  
   项目基本情况
  项目名称
 xxxxxx
 地理位置
 xxxxxx
 交通状况
 xxxxxx
 开发商
 xxxxxx
 销售代理公司
 xxxxxx
 商业运营公司
 xxxxxx
 项目性质
 xxxxxx
 功能定位
 xxxxxx
 目标消费群
 xxxxxx
 开盘时间
 xxxxxx
 竣工时间
 xxxxxx
 开业时间
 xxxxxx
 售楼电话
 xxxxxx
 销售招商位置
 xxxxxx
 总建筑面积
 xxxxxx
 商业面积
 xxxxxx
 停车位面积
 xxxxxx
 产权年限
 xxxxxx