CSS3 선택기 하위 항목은 무엇입니까? CSS3 선택기 하위 사용법에 대한 자세한 설명-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS3 선택기 하위 항목은 무엇입니까? CSS3 선택기 하위 사용법에 대한 자세한 설명

云罗郡主

Nov 19, 2018 am 09:59 AM

CSS3 선택기

이 기사에서는 CSS3 선택기 하위가 무엇인지 소개합니다. CSS3 선택기 하위 사용법에 대한 자세한 설명은 참고할만한 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

CSS3 구조적 의사 클래스 선택자와 관련하여 CSS3 튜토리얼을 방금 배운 초보자의 이해를 돕기 위해 먼저 CSS3 선택자 하위 선택자에 대해 설명하겠습니다.

CSS3 선택기 하위 항목은 무엇입니까? CSS3 선택기 하위 사용법에 대한 자세한 설명 이러한 구조적 의사 클래스 선택자는 이해하기 쉽습니다. 몇 가지 예를 사용하여 이러한 선택자의 사용법을 느껴보겠습니다.

코드는 다음과 같습니다.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
    <title>CSS3结构伪类选择器</title>
    <style type="text/css">
        *{padding:0;margin:0;}
        ul
        {
            display:inline-block;
            width:200px;
            list-style-type:none;
        }
        ul li
        {
            height:20px;
        }
        ul li:first-child{background-color:red;}
        ul li:nth-child(2){background-color:orange;}
        ul li:nth-child(3){background-color:yellow;}
        ul li:nth-child(4){background-color:green;}
        ul li:last-child{background-color:blue;}
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

로그인 후 복사

효과는 다음과 같습니다.

CSS3 선택기 하위 항목은 무엇입니까? CSS3 선택기 하위 사용법에 대한 자세한 설명

분석:

동일한 효과를 얻으려면 많은 사람들이 li 요소에 id 또는 class 속성을 추가하는 것을 생각합니다. 그러나 이렇게 하면 HTML 구조 ID와 클래스가 플러딩되어 유지 관리가 불편해집니다. 구조적 의사 클래스 선택기를 사용하면 HTML 구조가 매우 명확해지고 유지 관리가 쉽도록 구조와 스타일이 분리됩니다.

위의 구조적 의사 클래스 선택기를 사용할 수 있는 곳은 많으며, 특히 목록에서 다양한 스타일의 목록 항목을 운영하는 데 적합합니다.

예:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3结构伪类选择器</title>
    <style type="text/css">
        *{padding:0;margin:0;}
        ul
        {
            display:inline-block;
            width:200px;
            border:1px solid gray;
            list-style-type:none;
        }
        ul li
        {
            height:20px;
            background-color:green;
        }
        /*设置偶数列颜色*/
        ul li:nth-child(even)
        {
            background-color:red;
        }
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

로그인 후 복사

효과는 다음과 같습니다.

CSS3 선택기 하위 항목은 무엇입니까? CSS3 선택기 하위 사용법에 대한 자세한 설명