Home >Web Front-end >CSS Tutorial >Structural pseudo-class selector—nth-child implementation of colored table case (code example)

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

易达Original: 2020-06-10 17:05:402214browse

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

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

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

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

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:

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