CSS의 스타일 재정의 규칙에 대한 자세한 소개-CSS 튜토리얼-php.cn

CSS의 스타일 재정의 규칙에 대한 자세한 소개

黄舟

풀어 주다： 2017-07-22 10:36:04

원래의

1047명이 탐색했습니다.

CSS의 정식 명칭이 "Cascading Style Sheet"인 것은 다들 알고 계시지만, "Cascading"이라는 단어의 의미를 모르는 분들이 많을 것으로 추정됩니다. 실제로 "계단식"은 스타일의 오버레이를 의미합니다. 요소에 여러 스타일이 적용되고 동일한 이름의 스타일 속성이 있는 경우 브라우저는 해당 항목에서 속성 값을 선택해야 합니다. 스타일 재정의(이 이름이 더 많이 사용됨)는 특정 규칙을 따릅니다. 이전에는 항상 이 규칙을 막연하게 이해했지만 요즘 "CSS: The Missing Manual"을 읽고서야 갑자기 명확해졌습니다. 아래는 제가 공부한 노트 중 일부입니다.

우선, 여러 상황에 따라 요소가 여러 스타일로 적용된다는 점을 분명히 해야 합니다. 구체적인 규칙은 다음과 같습니다. .

규칙 1: 상속으로 인해 스타일 충돌이 발생하면 가장 가까운 조상이 승리합니다.

CSS의 상속 메커니즘을 사용하면 요소가 이를 포함하는 조상 요소에서 스타일을 상속할 수 있습니다. 다음 상황을 고려하세요.

<html>
<head>
<title>rule
 1</title>
<style>
body
 {color:black;}
p
 {color:blue;}
</style>
</head>
<body>
    <p>welcome
 to <strong>gaodayue的网络日志</strong></p>
</body>
</html>

로그인 후 복사

strong은 각각 body와 p에서 색상 속성을 상속하지만 p는 상속 트리에 있기 때문입니다. Strong에 더 가깝기 때문에 Strong의 텍스트는 결국 p의 파란색을 상속하게 됩니다.

规则二：继承的样式和直接指定的样式冲突时，直接指定的样式获胜。

在上面的例子中，假如还指定了strong元素的样式，如：

strong
 {color:red;}

로그인 후 복사

那么根据规则二，strong中的文字最终显示为红色。

规则三：直接指定的样式发生冲突时，样式权值高者获胜。

样式的权值取决于样式的选择器，权值定义如下表。

CSS 선택기	Weight
태그 선택기	1
클래스 선택기	10
ID 선택기	100
인라인 스타일	1000
의사 요소(:first-child 등)	1
의사 클래스(:link 등)	10

可以看到，内联样式的权值>>ID选择器>>类选择器>>标签选择器，除此以外，后代选择器的权值为每项权值之和，比如”#nav .current a”的权值为100 + 10 + 1 = 111。

规则四：样式权值相同时，后者获胜。

考虑下面这种情况

<pclass="byline">Written
 by <aclass="email"href="mailto:jean@cosmofarmer.
 com">Jean
 Graine de Pomme</a></p>

로그인 후 복사

.byline
 a {color:red;}
p
 .email {color:blue;}

로그인 후 복사

“.byline a”与”p .email”都直接指定了上面的a元素，且权值都为11，根据规则四，最终显示蓝色。

由于样式表可以是外部的，也可以是内部的，规则四提醒我们要注意外部样式表引入的顺序（及元素的顺序），以及外部样式表与内部样式表的出现位置。一般来说，内部样式表出现在所有外部样式表的引入之后，一般是在之前。

规则五：!important的样式属性不被覆盖。

!important可以看做是万不得已的时候，打破上述四个规则的”金手指”。如果你一定要采用某个样式属性，而不让它被覆盖的，可以在属性值后加上!important，以规则四的例子为例，”.byline a {color:red !important;}”可以强行使链接显示红色。大多数情况下都可以通过其他方式来控制样式的覆盖，不能滥用!important。

위 내용은 CSS의 스타일 재정의 규칙에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!