CSS 구조와 캐스케이딩에 대한 자세한 설명-JS 튜토리얼-php.cn

CSS는 Cascading Style Sheets의 약어로, 캐스케이드 개념이 매우 중요하다는 의미입니다. 가장 기본적인 수준에서는 CSS 규칙의 순서가 중요하다는 것을 보여주지만 그보다 더 복잡합니다. 캐스케이드에서 어떤 선택자가 승리하는지는 세 가지 요소에 따라 달라집니다(가중치 순서 - 앞선 것이 나중의 것을 무시함).

!important

CSS에는 하나의 규칙이 항상 다른 규칙보다 우선하도록 허용하는 특수 구문인 !important가 있습니다. 속성 값 뒤에 이를 추가하면 해당 설명이 믿을 수 없을 만큼 강력해집니다.
참고: 이 !important 선언을 재정의하는 유일한 방법은 이후 소스 코드나 더 높은 구체성을 가진 소스 코드에 동일한 !important 속성의 선언을 포함하는 것입니다.
다른 사람의 코드에서 이 !important를 발견하면 그것이 무엇인지 알 수 있도록 !important가 존재한다는 것을 아는 것은 유용합니다. 하지만! 꼭 필요한 경우가 아니면 절대 사용하지 않는 것이 좋습니다. 이 기능을 사용해야 하는 상황 중 하나는 핵심 CSS 모듈을 편집할 수 없는 CMS에서 작업 중이고 다른 방법으로 재정의할 수 없는 스타일을 실제로 재정의하려는 경우입니다. 그러나 피할 수 있다면 사용하지 마십시오. !important는 계단식 작업이 제대로 작동하는 방식을 변경하므로 특히 대규모 스타일시트에서 CSS 문제를 디버깅하는 것이 매우 어려울 수 있습니다.
스타일 시트 소스
CSS 선언의 중요성은 CSS 선언이 어떤 스타일 시트에 지정되어 있는지에 따라 달라집니다. 사용자는 사용자 정의 스타일 시트를 설정하여 개발자의 스타일을 재정의할 수 있습니다. 예를 들어 사용자는 시각 장애가 있어 설정을 원할 수 있습니다. 글꼴 읽기 쉽도록 액세스 가능한 모든 웹 페이지의 크기는 일반 크기의 두 배입니다.
충돌하는 선언은 다음 순서로 적용됩니다.

사용자 에이전트 스타일 시트의 선언(예: 다른 선언이 없는 브라우저 기본 스타일).

사용자 스타일시트의 일반 선언(사용자가 설정한 사용자 정의 스타일)

작성자 스타일시트의 일반적인 선언입니다(웹 개발자가 설정한 스타일입니다).

작성자 스타일시트의 중요한 선언

사용자 스타일시트의 중요한 선언(가장 높은 우선순위)
웹 개발자의 스타일시트가 사용자의 스타일시트를 재정의하는 것이 합리적이므로 디자인이 유지될 수 있습니다. 예상되지만 가끔 사용자는 위에서 언급한 것처럼 웹 개발자 스타일을 재정의해야 할 충분한 이유가 있습니다. 이는 사용자 규칙에서 !important를 사용하여 수행할 수 있습니다.
Specificity
Specificity는 기본적으로 선택기가 얼마나 구체적인지를 측정하는 것입니다. 즉,
얼마나 많은 요소가 일치하는지
. 위에 표시된 예에서 볼 수 있듯이 요소 선택기는 특이도가 매우 낮습니다. 클래스 선택자는 더 구체적이며 요소 선택자를 능가합니다. ID 선택자는 더 높은 특이성을 가지므로 클래스 선택자를 능가합니다.
선택기가 갖는 특이성의 정도는 천, 백, 십, 일로 생각할 수 있는 네 가지 다른 값(또는 구성 요소)을 사용하여 측정됩니다. 4개의 열에 4개의 간단한 숫자:
천: 더하기 선언이 스타일 속성에 있는 경우 1은 이 열을 가리킵니다(이러한 선언에는 선택기가 없으므로 구체도는 항상 1000입니다.). 그렇지 않으면 0입니다.

Hundreds: 전체 선택기에 포함된 각 ID 선택기에 대해 열에 1포인트를 추가합니다.

!important。

特殊性

特殊性基本上是衡量选择器的具体程度的一种方法——它能匹配多少元素。如上面所示的示例所示，元素选择器具有很低的特殊性。类选择器具有更高特殊性，所以将战胜元素选择器。ID选择器有甚至更高的专用性, 所以将战胜类选择器。

一个选择器具有的专用性的量是用四种不同的值（或组件）来衡量的，它们可以被认为是千位，百位，十位和个位——在四个列中的四个简单数字：

千位：如果声明是在 style 属性中该列加1分（这样的声明没有选择器，所以它们的专用性总是1000。）否则为0。
百位：在整个选择器中每包含一个 ID选择器就 在该列中加1分。
十位：在整个选择器中每包含一个 类选择器、属性选择器、或者 伪类 就在该列中加1分。
个位：在整个选择器中每包含一个 元素选择器 或 伪元素 就在该列中加1分。

注意: 通用选择器 (*), 复合选择器 (+, >, ~, ' ') 和否定伪类 (:not) 在专用性中无影响。

示例

Example

选择器	千位	百位	十位	个位	合计值
h1	0	0	0	1	0001
#important	0	1	0	0	0100
h1 + p::first-letter	0	0	0	3	0003
li > a[href*="zh-CN"] > .inline-warning	0	0	2	2	0022
#important p > p > a:hover, 在一个元素的 `<style>`	10자리: 전체 선택기에 `클래스 선택기`, `속성 선택기` 또는 `의사 클래스`가 포함될 때마다 1포인트가 추가됩니다. 열에.		1자리: 전체 선택기에 포함된 각 `요소 선택기` 또는 `의사 요소`에 대해 이 열에 1점을 추가합니다.		참고: 범용 선택자(*), 복합 선택자(+, >, ~, ' ') 및 부정 의사 클래스(:not)는 특이성에 영향을 미치지 않습니다.

선택기	천 자리	백 자리	십 자리	단위 자릿수	총계 값

🎜h1🎜🎜0🎜🎜0🎜🎜0🎜🎜1🎜🎜0001 🎜 🎜 🎜#important🎜🎜0🎜🎜1🎜🎜0🎜🎜0🎜🎜0100🎜🎜 🎜h1 + p::first-letter🎜🎜0🎜🎜0🎜🎜0🎜 🎜3🎜 🎜 0003🎜🎜 🎜li > a[href*="zh-CN"] > .inline-warning🎜🎜0🎜🎜0🎜🎜2🎜🎜2🎜🎜0022🎜🎜 🎜# 중요 p > p > a:hover, 요소의 <style> 속성

참고: 여러 선택기가 동일한 중요성과 특이성을 갖는 경우 어떤 선택기가 선택되는지는 소스 순서에 따라 달라집니다.

소스 순서

여러 경쟁 선택기가 동일한 중요성과 특이성을 갖는 경우 세 번째 요소는 어떤 규칙이 승리할지 결정하는 데 도움이 됩니다. 즉, 나중 규칙이 이전 규칙보다 우선합니다.

상속

CSS 상속은 모든 정보를 얻고 요소에 어떤 스타일이 적용되는지 이해하기 위해 조사해야 하는 마지막 부분입니다. 아이디어는 요소에 적용된 일부 속성 값이 해당 요소의 하위 요소에 상속되고 일부는 상속되지 않는다는 것입니다.

기본적으로 상속되는 속성과 대부분 상식과 일치하지 않는 속성은 무엇인가요? 확실하게 확인하려면 CSS 참조를 참조하세요. 각 개별 속성 페이지는 상속 여부를 포함하여 요소에 대한 다양한 세부 정보가 포함된 요약 테이블로 시작됩니다.

상속된 속성은 CSS의 가장 기본적인 내용 중 하나이며 일반적으로 특별히 고려되지는 않지만 다음 사항을 기억해야 합니다.

대부분의 상자 모델 속성(예: 테두리)은 상속되지 않습니다.
상속에는 특수성이 없으며 0,0,0,0보다 낮습니다 예: * {color: red;}

Control 상속

CSS는 3가지 특별한 일반 속성 값을 제공합니다. 상속 처리 :

inherit: 이 값은 선택한 요소에 적용되는 속성 값을 상위 요소와 동일하게 설정합니다.
initial : 이 값은 선택한 요소에 적용되는 속성 값을 브라우저의 기본 스타일 시트에서 해당 요소에 대해 설정된 것과 동일한 값으로 설정합니다. 브라우저의 기본 스타일 시트에 값이 설정되어 있지 않고 속성이 자연스럽게 상속되는 경우 속성 값은 inherit로 설정됩니다. inherit。
unset ：该值将属性重置为其自然值，即如果属性是自然继承的，那么它就表现得像 inherit，否则就是表现得像 initial。

总结

层叠样式表这个名字很贴切。 CSS所采用的方法就是让样式层叠在一起，这是通过结合继承和特殊性做到的•。CSS2.1 的层叠规则相当简单。

找出所有相关的规则，这些规则都包含与一个给定元素匹配的选择器。
按显式权重对应用到该元素的所有声明排序。标志 !important 的规则的权重要高于没有 !important 标志的规则。按来源对应用到给定元素的所有声明排序。共有3种来源：创作人员、读者和用户代理。正常情况下，创作人员的样式要胜过读者的样式。有 !important 标志的读者样式要强于所有其他样式，这包括有 !important
unset: 이 값은 속성을 자연 값으로 재설정합니다. 즉, 속성이 자연적으로 상속되면 inherit처럼 동작하고, 그렇지 않으면 initial처럼 동작합니다. <p></p>
요약
Cascading Style Sheets라는 이름이 딱 맞습니다. CSS가 취하는 접근 방식은 상속과 특정성의 조합을 통해 스타일을 함께 계단식으로 배열하는 것입니다. CSS2.1의 계단식 규칙은 매우 간단합니다.

주어진 요소와 일치하는 선택기를 포함하는 모든 관련 규칙을 찾습니다.

명시적 가중치를 기준으로 이 요소에 적용된 모든 선언을 정렬합니다. !important 플래그가 있는 규칙은 !important 플래그가 없는 규칙보다 더 높은 가중치를 갖습니다. 지정된 요소에 적용된 모든 선언을 소스별로 정렬합니다. 작성자, 독자, 사용자 에이전트라는 3가지 소스가 있습니다. 일반적으로 제작자의 스타일이 독자의 스타일보다 우선합니다. !important 플래그가 있는 리더 스타일은 !important 플래그가 있는 작성자 스타일을 포함하여 다른 모든 스타일보다 강력합니다. 작성자 및 독자 스타일 모두 사용자 에이전트의 기본 스타일보다 강력합니다.

위 내용은 CSS 구조와 캐스케이딩에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!