CSS 그룹화 및 중첩 선택기

CSS 그룹화 및 중첩 선택기

그룹화 선택기

스타일시트에는 동일한 스타일의 요소가 많이 있습니다.코드를 최소화하려면 그룹화 선택기를 사용할 수 있습니다. 각 선택기를 쉼표로 구분하세요.

인스턴스

       <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        h1,h2,p
        {
            color:green;
        }
    </style>
</head>

<body>
<h1> PHP中文网你</h1>
<h2>php.cn</h2>
<p>学习PHP知识的好选择.</p>
</body>
</html>

프로그램을 실행하여 사용해 보세요.

중첩 선택기

select에서 작동할 수 있습니다. 선택기 내부의 선택기 스타일 .

다음 예에서는 세 가지 스타일이 설정됩니다.

모든 p 요소에 대한 스타일 지정 class="marked"로 모든 요소에 대한 스타일 지정 class="marked" 요소 내의 모든 p 요소에 대한 스타일 지정

      <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        p
        {
            color:blue;
            text-align:center;
        }
        .marked
        {
            background-color:red;
        }
        .marked p
        {
            color:white;
        }
    </style>
</head>

<body>
<p>褪尽风华，我依然在彼岸守护你</p>
<div class="marked">
    <p>那些繁华哀伤终成过往，</p>
</div>
<p>请不要失望，平凡是为了最美的荡气回肠。</p>
</body>
</html>

프로그램을 실행해서 사용해 보세요

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> h1,h2,p { color: #d4d223; } </style> </head> <body> <h1>PHP中文网</h1> <h2>php.cn</h2> <p>你学习PHP知识的好选择.</p> </body> </html>

제출하다 코드 재설정

자동운전