Css 선택기: *, 루트:, html 및 본문 선택기
선결 조건
나는 네가 이미 기본적인 지식을 가지고 있다고 가정한다
기본적으로 CSS 선택기입니다.CSS 선택기는 html 문서의 요소를 선택하여 CSS 스타일을 적용할 수 있도록 합니다.
위에서 언급한 것들을 깊이 파고들자.
공통 선택기
먼저 공통 선택기*부터 시작하겠습니다.말 그대로 이것은 일반적인 선택기로서 html 페이지의 모든 요소를 선택할 수 있다. 이렇게 간단하다.일반 선택기에 사용할 수 있는 모든 스타일은 페이지의 모든 요소에 적용됩니다.예를 들어,
*{
border: 1px solid red;
}
너도 그것으로 너의 원소를 리셋할 수 있다.예를 들어,
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
*를 사용하여 제공된 스타일은 단일 요소 선택기에서 제공된 스타일로 덮어쓸 수 있으며 요소에 영구적인 스타일을 제공하는 데 사용할 수 없습니다.
*{
color: red;
margin 5px;
border: 1px solid black;
}
p{
color: green;
}
<body>
<div>
<span>I'm a red span.</span>
<p>I'm a green paragraph.</p>
<p>I'm a green paragraph.</p>
<p>I'm a green paragraph.</p>
<span>I'm a red span.</span>
</div>
</body>
또한 CSS 선택기 뒤에 *를 배치하여 특정 요소 또는 CSS 선택기의 모든 후손을 선택할 수도 있습니다.
*{
color: red;
margin: 5px;
border: 1px solid black;
}
p{
color: green;
}
.sample-element *{
color: blue;
}
<body>
<div>
<span>I'm a red span.</span>
<p>I'm a green paragraph.</p>
<p>I'm a green paragraph.</p>
<p>I'm a green paragraph.</p>
<span>I'm a red span.</span>
</div>
<div class="sample-element">
<p>I'm a blue paragraph.</p>
<p>I'm a blue paragraph.</p>
<span>I'm a blue span.</span>
</div>
</body>
루트 선택기
: 다른 한편, 루트는 위조 클래스 선택기입니다.이것은 문서의 루트 요소, 즉 문서에서 가장 높은 상위 요소를 선택하고 나타낸다. 우리의 예에서 html 요소이다.
html 요소 선택기와: 루트 선택기는 같다고 생각할 수 있습니다. 루트 요소 선택기는 모두 루트 부모 요소를 대표하지만, 루트 요소는 아닙니다.
내가 말했듯이 루트 선택기는 문서의 루트 요소를 목표로 하고 키워드는document이다.즉, 문서가 반드시 HTML 문서가 아니거나 XML 문서, XHTML 문서 또는 CSS 스타일을 적용할 다른 문서가 될 수 있습니다.따라서: 루트 선택기를 사용할 때 이 파일의 부모 요소가 대상 요소가 됩니다.각각 html원소, xml원소와 xhtml원소이다.
이것은 또한 루트 선택기와 html 요소 선택기를 사용하여 스타일을 적용할 때: 루트 선택기의 스타일은 html 요소 선택기의 스타일보다 더욱 높은 특정성을 가지게 된다는 것을 의미한다. 아래의 예시와 같다.
:root{
background-color : red;
}
html{
background-color: green;
}
: root 선택기는 글로벌 변수를 선언하는 데도 사용됩니다.CSS에 재사용 가능한 스타일이 있습니다.예를 들어, 당신은 특정한 16진수 코드를 가지고 있습니다. 16진수 색을 기억하고 모든 CSS 선택기에 하나씩 입력하는 것이 아니라, 루트에서 그것을 정의한 다음, 모든 CSS 선택기에서 호출할 수 있습니다.그리고 이 색을 더 이상 좋아하지 않기로 결정했을 때: 루트에서 그것을 변경할 수 있습니다. 사용한 모든 CSS 선택기를 수동으로 검사하는 것이 아니라.이것은 중복 양식을 관리하는 것을 더욱 쉽게 한다.(너는 나의 이전 노트에서 더 많이 읽을 수 있다.)
:root{
primary-color: #ff0000;
secondary-color: #00ff00;
}
h2{
color: var(--primary-color);
}
p{
color: var(--secondary-color);
}
html 요소 선택기
이제 html 요소 선택기에 대해 이야기합시다.
html 요소 선택기는 html 문서의 루트 요소를 가리킨다.그것은 헤드 요소와 바디 요소 두 개의 하위 요소를 포함한다.
html 요소 선택기에서 설명한 일부 스타일은 html 파일의 모든 요소가 계승됩니다. 예를 들어 색깔과 글꼴 스타일입니다.어떤 것은 배경색처럼 계승되지 않는다.
여기서 html 요소만 배경색을 가지고 있고 다른 요소는 투명한 배경색을 가지고 있으며 이것은 모든 요소의 기본 색입니다.이것은 모든 요소가 html 요소와 같은 배경색을 가지고 있다고 착각하게 할 것이다.
html 요소에 스타일을 적용하는 것을 권장하지 않습니다. 바디 요소 스타일과 문서의 다른 요소에 덮어쓰이기 때문입니다.
유일한 예외는 모든 하위 요소에서 상속될 글꼴 스타일, 특히 글꼴 크기를 성명하고자 하는 것입니다.이것은 루트 요소로서의 html 요소 선택기가 요소(루트 요소)에 설정된 모든 글꼴 크기에 따라 모든 요소의rem(루트em 단위) 크기를 조정하기 때문이다.
예를 들면,
html {
font-size: 16px;
}
.rem-block {
font-size: 1.2rem;
}
대부분의 경우 (계속이 아니라면) 바디 요소는 html 문서의 모든 공간을 차지하기 때문에 바디 요소가 최종적으로 브라우저에서 덮어쓸 때 html 요소를 양식화할 필요가 없다.
바디 요소 선택기
다른 한편, 바디 요소 선택기는 웹 브라우저에서 보거나 볼 수 있는 모든 요소를 포함합니다.
html원소선택기와 주체원소선택기 사이에는 큰 차이가 없지만 주체원소선택기는 html원소선택기보다 더욱 높은 특이성을 가진다.
따라서 바디 요소의 모든 스타일은 html 요소의 모든 복사 스타일을 덮어씁니다.그것의 스타일도 그 중의 요소 스타일에 의해 덮어쓸 수 있다.
앞에서 말한 바와 같이 html 요소에 비해 바디 요소에 스타일을 제공하는 것이 좋다. 바디 요소는 전체 html 요소를 덮어쓰고 우리가 브라우저에서 본 모든 다른 요소를 포함하기 때문이다.html 요소는 루트 요소와 문서 형식만 지정합니다.
우리 한번 되돌아봅시다.
선택기
루트 선택기
html 요소 선택기
바디 요소 선택기
다음까지, 동료들.안녕히 계세요!
전화 좀 받아주세요.
.
LinkedIn .
Reference
이 문제에 관하여(Css 선택기: *, 루트:, html 및 본문 선택기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/timonwa/all-vs-root-vs-html-vs-body-selectors-4opf텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
