CSS의 기본 선택자에 대한 자세한 설명과 선택자 우선순위에 대해 이야기합니다.
이 글에서는 CSS의 5가지 기본 선택자(요소 선택자, 클래스 선택자, ID 선택자, 와일드카드 선택자, 속성 선택자)를 살펴보고 이러한 기본 선택자의 우선순위에 대해 이야기하는 것이 모든 사람에게 도움이 되기를 바랍니다.
이 튜토리얼의 운영 환경: Windows 7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
선택기란 무엇인가요? CSS 선택기의 기능은 CSS 규칙에 따라 HTML 페이지의 하나 이상의 요소를 배치하는 것입니다. 브라우저가 HTML 페이지를 구문 분석할 때 CSS 규칙의 선택기를 기반으로 HTML 페이지의 요소를 찾고 해당 요소에 대한 스타일을 설정합니다. [추천 학습: css 비디오 튜토리얼]
CSS의 중추로서 CSS 선택기는 인간의 척추처럼 기능하며, THML 구조, 브라우저 동작 및 사용자 동작과 상호 의존적이고 상호 작용하여 CSS 선택기로 연결됩니다. 매우 중요한 부분. 여기서 "선택자"는 일반적으로 사용되는 CSS 선언 블록 앞에 있는 태그, 클래스 이름 등을 나타냅니다. 다음 코드에 표시된 대로:
div {
color: lightcoral;
font-size: 24px;
}여기의 div는 선택기입니다.
선택기 분류CSS는 첫 번째 버전에서 세 번째 버전으로 발전하면서 CSS 선택기의 유형이 점점 더 복잡해졌습니다. 현재 CSS 선택자의 분류는 다음과 같습니다.
기본 선택자: CSS 선택자의 가장 기본적인 사용법인 기본 선택자가 5개 있습니다.
레벨 선택기: HTML 요소 간의 관계를 기반으로 HTML 요소를 찾는 4가지 레벨 선택기가 있습니다.
결합 선택기: 교차와 합집합이라는 두 가지 용도가 있습니다. 이전 기본 선택기와 계층적 선택기를 결합한 것입니다.
의사 클래스 선택기: HTML 페이지에 포함되지 않은 상태 정보가 있는 HTML 요소를 선택할 수 있습니다.
의사 요소 선택기: HTML을 포함하지 않는 모든 항목을 찾습니다.
이제 기본 선택자를 먼저 살펴보고 다른 선택자에 대해서는 나중에 소개하겠습니다.
선택기 이름
| Description | ||
|---|---|---|
| p {color:red;} 모든< ;p> 요소를 선택하세요. | 클래스 선택기 | |
| class='mystyle' | id selector | |
| 모든 태그 요소 선택 with id="myid" | 범용 선택기/와일드카드 선택기 | |
| *myid {color:red;}모든 요소 선택 | 속성 선택기 | |
| 모든 ID 속성 요소를 선택하세요 | 1、元素选择器 元素选择器 又称为 类型选择器，这种基本选择器是通过HTML页面的元素名定位具体HTML元素。如果类型选择器单独使用的话，会定位当前HTML页面中所有该元素名的元素。 语法结构如下所示： 元素名 {
属性 : 属性值;
}值得注意是 类型选择器的元素名是不区分大小写的。 示例代码如下： <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>类型选择器</title>
<style>
/* 选择标签名为 h1 的元素，设置字体的颜色为红色 */
h1 {
color: lightcoral;
}
</style>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
</body>
</html>代码运行结果如下图所示：
2、类选择器 类选择器 是通过HTML元素的 语法结构如下所示： .类名 {
属性 : 属性值;
}示例代码如下： <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>类选择器</title>
<style>
/* 设置所有带有 title 类名的元素 */
.title {
color: lightsalmon;
}
</style>
</head>
<body>
<!-- 为 h1 h2 h3 元素增加一个 title 的类名，可以通过类选择器统一控制 -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>二级标题</h3>
</body>
</html>代码运行结果如下图所示：
在HTML中可以为一个元素添加多个类名，示例代码如下： <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>类选择器</title>
<style>
.title {
color: lightsalmon;
}
/* 任意选择一个类名设置即可 */
.h3 {
color: lawngreen;
}
</style>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<!-- 多个类型通过空格进行分割 -->
<h3 class="title h3">二级标题</h3>
</body>
</html>代码运行结果如下图所示：
3、ID选择器 ID选择器 和类选择器 类似，都是根据某个属性来匹配HTML元素的，类选择器匹配的是 语法结构如下： #ID {
属性 : 属性值;
}用法与类选择器类似，这里不做赘述。只需要注意 一个ID值在一个HTML文档中只能出现一次，也就是一个ID只能唯一标识一个元素(不是一类元素，而是一个元素)。 即元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！ 示例： #div1{
background:rgb(200,200,0);
color:blue;
font-size:20px;
}运行结果 <p>这是一个段落</p> <p id="div1">这是一个段落</p>
4、通用选择器 通用选择器 又称为通配符选择器 ，是一个星号（ 语法结构如下所示： * {
属性 : 属性值;
}示例代码如下： <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>通配符选择器</title>
<style>
* {
color: lightskyblue;
}
/* 由于通配符选择器的优先级最低，可以随意覆盖 */
p {
color: #333;
}
</style>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<p>段落文本</p>
</body>
</html>代码运行结果如下图所示： 5、属性选择器 属性选择器 是通过HTML元素已经存在属性名或属性值来定位具体HTML元素，在官方文档中类选择器和ID选择器都属于属性选择器，因为本质上类选择器是HTML元素中 CSS中的属性选择器还可以分为两种，如下所示
接下来我们将分别讨论这两类属性选择器 属性值直接匹配选择器 属性值直接匹配选择器还可以分为4种，如下所示：
语法结构如下所示： [attr] {
属性 : 属性值;
}示例代码如下： <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>属性选择器</title>
<style>
/* 选中所有id属性 */
[id] {
color: cornflowerblue;
}
</style>
</head>
<body>
<h1 id="title1">白月初</h1>
<h1 id="title2">东方月初</h1>
<h1 id="title3">涂山苏苏</h1>
<h1 id="title4">涂山红红</h1>
<h1 id="title5">涂山雅雅</h1>
<h1 id="title6">王权富贵</h1>
</body>
</html>代码运行结果如下图所示：
语法结构如下所示： [attr=value] {
属性 : 属性值;
}示例代码如下： <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>属性选择器</title>
<style>
/* 选择 id 属性为 title1 的元素 */
[id=title1] {
color: cornflowerblue;
}
</style>
</head>
<body>
<h1 id="title1">白月初</h1>
<h1 id="title2">东方月初</h1>
<h1 id="title3">涂山苏苏</h1>
<h1 id="title4">涂山红红</h1>
<h1 id="title5">涂山雅雅</h1>
<h1 id="title6">王权富贵</h1>
</body>
</html>代码运行结果如下图所示：
示例代码如下： <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>属性选择器</title>
<style>
/* 匹配所有id属性中包含 name4 的元素 */
[class~=name4] {
color: cornflowerblue;
}
/* [class |="name"] 会选择 class 属性以属性值为 name 或者 name-开头的属性 */
[class |="name"] {
color: lawngreen;
}
</style>
</head>
<body>
<h1 id="title1" class="name-1 title ">白月初</h1>
<h1 id="title2" class="name2 title ">东方月初</h1>
<h1 id="title3" class="name-3 title ">涂山苏苏</h1>
<h1 id="title4" class="name4 title ">涂山红红</h1>
<h1 id="title5" class="name-5 title ">涂山雅雅</h1>
<h1 id="title6">王权富贵</h1>
</body>
</html>代码运行结果如下图所示： 属性值正则匹配选择器属性值正则匹配选择器还可以分为3种，如下所示：
语法结构如下所示： [attr^=value] {
属性 : 属性值;
}
[attr$=value] {
属性 : 属性值;
}
[attr*=value] {
属性 : 属性值;
}示例代码如下： <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>属性选择器</title>
<style>
/* 匹配以 name 开头的元素，设置字体颜色为蓝色 */
[class ^=name] {
color: blue;
}
/* 匹配以 human 结尾的元素，设置字体大小为 2.6rem */
[class $=human] {
font-size: 2.6rem;
}
/* 匹配包含 em 的元素，设置字体颜色为红色 */
[class *=em] {
color: red;
}
</style>
</head>
<body>
<h1 class="name human">白月初</h1>
<h1 class="name human">东方月初</h1>
<h1 class="name demon">涂山苏苏</h1>
<h1 class="name demon">涂山红红</h1>
<h1 class="name demon">涂山雅雅</h1>
<h1 class="name human">王权富贵</h1>
</body>
</html>代码运行结果如下图所示： 选择器优先级问题引入
浏览器根据css样式渲染某一个元素时，会遵循一定的规则，一般来说有以下的优先级规则，我们将其量化为特异性值。 CSS选择器的优先级别有着严格的规定，我们可以将其划分为0~5这6个级别，在这6个级别中，前4个的等级由CSS选择器决定，后两个等级由我们书写的形式和特性语法决定。具体如下所示
* {
color: #000;
}
下面我们来看一个例子 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>这是一个demo</title>
<style>
#myid{color:red;}
.myclass1{color:yellow;}
h1,p {color:green;}
</style>
<body>
<h1 style="color: blue;" id="myid">这是一个标题，请查看优先级</h1>
<p id="myid">这是一个段落，请查看优先级</p>
</body>
</head>
</html>我们可以看到因为标签 有行内样式，所以它显示为了蓝色；而标签 虽然定义了三种css样式，但是由于id选择器的优先级最高，所以显示为了红色 (동영상 공유 학습: 웹 프론트엔드 시작하기) 위 내용은 CSS의 기본 선택자에 대한 자세한 설명과 선택자 우선순위에 대해 이야기합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요! 본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
핫 AI 도구
Undress AI Tool무료로 이미지를 벗다 
Undresser.AI Undress사실적인 누드 사진을 만들기 위한 AI 기반 앱 
AI Clothes Remover사진에서 옷을 제거하는 온라인 AI 도구입니다. 
Clothoff.ioAI 옷 제거제 
Video Face Swap완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요! 
인기 기사
Instagram에서 가장하는 계정을보고하는 방법
3 몇 주 전
By 下次还敢
2025 년 최고의 123VIES 대안 (무료 및 법적 스트리밍 옵션)
1 몇 달 전
By DDD
설정에서 Chatgpt 성격을 변경하는 방법 (Cynic, Robot, Listener, Nerd)
2 몇 주 전
By DDD
네온 심연에서 Eris와 싸우는 방법
3 몇 주 전
By Jack chen
뜨거운 도구
메모장++7.3.1사용하기 쉬운 무료 코드 편집기 
SublimeText3 중국어 버전중국어 버전, 사용하기 매우 쉽습니다. 
스튜디오 13.0.1 보내기강력한 PHP 통합 개발 환경 
드림위버 CS6시각적 웹 개발 도구 
SublimeText3 Mac 버전신 수준의 코드 편집 소프트웨어(SublimeText3) 
CSS에서 목록 스타일을 변경하는 방법
Aug 17, 2025 am 10:04 AM
CSS 목록 스타일을 변경하려면 먼저 목록 스타일 유형을 사용하여 총알 또는 번호 스타일을 변경하십시오. 1. 목록 스타일 유형을 사용하여 UL의 총알을 디스크, 원 또는 정사각형으로 설정하고 OL의 수는 소수점, 하부 알파, 어퍼 알파, 로마 또는 상단 로마입니다. 2. 목록 스타일로 태그를 완전히 제거하십시오. 3. 목록 스타일 이미지 : url ( 'bullet.png')을 사용하여 사용자 정의 이미지로 바꿉니다. 4. 목록 스타일 위치 : in 
CSS로 반응 형 평가 슬라이더를 만드는 방법
Aug 12, 2025 am 09:42 AM
순수한 CSS로 반응 형 자동 회전 목마 슬라이더를 만들고 HTML 구조, Flexbox 레이아웃 및 CSS 애니메이션을 결합하는 것이 가능합니다. 2. 먼저 여러 권장 항을 포함하는 시맨틱 HTML 컨테이너를 구축하고 각 .item에는 참조 내용 및 저자 정보가 포함되어 있습니다. 3. 부모 컨테이너를 사용하여 디스플레이를 설정하십시오 : Flex, 너비 : 300% (3 개의 슬라이드) 오버플로 : 숨겨져 수평 배열을 달성하십시오. 4. @KeyFrames를 사용하여 TransLateX 변환을 0%에서 -100%로 정의하고 애니메이션을 결합하여 Scroll15SlinearInfinite를 결합하여 원활한 자동 스크롤을 달성하십시오. 5. 미디어 추가 
CSS에서 점선 테두리를 만드는 방법
Aug 15, 2025 am 04:56 AM
CSS를 사용하여 점선 테두리를 생성하고 테두리 속성을 점선으로 설정하십시오. 예를 들어, "Border : 3pxDotted#000"은 요소에 3 픽셀의 블랙 도트 테두리를 추가 할 수 있습니다. 경계 넓이를 조정하면 포인트의 크기가 변경 될 수 있습니다. 더 넓은 경계는 더 큰 포인트를 생성합니다. "Border-Top : 2pxDottedRed"와 같은 특정 측면의 점선 테두리를 설정할 수 있습니다. 점선 테두리는 DIV 및 입력과 같은 블록 레벨 요소에 적합합니다. 이들은 종종 접근성을 향상시키기 위해 포커스 상태 또는 편집 가능한 영역에서 사용됩니다. 색상 대비에주의하십시오. 동시에, Dashed의 단거리 스타일과는 다른 점이있는 점은 원형 점 모양을 나타냅니다. 이 기능은 모든 주류 브라우저에서 널리 사용됩니다. 
배경에 CSS 그라디언트를 사용하는 방법
Aug 17, 2025 am 08:39 AM
cssgradientsprovidesmoothcolortransitionswithoutimages.1.lineargradientsTransitionColorSalongastRaightlineSingDipectionSliketobottomorangles 45deg, andsupportmultiplecolorstopsforcomplexeffects.2 
CSS로 유리 모르피스 효과를 만드는 방법
Aug 22, 2025 am 07:54 AM
CSS의 유리 모방 효과를 만들려면 배경 필터를 사용하여 배경 흐림을 달성하고 RGBA (255,255,255,0.1)와 같은 반투명 배경을 설정하고 계층의 감각을 향상시키기 위해 미묘한 경계와 그림자를 추가하고 요소 뒤에 충분한 시각적 내용이 있는지 확인해야합니다. 1. 배경 필터 : Blur (10px)를 사용하여 배경 내용을 흐리게합니다. 2. RGBA 또는 HSLA를 사용하여 투명한 배경을 정의하여 투명도의 정도를 제어합니다. 3. 4. 컨테이너에 그림이나 텍스처와 같은 풍부한 배경이 있어야하는 침투 효과가 흐려집니다. 5. 오래된 브라우저와 호환됩니다 
CSS에서 커서를 변경하는 방법
Aug 16, 2025 am 05:00 AM
UseBuilt-Incursortypes-Pointer, 도움말, Ornot-OllowedToprovideimmediateveedbackferentactiveElements.2. ApplyCustomCurimagess와 함께 제공되는 경우, applycifyingahotspotandalwaysincludingafalllikeautoorpointer.3. 
CSS에서 그리드 테일 플레이트 영역을 사용하는 방법
Aug 22, 2025 am 07:56 AM
TheGrid-Template-AreaspropertyAllowsDeveloyStocreateIntureative, ReadableAlayoutSByDefiningNamedGridAreas; withgrid-areAnamesonChildElements with with with with with with with with with with with with with with with with with with with withlestecell 
CSS에 상자 그림자를 추가하는 방법
Aug 18, 2025 am 11:39 AM
상자 그림자를 추가하려면 Box-Shadow 속성을 사용하십시오. 1. 기본 구문은 Box-Shadow입니다 : 수평 오프셋 수직 오프셋 블러 반경 반경 그림자 색상; 2. 처음 세 값이 필요하고 나머지는 선택 사항입니다. 3. RGBA () 또는 HSLA ()를 사용하여 투명한 효과를 달성합니다. 4. 양의 확장 반경은 그림자를 확장하고 음수 값이 감소된다. 5. 쉼표 분리로 여러 그림자를 추가 할 수 있습니다. 6. 다른 배경에서 가시성을 테스트 할 수 있도록 과용을 피해야합니다. 이 속성은 브라우저에서 잘 지원되며 합리적인 사용은 설계 텍스처를 향상시킬 수 있습니다. 
|
