CSS 선택기 우선순위 및 !중요한 가중치 이해
- 青灯夜游앞으로
- 2020-12-31 17:23:384269검색
권장: css 비디오 튜토리얼
CSS
-
.class선택기의 선택기 우선순위 및 !important 가중치가 레이블 선택기보다 높습니다. -
#id选择器要高于.class选择器。 - 标签选择器是优先级最低的选择器。
-
!important的属性它的权重值优先级最高的，大于所有的选择器。
.class选择器要高于标签选择器。标签选择器和.class选择器
让我们进入标签选择器和.class选择器谁的优先级高实践，实践内容如：将HTML页面中的h2标签设置文本颜色。
代码块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>优先级</title>
<style>
h2{
color: red; /*红色*/
}
.box{
color: springgreen; /*绿色*/
}
</style>
</head>
<body>
<h2 class="box">微笑是最初的信仰</h2>
</body>
</html>结果图
.class选择器和id选择器
让我们进入.class选择器和id选择器谁的优先级高实践，实践内容如：将HTML页面中的h2标签设置文本颜色。
代码块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>优先级</title>
<style>
h2{
color: red; /*红色*/
}
.box{
color: springgreen; /*绿色*/
}
#box{
color:blue; /*蓝色*/
}
</style>
</head>
<body>
<h2 class="box" id="box">微笑是最初的信仰</h2>
</body>
</html>结果图
!important权重使用
现在我们知道了标签选择器优先级最低，那么笔者将标签选择器添加!important属性呢，谁的优先级更高呢？
!important权重使用格式如下：
color: red !important; /*红色*/
注意：属性：值 !important属性值用空格隔开即可。
让我们进入 !important属性使用实践，看看!important属性威力有多大哈。
代码块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>!important使用</title>
<style>
h2{
color: red !important; /*红色*/
}
.box{
color: springgreen; /*绿色*/
}
#box{
color:blue; /*蓝色*/
}
</style>
</head>
<body>
<h2 class="box" id="box">微笑是最初的信仰</h2>
</body>
</html>结果图
总结
优先级从低到高如：标签选择器、.class选择器、#id选择器、!important #id 선택기가 .class 선택기보다 높습니다.
!important의 속성은 모든 선택기보다 가장 높은 가중치 값 우선순위를 갖습니다.
태그 선택기 및 .class 선택기
태그 선택기와.class에 대해 알아보겠습니다. 어떤 선택기가 있는지 연습해 보세요. 연습 내용은 HTML 페이지에서 h2 태그의 텍스트 색상을 설정하는 것입니다. 코드 블록🎜rrreee🎜결과 사진🎜🎜🎜.class 선택기 및 id 선택기
🎜.class 선택기를 입력하고 연습 내용은 HTML 페이지에서 h2 태그의 텍스트 색상 설정과 같습니다. 🎜🎜코드 블록🎜rrreee🎜결과 사진🎜🎜
🎜!important Weight Usage
🎜이제 태그 선택기의 우선순위가 가장 낮다는 것을 알았으므로 작성자는 태그 선택기를 추가할 것입니다! important 속성 중 어느 속성이 더 우선순위가 높나요? <br>!important 가중치 사용 형식은 다음과 같습니다. 🎜rrreee🎜참고: <code>속성: value !important속성 값은 공백으로 구분할 수 있습니다. 🎜🎜!important 속성을 사용해 보고 !important 속성이 얼마나 강력한지 살펴보겠습니다. 🎜🎜코드 블록🎜rrreee🎜결과 사진🎜🎜
🎜Summary🎜🎜우선순위는 낮은 것부터 높은 것 순입니다. 예: 태그 선택기, .class 선택기, #id 선택기, !important 속성🎜🎜프로그래밍 관련 지식을 더 보려면 🎜프로그래밍 교육🎜을 방문하세요! ! 🎜
위 내용은 CSS 선택기 우선순위 및 !중요한 가중치 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
이 기사는 cnblogs.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
이전 기사：CSS에서 사각형을 원으로 바꾸는 방법다음 기사：CSS에서 사각형을 원으로 바꾸는 방법