>  기사  >  웹 프론트엔드  >  CSS 선택기 우선순위 정리!

CSS 선택기 우선순위 정리!

藏色散人
藏色散人원래의
2018-10-24 16:51:1410907검색

이 글에서는 주로 css 선택자 우선순위가 무엇인지 소개합니다.

우선 css 선택기가 무엇인지 다들 아셔야겠죠?

웹 페이지를 디자인할 때 HTML 페이지의 요소에 대한 일대일, 일대다 또는 다대일 제어를 달성하기 위해 CSS를 사용하는 경우 CSS 선택기를 사용해야 합니다.

HTML 페이지의 요소는 CSS 선택기를 통해 제어됩니다.

간단히 말하면 선택자는 이렇게 이해하면 됩니다.

각 CSS 스타일 정의는 두 부분으로 구성되며 형식은 다음과 같습니다.

[code] Selector {Style} [/code] {} 앞 부분이 "선택기"입니다.

"선택기"는 {}의 "스타일" 개체, 즉 웹페이지에서 "스타일"이 작동하는 요소를 지정합니다.

누구나 간단히 이해할 수 있도록 CSS 선택기에는 어떤 카테고리가 있나요?

1. 태그 선택기

body,div,p,ul,li...

2. 클래스 선택기

class="demo"
class="demo_1"

4. 전역 선택기

id="name",id="name_t"

5. rreee

6. 하위 선택자

*

7. 상속된 선택자

.demo .demo_1
/*两选择器用空格键分开*/
9. 문자열 매칭을 위한 속성 선택자
#head .nav ul li
 /* 从父集到子孙集的选择器 */

12. CSS 인접 형제 선택자

div,span,img {color:blue}
/*即具有相同样式的标签分组显示*/

CSS 분류를 이해한 후에는 누구나 간략하게 이해해야 합니다

캐스케이딩이 무엇인가요?

Stackability:

충돌을 처리하는 CSS의 능력입니다. 스택 가능성은 능력입니다. 여러 선택기가 동일한 속성을 설명하는 경우 이 속성은 누구의 말을 들어야 합니까?

그럼 아래에서는

css 선택기

의 우선순위를 요약해 보겠습니다!

css 우선 순위 정렬

: !중요 > 인라인 스타일 > ID 선택기 > 태그 > 와일드카드 > 브라우저 기본 속성

자체 가중치, 각 CSS 규칙에는 서로 다른 선택기에 가중치를 부여하여 계산되는 가중치 수준이 포함되어 있습니다. 무게 수준에 따라 다양한 스타일이 생성되고 웹 페이지에 다양한 스타일이 반영됩니다.
CSS 가중치에 대한 자세한 내용은 이 기사를 참조하세요.

CSS의 우선순위 척도는 무엇인가요? CSS 가중치 사용법 소개프론트 엔드에 대해 더 알고 싶다면 PHP 중국어 웹사이트
CSS 비디오 튜토리얼

,

Bootstrap 튜토리얼

및 기타 관련 튜토리얼을 참조하세요. 그리고 배우세요!

위 내용은 CSS 선택기 우선순위 정리!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.