ホームページ > 記事 > ウェブフロントエンド > 構造擬似クラス セレクター - 色付きテーブル ケースの n 番目の子の実装 (コード例)
構造擬似クラス セレクター - 色付きテーブル ケースの n 番目の子の実装 (コード例)
- 易达オリジナル
- 2020-06-10 17:05:402142ブラウズ
この記事の目的:
1. CSS の構造擬似クラス セレクターである nth-child の使い方をマスターします。
質問:
1. 達成します。次の効果と、純粋な DIV CSS では、構造擬似クラス セレクター -nth-child
マウスをセル上に置くと、背景が変わります。紫
追加メモ:
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にはデフォルトでパディングがあるため、レイアウトに影響を与えないようにするには、デフォルトのパディング、margin2 をキャンセルする必要があります。上記の要件によると、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
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>最终运行效果如下：
总结：
1、学习了结构性伪类选择器—nth-child的用法，这里的难点就是在于要写表达式，所以写表达式的时候需要多花点耐心去总结规律
以上が構造擬似クラス セレクター - 色付きテーブル ケースの n 番目の子の実装 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。