CSSチュートリアル

CSS の基本的なセレクターの詳細な説明とセレクターの優先順位についての説明

青灯夜游

Aug 02, 2022 pm 07:47 PM

css基本的なセレクター

この記事では、CSS の 5 つの基本セレクター (要素セレクター、クラスセレクター、ID セレクター、ワイルドカードセレクター、属性セレクター) について説明し、これらの基本セレクターの優先順位について説明します。

CSS の基本的なセレクターの詳細な説明とセレクターの優先順位についての説明

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

セレクターとは

CSS セレクターの機能は、CSS ルールに従って HTML ページの 1 つ以上の要素を見つけることです。ブラウザは HTML ページを解析するときに、CSS ルールのセレクターに従って HTML ページの要素を見つけ、対応する要素のスタイルを設定します。 [推奨学習: css ビデオチュートリアル ]

CSS のバックボーンとして、CSS セレクターは人間の背骨のように機能し、THML 構造、ブラウザーの動作、およびユーザーの動作と相互依存しています。そのため、CSS セレクターは非常に重要な部分になります。

ここでの「セレクター」とは、一般的に使用される CSS 宣言ブロックの前にあるラベル、クラス名などを指します。次のコードに示すように:

div {
  color: lightcoral;
    font-size: 24px;
}

ここの div はセレクターです。

セレクターの分類

CSS は第 1 バージョンから第 3 バージョンまで発展し、その結果、CSS セレクターの種類はますます複雑になってきました。現在、CSS セレクターの分類は次のとおりです。

基本セレクター: CSS セレクターの最も基本的な使用法である 5 つの基本セレクターがあります。
階層セレクター: 4 つの階層セレクターがあり、HTML 要素間の関係に基づいて HTML 要素を見つけます。
結合セレクター: 交差と結合の 2 つの用途があり、前の基本セレクターと階層セレクターを組み合わせたものです。
疑似クラスセレクター: HTML ページに含まれていないステータス情報を使用して HTML 要素を選択できるようにします。
疑似要素セレクター: HTML を含まないすべてのエンティティを検索します。

まず基本的なセレクターについて説明し、他のセレクターについては後で紹介します。

基本セレクター

#クラスセレクター.mystyle {color:red;}class='mystyle'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 の基本的なセレクターの詳細な説明とセレクターの優先順位についての説明

(学習ビデオ共有: Web フロントエンドの入門 )

セレクター名	例	説明
タイプセレクター/要素セレクター	p {color:red;}	すべての< ;p>要素を選択します。
		## を持つすべてのタグ要素を選択します
#myid {color:red;}	id="myid"
*myid {color:red;}	すべての要素を選択
[id] {color:red;}	すべての id 属性要素を選択します

以上がCSS の基本的なセレクターの詳細な説明とセレクターの優先順位についての説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事はcsdnで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

CSSグリッドとは何ですか？Apr 30, 2025 pm 03:21 PM

CSSグリッドは、複雑で応答性の高いWebレイアウトを作成するための強力なツールです。設計を簡素化し、アクセシビリティを向上させ、古い方法よりも多くの制御を提供します。

CSS Flexboxとは何ですか？Apr 30, 2025 pm 03:20 PM

記事では、レスポンシブデザインにおけるスペースの効率的なアラインメントと分布のためのレイアウト方法であるCSS FlexBoxについて説明します。 FlexBoxの使用量を説明し、CSSグリッドと比較し、ブラウザのサポートを詳細に説明します。

CSSを使用してWebサイトを応答するにはどうすればよいですか？Apr 30, 2025 pm 03:19 PM

この記事では、ビューポートメタタグ、柔軟なグリッド、流体メディア、メディアクエリ、相対ユニットなど、CSSを使用してレスポンシブWebサイトを作成するための手法について説明します。また、CSSグリッドとフレックスボックスを使用してカバーし、CSSフレームワークを推奨しています

CSSボックスサイズのプロパティは何をしますか？Apr 30, 2025 pm 03:18 PM

この記事では、要素の寸法の計算方法を制御するCSSボックスサイズのプロパティについて説明します。コンテンツボックス、ボーダーボックス、パディングボックスなどの値と、レイアウト設計とフォームアライメントへの影響について説明します。

CSSを使用してアニメーション化するにはどうすればよいですか？Apr 30, 2025 pm 03:17 PM

記事では、CSS、キープロパティ、およびJavaScriptとの組み合わせを使用してアニメーションの作成について説明します。主な問題は、ブラウザの互換性です。

CSSを使用してプロジェクトに3D変換を追加できますか？Apr 30, 2025 pm 03:16 PM

記事では、3D変換、主要なプロパティ、ブラウザの互換性、およびWebプロジェクトのパフォーマンスに関する考慮事項にCSSを使用して説明します。

CSSに勾配を追加するにはどうすればよいですか？Apr 30, 2025 pm 03:15 PM

この記事では、CSSグラデーション（線形、放射状、繰り返し）を使用して、ウェブサイトのビジュアルを強化し、深さ、フォーカス、および現代の美学を追加します。

CSSの擬似要素とは何ですか？Apr 30, 2025 pm 03:14 PM

記事では、CSSの擬似要素、HTMLスタイリングの強化における使用、および擬似クラスとの違いについて説明します。実用的な例を提供します。

See all articles

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、