Structural pseudo-class selector—nth-child implementation of colored table case (code example)

Objectives of this article:

1. Master the usage of nth-child, a structural pseudo-class selector in CSS.

Question:

1. Achieve the following effects, and With pure DIV CSS, you must use the structural pseudo-class selector -nth-child

When the mouse is hovering over a cell, the background turns purple

Additional notes:

1. Each cell is 145 wide, with a 1 pixel border, left padding is 5, top and bottom padding is 15

2. The title font is 20px, bold

Now let’s do the specific operation

1. Prepare materials: None, no need to prepare additional material pictures

2. Create Good index.html, write a good architecture, how to analyze the architecture

Idea analysis:

1. The goal is actually a table, we can achieve it in many ways, but for a better To show the role of nth-child, we use ul and li to layout

2. The color of each li changes regularly

Okay, first follow the analysis and write down the ideas , regardless of the implementation of css for the time being

The code is as follows:

    
    




    

        
项目基本情况
        

            
项目名称
            
xxxxxx
            
地理位置
            
xxxxxx

            
交通状况
            
xxxxxx
            
开发商
            
xxxxxx

            
销售代理公司
            
xxxxxx
            
商业运营公司
            
xxxxxx

            
项目性质
            
xxxxxx
            
功能定位
            
xxxxxx

            
目标消费群
            
xxxxxx
            
开盘时间
            
xxxxxx

            
竣工时间
            
xxxxxx
            
开业时间
            
xxxxxx

            
售楼电话
            
xxxxxx
            
销售招商位置
            
xxxxxx

            
总建筑面积
            
xxxxxx
            
商业面积
            
xxxxxx

            
停车位面积
            
xxxxxx
            
产权年限
            
xxxxxx
            
 
        

    

3. Write the style, create the css folder, create a new index.css in it, how to write the style inside, the following is the analysis idea

Idea analysis:

Overall table.table

1. According to the requirements, the width of each column is equally divided, so the container Width = 145*4 8 borders = 608, and the gray border displays

so add the following code to index.css:

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

Title

1. The background color is gray, the font color is white, there is space between the top and bottom, the font size is 20, bold, and centered

So add the following code to index.css:

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

ul,li

1. ul has padding by default, so in order not to affect the layout, you need to cancel the default padding, margin

2. According to the above requirements, li does not have padding Black dots, with gray borders, width 145, there is spacing up and down, and they are arranged horizontally so they must float

So add the following code to 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. In order to allow ul to still wrap the floating li, the last column must clear the float, but in order not to affect the layout, the width and height must be set to 0, and padding and margin must also be set. Set to 0, otherwise there will still be padding

So add the following code to index.css:

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

li with red font

1. We found the li with red font. In fact, the serial numbers of its li are 3, 7, 11, 15, 19, 23... This is regular, so we can use nth-child selection To achieve this, nth-child() brackets can be filled with expressions, such as 2n. The n of the expression starts from 0, so according to this rule we can get the expression as 4n 3. We can change n from 0 When you start to substitute, you can find that the serial numbers are 3, 7, 11, 15, 19, 23... so the expression is correct

So add the following code to index.css:

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

li with green font

1. We found li with green font. In fact, its li serial numbers are 1, 5, 9, 13, 17, 21, 25.....This is also regular, so we can use the nth-child selector to implement it. So how to write this expression? After careful study, we found that the expression is

4n 1. We can put Substituting n starting from 0, you can find that the serial numbers are 1, 5, 9, 13... so the expression is correct

So add the following code to index.css:

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

li with blue font

1. We found li with blue font. In fact, its li numbers are 2, 4, 6, and 8. 10, 12... This is also regular. In fact, it is an even column, but 0 is missing, so we can use the nth-child selector to implement it. So how to write this expression? After careful study, we found that the expression is 2n 2, we can substitute n starting from 0 and find that the serial numbers will be 2, 4, 6, 8, 10, 12... So the expression is correct. In fact, the expression can also be written as 2n, just However, because column 0 does not exist, it is correct and does not affect the final effect

So add the following code to index.css:

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

The last 4 columns

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中

    
    
    




    

        
项目基本情况
        

            
项目名称
            
xxxxxx
            
地理位置
            
xxxxxx

            
交通状况
            
xxxxxx
            
开发商
            
xxxxxx

            
销售代理公司
            
xxxxxx
            
商业运营公司
            
xxxxxx

            
项目性质
            
xxxxxx
            
功能定位
            
xxxxxx

            
目标消费群
            
xxxxxx
            
开盘时间
            
xxxxxx

            
竣工时间
            
xxxxxx
            
开业时间
            
xxxxxx

            
售楼电话
            
xxxxxx
            
销售招商位置
            
xxxxxx

            
总建筑面积
            
xxxxxx
            
商业面积
            
xxxxxx

            
停车位面积
            
xxxxxx
            
产权年限
            
xxxxxx
            
 
        

    

最终运行效果如下：

总结：

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

The above is the detailed content of Structural pseudo-class selector—nth-child implementation of colored table case (code example). For more information, please follow other related articles on the PHP Chinese website!