선택기 선언과 중첩이란 무엇입니까? CSS 선택기 선언 및 중첩
- 零下一度원래의
- 2017-04-22 13:10:522681검색
CSS 선택기를 사용하여 HTML 태그를 제어할 때 각 선택기의 여러 속성을 한 번에 선언할 수 있으며, 여러 선택기 자체도 동시에 선언할 수 있습니다. 또한 어떤 형태의 선택자라도 허용되며, 태그 선택자, 클래스 선택자, ID 선택자 모두를 집합적으로 선언할 수 있습니다. CSS 선택자를 선언할 때 일부 선택자의 스타일이 완전히 동일하거나 부분적으로 동일한 경우 집합적 선언을 사용하여 동시에 동일한 스타일의 선택자를 선언할 수 있습니다.
<span style="font-size:24px;"><html>
<head>
<title>
集体声明
</title>
<style type="text/css">
<!--
h1,h2,h3,h4,h5,p{
color:purple;
font-size:15px;
}
h2.special,.special,#one{
text-decoration:underline;
}
-->
</style>
</head>
<body>
<h1>集体声明h1</h1>
<h2 class="special">集体声明h2</h2>
<h3>集体声明h3</h3>
<h4>集体声明h4</h4>
<h5>集体声明h5</h5>
<p>集体声明p1</p>
<p class="special">集体声明p2</p>
<p id="one">集体声明p3</p>
</body>
</html>
</span> 전역 선언
실제 웹사이트의 경우 페이지의 모든 태그에 동일한 CSS 스타일을 사용하고 싶지만 is not 하나씩 일괄적으로 선언하고 싶다면 전역 선언 기호 *를 사용하여 선언하면 됩니다.
<span style="font-size:24px;"><html>
<head>
<title>
集体声明
</title>
<style type="text/css">
<!--
*{
color:purple;
font-size:15px;
}
h2.special,.special,#one{
text-decoration:underline;
}
-->
</style>
</head>
<body>
<h1>集体声明h1</h1>
<h2 class="special">集体声明h2</h2>
<h3>集体声明h3</h3>
<h4>集体声明h4</h4>
<h5>集体声明h5</h5>
<p>集体声明p1</p>
<p class="special">集体声明p2</p>
<p id="one">集体声明p3</p>
</body>
</html>
</span>두 선언이 완전히 동일한 효과를 갖는 것을 볼 수 있지만 전역 선언을 사용하면 코드가 크게 줄어듭니다.
선택기 중첩
CSS 선택기에서는 중첩을 사용하여 특수 위치에 HTML 태그를 선언할 수 있습니다.
예를 들어 p 태그에서 b 태그를 제어하는
<span style="font-size:24px;"><html>
<head>
<title>
CSS选择器的嵌套声明
</title>
<style type="text/css">
<!--
p b{
color:maroon;
text-decortion:underline;
}
-->
</style>
</head>
<body>
<p>嵌套使<b>用CSS</b>标记的方法</p>
嵌套之外的<b>标记</b>不生效
</body>
</html>
</span>중첩된 선택자는 중첩된 태그뿐만 아니라 매우 널리 사용됩니다. 카테고리 선택자와 ID 선택자는 모두 중첩될 수 있습니다.
다음 코드는 세 가지 수준의 중첩을 사용합니다. 이는 .top 카테고리의 b6c5a531a458a2e790c1fd6421739d1c 태그에 e388a4556c0f65e1904146cc1a846bee ; 8e99a69fbe029cd4e2b854e244eab143 태그가 포함된 top1 카테고리의 태그가 스타일을 선언합니다.
<span style="font-size:24px;">td.top .top1 strong{
font-size:16px;
}
<td class="top">
<p class="top1">
其他内容<strong>CSS控制的部分</strong>其他内容
</p>
</td>
</span>선택기를 중첩하면 CSS에서 클래스 및 ID 선언을 크게 줄일 수 있습니다. 따라서 페이지의 HTML을 작성할 때 일반적으로 외부 태그에 대해 클래스 또는 ID만 정의합니다. 내부 태그가 중첩으로 표현될 수 있는 경우에는 중첩 방식을 사용하므로 하위 태그가 이 규칙을 활용할 수 없는 경우에만 별도의 선언이 이루어집니다.
위 내용은 선택기 선언과 중첩이란 무엇입니까? CSS 선택기 선언 및 중첩의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!