집 >웹 프론트엔드 >CSS 튜토리얼 >구조적 의사 클래스 선택기 - 색상이 지정된 테이블 사례의 n번째 하위 구현(코드 예)

구조적 의사 클래스 선택기 - 색상이 지정된 테이블 사례의 n번째 하위 구현(코드 예)

易达원래의: 2020-06-10 17:05:402209검색

이 글의 목표:

1. CSS의 구조적 의사 클래스 선택기인 nth-child의 사용법을 숙지하세요.

질문:

1 다음 효과를 얻으려면 순수 DIV+CSS를 사용해야 합니다. 구조적 의사 클래스 선택기를 사용하세요. —nth-child

구조적 의사 클래스 선택기 - 색상이 지정된 테이블 사례의 n번째 하위 구현(코드 예)

마우스를 셀 위로 가져가면 배경이 보라색으로 변합니다.

구조적 의사 클래스 선택기 - 색상이 지정된 테이블 사례의 n번째 하위 구현(코드 예)

추가 참고 사항:

1 너비는 145입니다. 테두리, 왼쪽 패딩은 5, 상단 및 하단 패딩은 15

2. 제목 글꼴은 20px, 굵게

이제 구체적인 작업을 해보자

1 재료 준비: 없음, 추가 재료 사진을 준비할 필요가 없습니다.

2. 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 폴더를 생성하고, 그 안에 새로운 index.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에는 기본적으로 패딩이 있으므로 레이아웃에 영향을 주지 않으려면 기본 패딩과 여백을 취소해야 합니다2. 위의 요구 사항에 따르면 li은 검은 점이 없고 회색 테두리가 있으며 너비가 145이고 위아래 간격이 있고 가로로 배열되어 있으므로 float

그래서 색인이 .css에 다음 코드를 추가합니다.

ul{
   padding: 0;
   margin: 0;
}
li{
   list-style: none;
   border:1px solid lightgray;
   width: 145px;
   padding:15px 0 15px 5px;
   float: left;
}

플로팅 li 지우기

1. ul이 플로팅 li를 계속 감싸도록 하려면 마지막 열에서 플로팅을 지워야 하지만 레이아웃에 영향을 주지 않으려면 너비와 높이를 설정해야 합니다. 0으로 설정하려면 패딩과 여백도 0으로 설정해야 합니다. 그렇지 않으면 여전히 패딩이 있을 것입니다그러므로 index.css에 다음 코드를 추가하세요.

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

li with red 글꼴

1. 실제로 빨간색 글꼴은 li의 시퀀스 번호가 3, 7, 11, 15, 19, 23입니다. 이것은 정규적이므로 nth-child() 대괄호에서 이를 구현하기 위해 nth-child 선택기를 사용할 수 있습니다. , 2n과 같은 수식을 채우십시오. 수식의 n은 0부터 시작하므로 이 규칙에 따라 수식을 0부터 시작하여 4n+3으로 얻을 수 있으며 시퀀스 번호 3을 찾을 수 있습니다. ,11,15,19,23...그래서 표현식은 정확합니다
그러므로 index.css에 다음 코드를 추가하세요:

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

li with green 글꼴

1. 녹색 글꼴 li는 실제로 li의 일련 번호는 1, 5, 9, 13, 17, 21, 25입니다.... 이것도 일반이므로 n번째 하위 선택기를 사용하여 구현할 수 있습니다. 이 표현식 공식을 작성하는 방법은 무엇입니까? 주의 깊게 연구한 결과 표현식은 4n+1이라는 것을 알았습니다. 0부터 시작하여 n을 대체하면 일련 번호가 1, 5, 9, 13...이 됩니다.

다음 코드를 index.css에 추가하세요.

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

li with blue 글꼴

1. 파란색 글꼴의 li는 실제로 li의 일련 번호가 2입니다. , 4, 6... 이것도 일반 열입니다. 실제로 짝수 열이지만 0이 누락되어 있으므로 n번째 하위 선택기를 사용하여 구현할 수 있습니다. 주의 깊게 연구한 결과 공식은 2n+2라는 것을 발견했습니다. 0부터 시작하여 n을 대체하면 일련 번호는 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>

最终运行效果如下：

구조적 의사 클래스 선택기 - 색상이 지정된 테이블 사례의 n번째 하위 구현(코드 예)

总结：

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

위 내용은 구조적 의사 클래스 선택기 - 색상이 지정된 테이블 사례의 n번째 하위 구현(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：구조적 의사 클래스 선택기 - 검색 가능한 메뉴 케이스의 대상 구현(코드 예)다음 기사：구조적 의사 클래스 선택기 - 검색 가능한 메뉴 케이스의 대상 구현(코드 예)