찾다
집웹 프론트엔드CSS 튜토리얼CSS의 기본 선택자에 대한 자세한 설명과 선택자 우선순위에 대해 이야기합니다.

CSS의 기본 선택자에 대한 자세한 설명과 선택자 우선순위에 대해 이야기합니다.

青灯夜游
青灯夜游
Aug 02, 2022 pm 07:47 PM
css기본 선택기

이 글에서는 CSS의 5가지 기본 선택자(요소 선택자, 클래스 선택자, ID 선택자, 와일드카드 선택자, 속성 선택자)를 살펴보고 이러한 기본 선택자의 우선순위에 대해 이야기하는 것이 모든 사람에게 도움이 되기를 바랍니다.

CSS의 기본 선택자에 대한 자세한 설명과 선택자 우선순위에 대해 이야기합니다.

이 튜토리얼의 운영 환경: 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을 포함하지 않는 모든 항목을 찾습니다.

  • 이제 기본 선택자를 먼저 살펴보고 다른 선택자에 대해서는 나중에 소개하겠습니다.

기본 선택기

선택기 이름Example유형 선택기/요소 선택기.mystyle {color:red;}#myid {color:red;}범용 선택기/와일드카드 선택기[id] {color:red;}
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 id="一级标题">一级标题</h1>
    <h2 id="二级标题">二级标题</h2>
</body>

</html>

代码运行结果如下图所示：

CSS의 기본 선택자에 대한 자세한 설명과 선택자 우선순위에 대해 이야기합니다.

2、类选择器

类选择器 是通过HTML元素的class属性的值定位具体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 id="一级标题">一级标题</h1>
    <h2 id="二级标题">二级标题</h2>
    <h3 id="二级标题">二级标题</h3>
</body>

</html>

代码运行结果如下图所示：

CSS의 기본 선택자에 대한 자세한 설명과 선택자 우선순위에 대해 이야기합니다.下图展示了类选择器的分析结构：

CSS의 기본 선택자에 대한 자세한 설명과 선택자 우선순위에 대해 이야기합니다.

在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 id="一级标题">一级标题</h1>
    <h2 id="二级标题">二级标题</h2>
    <!-- 多个类型通过空格进行分割 -->
    <h3 id="二级标题">二级标题</h3>
</body>

</html>

代码运行结果如下图所示：

CSS의 기본 선택자에 대한 자세한 설명과 선택자 우선순위에 대해 이야기합니다.

<h3></h3>元素的字体与前面不一样的原因是因为相同优先级时，越靠后优先级越高。

3、ID选择器

ID选择器 和类选择器 类似，都是根据某个属性来匹配HTML元素的，类选择器匹配的是class选择器，而ID选择器匹配的是id属性。值得注意的是，ID属性在整个页面中是唯一不可重复的 。

语法结构如下：

#ID {
  属性 : 属性值;
}

用法与类选择器类似，这里不做赘述。只需要注意id属性唯一不可重复即可。

一个ID值在一个HTML文档中只能出现一次，也就是一个ID只能唯一标识一个元素(不是一类元素，而是一个元素)。

即元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！

示例：

#div1{
    background:rgb(200,200,0);
    color:blue;
    font-size:20px;
}

运行结果

<p>这是一个段落</p>
<p id="div1">这是一个段落</p>

CSS의 기본 선택자에 대한 자세한 설명과 선택자 우선순위에 대해 이야기합니다.

注意：由于id属性的唯一性，一般使用css做样式不使用该选择器，而该选择器的主要用途是用来做js特效

4、通用选择器

通用选择器 又称为通配符选择器 ，是一个星号（*），这个选择器是一个特殊的标签选择器，它可以指代所有类型的标签元素，包括自定义元素，以及<script></script>、<style></style>、<title></title>等元素，但是不包括伪元素。

语法结构如下所示：

* {
  属性 : 属性值;
}

示例代码如下：

nbsp;html>



    <meta>
    <meta>
    <meta>
    <title>通配符选择器</title>
    <style>
        * {
            color: lightskyblue;
        }

        /* 由于通配符选择器的优先级最低，可以随意覆盖 */
        p {
            color: #333;
        }
    </style>



    <h1 id="一级标题">一级标题</h1>
    <h2 id="二级标题">二级标题</h2>
    <p>段落文本</p>

代码运行结果如下图所示：

CSS의 기본 선택자에 대한 자세한 설명과 선택자 우선순위에 대해 이야기합니다.

5、属性选择器

属性选择器 是通过HTML元素已经存在属性名或属性值来定位具体HTML元素，在官方文档中类选择器和ID选择器都属于属性选择器，因为本质上类选择器是HTML元素中class的属性值，ID选择器是 HTML 元素中id的属性值。

CSS中的属性选择器还可以分为两种，如下所示

  • 属性值直接匹配选择器

  • 属性值正则匹配选择器

接下来我们将分别讨论这两类属性选择器

属性值直接匹配选择器

属性值直接匹配选择器还可以分为4种，如下所示：

  • [attr]：表示属性名匹配

  • [attr= "value"]：表示键值对匹配

  • [attr~="value"]：表示是属性值单词完全匹配选择器，专门用来匹配属性中的单词，其中，～=用来连接属性和属性值。

  • [attr|="value"]：表示属性值起始片段完全匹配选择器，表示具有attr属性的元素，其值要么正好是value ，要么以value外加短横线-开头，|=用于连接需要匹配的属性和属性内容。

[attr]属性选择器

[attr]属性选择器是众多属性选择器中的最简单用法，其中attr表示的是HTML元素的属性名。[attr]属性选择器是通过HTML元素的attr属性名来定位一个或多个HTML元素，而不关注该属性的值是什么。

语法结构如下所示：

[attr] {
  属性 : 属性值;
}

示例代码如下：

nbsp;html>



    <meta>
    <meta>
    <title>属性选择器</title>
    <style>
        /* 选中所有id属性 */
        [id] {
            color: cornflowerblue;
        }
    </style>



    <h1 id="白月初">白月初</h1>
    <h1 id="东方月初">东方月初</h1>
    <h1 id="涂山苏苏">涂山苏苏</h1>
    <h1 id="涂山红红">涂山红红</h1>
    <h1 id="涂山雅雅">涂山雅雅</h1>
    <h1 id="王权富贵">王权富贵</h1>

代码运行结果如下图所示：

CSS의 기본 선택자에 대한 자세한 설명과 선택자 우선순위에 대해 이야기합니다.

[attr=value]属性选择器

[attr=value]属性选择器是通过HTML元素的attr属性名属性值为value来定位一个或多个HTML元素。

语法结构如下所示：

[attr=value] {
  属性 : 属性值;
}

示例代码如下：

nbsp;html>



    <meta>
    <meta>
    <title>属性选择器</title>
    <style>
        /* 选择 id 属性为 title1 的元素 */
        [id=title1] {
            color: cornflowerblue;
        }
    </style>



    <h1 id="白月初">白月初</h1>
    <h1 id="东方月初">东方月初</h1>
    <h1 id="涂山苏苏">涂山苏苏</h1>
    <h1 id="涂山红红">涂山红红</h1>
    <h1 id="涂山雅雅">涂山雅雅</h1>
    <h1 id="王权富贵">王权富贵</h1>

代码运行结果如下图所示：

CSS의 기본 선택자에 대한 자세한 설명과 선택자 우선순위에 대해 이야기합니다.

[attr~=value]属性选择器

[attr~=value]属性选择器是通过HTML元素的attr属性名，属性值是一个以空格分隔的列表并且value值是该值列表中的之一，来定位一个或多个HTML元素。

[attr|=value]属性选择器

[attr|=value]属性选择器通过HTML元素的attr属性名并且属性值为value或者以value-为前缀来定位一个或多个HTML元素。

示例代码如下：

nbsp;html>



    <meta>
    <meta>
    <title>属性选择器</title>
    <style>
        /* 匹配所有id属性中包含 name4 的元素 */
        [class~=name4] {
            color: cornflowerblue;
        }

        /* [class |="name"] 会选择 class 属性以属性值为 name 或者 name-开头的属性 */
        [class |="name"] {
            color: lawngreen;
        }
    </style>



    <h1 id="白月初">白月初</h1>
    <h1 id="东方月初">东方月初</h1>
    <h1 id="涂山苏苏">涂山苏苏</h1>
    <h1 id="涂山红红">涂山红红</h1>
    <h1 id="涂山雅雅">涂山雅雅</h1>
    <h1 id="王权富贵">王权富贵</h1>

代码运行结果如下图所示：

CSS의 기본 선택자에 대한 자세한 설명과 선택자 우선순위에 대해 이야기합니다.

属性值正则匹配选择器

属性值正则匹配选择器还可以分为3种，如下所示：

  • [attr^=val]属性选择器：通过HTML元素的attr属性名并且属性值是以 value 为开头 来定位具体HTML元素。

  • [attr$=val]属性选择器：通过HTML元素的 attr属性名并且属性值是**以 ** **value ** 为结束 来定位具体 HTML 元素。

  • [attr*=val]属性选择器：通过HTML元素的attr属性名并且属性值是包含 value 来定位具体HTML元素。

语法结构如下所示：

[attr^=value] {
  属性 : 属性值;
}
[attr$=value] {
  属性 : 属性值;
}

[attr*=value] {
  属性 : 属性值;
}

示例代码如下：

nbsp;html>



    <meta>
    <meta>
    <title>属性选择器</title>
    <style>
        /* 匹配以 name 开头的元素，设置字体颜色为蓝色 */
        [class ^=name] {
            color: blue;
        }

        /* 匹配以 human 结尾的元素，设置字体大小为 2.6rem */
        [class $=human] {
            font-size: 2.6rem;
        }

        /* 匹配包含 em 的元素，设置字体颜色为红色 */
        [class *=em] {
            color: red;
        }
    </style>



    <h1 id="白月初">白月初</h1>
    <h1 id="东方月初">东方月初</h1>
    <h1 id="涂山苏苏">涂山苏苏</h1>
    <h1 id="涂山红红">涂山红红</h1>
    <h1 id="涂山雅雅">涂山雅雅</h1>
    <h1 id="王权富贵">王权富贵</h1>

代码运行结果如下图所示：

CSS의 기본 선택자에 대한 자세한 설명과 선택자 우선순위에 대해 이야기합니다.

选择器优先级

问题引入

如果有多个选择器选择到了同一个HTML元素，要将其样式进行改变，但是这些选择器定义的样式又是互斥的，那么该HTML元素的样式最终以哪一个作为最终显示结果呢？

浏览器根据css样式渲染某一个元素时，会遵循一定的规则，一般来说有以下的优先级规则，我们将其量化为特异性值。

CSS选择器的优先级别有着严格的规定，我们可以将其划分为0~5这6个级别，在这6个级别中，前4个的等级由CSS选择器决定，后两个等级由我们书写的形式和特性语法决定。具体如下所示

  • 0级：通配符选择器优先级为0 (通配选择器写作星号 * )。代码如下所示：

* {
    color: #000; 
}

  • 1级：类型（元素）选择器的优先级为1

  • 2级：类选择器和属性选择器的优先级为10

  • 3级：ID选择器的优先级为100

  • 4级：内联样式的优先级为1000

  • 5级：!important 特殊规则

!important是选择器优先级比较特殊的存在，优先级别为最高。值得注意的是 ，使用!important会破坏原有的选择器类型权重规则

下面我们来看一个例子

nbsp;html>


    <meta>
    <title>这是一个demo</title>
    <style>
        #myid{color:red;}
        .myclass1{color:yellow;}
        h1,p {color:green;}

    </style>

    
        <h1 id="这是一个标题-请查看优先级">这是一个标题，请查看优先级</h1>
        <p>这是一个段落，请查看优先级</p>
    

我们可以看到因为标签

有行内样式，所以它显示为了蓝色；

而标签

虽然定义了三种css样式，但是由于id选择器的优先级最高，所以显示为了红色

CSS의 기본 선택자에 대한 자세한 설명과 선택자 우선순위에 대해 이야기합니다.

(동영상 공유 학습: 웹 프론트엔드 시작하기)

위 내용은 CSS의 기본 선택자에 대한 자세한 설명과 선택자 우선순위에 대해 이야기합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
이 기사는 csdn에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
관련 기사
CSS 그리드는 무엇입니까?CSS 그리드는 무엇입니까?Apr 30, 2025 pm 03:21 PM

CSS 그리드는 복잡하고 반응이 좋은 웹 레이아웃을 만드는 강력한 도구입니다. 디자인을 단순화하고 접근성을 향상 시키며 이전 방법보다 더 많은 제어를 제공합니다.

CSS Flexbox 란 무엇입니까?CSS Flexbox 란 무엇입니까?Apr 30, 2025 pm 03:20 PM

기사는 반응 형 설계에서 공간의 효율적인 정렬 및 분포를위한 레이아웃 방법 인 CSS Flexbox에 대해 설명합니다. Flexbox 사용을 설명하고 CSS 그리드와 비교하고 브라우저 지원 세부 사항을 설명합니다.

CSS를 사용하여 웹 사이트를 반응하게 만드는 방법은 무엇입니까?CSS를 사용하여 웹 사이트를 반응하게 만드는 방법은 무엇입니까?Apr 30, 2025 pm 03:19 PM

이 기사는 Viewport Meta 태그, 유연한 그리드, 유체 미디어, 미디어 쿼리 및 상대 장치를 포함하여 CSS를 사용하여 반응 형 웹 사이트를 만드는 기술에 대해 설명합니다. 또한 CSS 그리드 및 Flexbox를 함께 사용하여 CSS 프레임 워크를 권장합니다.

CSS 박스 크기 부동산은 무엇을합니까?CSS 박스 크기 부동산은 무엇을합니까?Apr 30, 2025 pm 03:18 PM

이 기사는 요소 치수 계산 방법을 제어하는 ​​CSS 박스 크기 속성에 대해 설명합니다. Content-Box, Border-Box 및 Padding-Box와 같은 값과 레이아웃 설계 및 형태 정렬에 미치는 영향을 설명합니다.

CSS를 사용하여 어떻게 애니메이션 할 수 있습니까?CSS를 사용하여 어떻게 애니메이션 할 수 있습니까?Apr 30, 2025 pm 03:17 PM

기사는 CSS, 주요 특성 및 JavaScript와 결합 된 애니메이션 작성에 대해 논의합니다. 주요 문제는 브라우저 호환성입니다.

CSS를 사용하여 프로젝트에 3D 변환을 추가 할 수 있습니까?CSS를 사용하여 프로젝트에 3D 변환을 추가 할 수 있습니까?Apr 30, 2025 pm 03:16 PM

기사는 3D 변환, 주요 속성, 브라우저 호환성 및 웹 프로젝트에 대한 성능 고려 사항에 대한 CSS 사용에 대해 논의합니다. (문자 수 : 159)

CSS에 기울기를 추가 할 수있는 방법은 무엇입니까?CSS에 기울기를 추가 할 수있는 방법은 무엇입니까?Apr 30, 2025 pm 03:15 PM

이 기사는 CSS 그라디언트 (선형, 방사형, 반복)를 사용하여 웹 사이트 비주얼을 향상시키고 깊이, 초점 및 현대적인 미학을 추가합니다.

CSS의 의사 요소는 무엇입니까?CSS의 의사 요소는 무엇입니까?Apr 30, 2025 pm 03:14 PM

기사는 CSS의 의사 요소, HTML 스타일을 향상시키는 데 사용 및 의사 급의 차이점에 대해 설명합니다. 실제 사례를 제공합니다.

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

더보기

인기 기사

Windows 11 KB5054979의 새로운 기능 및 업데이트 문제를 해결하는 방법
3 몇 주 전ByDDD
KB5055523을 수정하는 방법 Windows 11에 설치되지 않습니까?
3 몇 주 전ByDDD
Inzoi : 학교 및 대학에 지원하는 방법
4 몇 주 전ByDDD
KB5055518을 수정하는 방법 Windows 10에 설치되지 않습니까?
3 몇 주 전ByDDD
Atomfall에서 사이트 사무실 키를 찾을 위치
4 몇 주 전ByDDD
더보기

뜨거운 도구

DVWA

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는

안전한 시험 브라우저

안전한 시험 브라우저

안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.

SublimeText3 Linux 새 버전

SublimeText3 Linux 새 버전

SublimeText3 Linux 최신 버전

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

PhpStorm 맥 버전

PhpStorm 맥 버전

최신(2018.2.1) 전문 PHP 통합 개발 도구

더보기

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?
7873
15
자바 튜토리얼
1649
14
Cakephp 튜토리얼
1409
52
라라벨 튜토리얼
1301
25
PHP 튜토리얼
1245
29
더보기