Structural pseudo-class selector—nth-child implementation of colored table case (code example)-CSS Tutorial-php.cn

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>

Copy after login

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;
}

Copy after login

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