第 13 章 CSS 选择器[上] - 水之原-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

第 13 章 CSS 选择器[上] - 水之原

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 20, 2016 pm 04:50 PM

学习要点：

1.选择器总汇

2.基本选择器

3.复合选择器

4.伪元素选择器

主讲教师：李炎恢

本章主要探讨 HTML5 中 CSS 选择器，通过选择器定位到想要设置样式的元素。目前 CSS 选择器的版本已经升级至第三代，即 CSS3 选择器。CSS3 选择器提供了更多、更丰富的选择器方式，主要分为三大类。

一．选择器总汇

本节课主要涉及到三种选择器：基本选择器、复合选择器和伪元素选择器，具体如下：

选择器	名称	说明	CSS 版本
*	通用选择器	选择所有元素	2
	元素选择器	选择指定类型的元素	1
#	id 选择器	选择指定 id 属性的元素	1
.	class 选择器	选择指定 class 属性的元素	1
[attr]系列	属性选择器	选择指定 attr 属性的元素	2 ~ 3
s1,s2,s3...	分组选择器	选择多个选择器的元素	1
s1 s2	后代选择器	选择指定选择器的后代元素	1
s1 > s2	子选择器	选择指定选择器的子元素	2
s1 + s2	相邻兄弟选择器	选择指定选择器相邻的元素	2
s1 ~ s2	普通兄弟选择器	选择指定选择器后面的元素	3
::first-line	伪元素选择器	选择块级元素文本的首行	1
::first-letter	伪元素选择器	选择块级元素文本的首字母	1
::before	伪元素选择器	选择元素之前插入内容	2
::after	伪元素选择器	选择元素之后插入内容	2

二．基本选择器

使用简单且频率高的一些选择器归类为基本选择器。

1.通用选择器

<span style="color: #800000;">* </span>{<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;"> 1px solid red</span>;
}

解释：“*”号选择器是通用选择器，功能是匹配所有 html 元素的选择器包括和

标签。可以使用如下元素标记测试效果：

<span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>段落<span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span><br><span style="color: #0000ff;"><span style="color: #800000;">b</span><span style="color: #0000ff;">></span>加粗<span style="color: #0000ff;"></span><span style="color: #800000;">b</span><span style="color: #0000ff;">></span> <br><span style="color: #0000ff;"><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>无<span style="color: #0000ff;"></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span></span></span></span>

通用选择器会将所有元素匹配并配置样式，这是把双刃剑，好处就是非常方便，坏处就是将不必要的元素也配置了。目前为止，还不存在所有元素都必须配置的样式，所以，一般来说，不常用。

2.元素选择器

<span style="color: #800000;">p </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> red</span>;
}

<span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>段落<span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span></span>

解释：直接使用元素名称作为选择器名即可。

3.ID 选择器

<span style="color: #800000;">#abc </span>{<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 20px</span>;
}

<span style="color: #0000ff;"><span style="color: #800000;">p </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="abc"</span><span style="color: #0000ff;">></span>段落<span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span></span>

解释：通过对元素设置全局属性 id，然后使用#id 值来选择页面唯一元素。

4.类选择器

<span style="color: #800000;">.abc </span>{<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;"> 1px solid red</span>;
}

<span style="color: #0000ff;"><span style="color: #800000;">b </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="abc"</span><span style="color: #0000ff;">></span>加粗<span style="color: #0000ff;"></span><span style="color: #800000;">b</span><span style="color: #0000ff;">></span><br><span style="color: #0000ff;"><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="abc"</span><span style="color: #0000ff;">></span>无<span style="color: #0000ff;"></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span></span></span>

解释：通过对元素设置全局属性 class，然后使用.class 值选择页面一个或多个元素。

<span style="color: #800000;">b.abc </span>{<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;"> 1px solid red</span>;
}

解释：也可以使用“元素.class 值”的形式，限定某种类型的元素。

<span style="color: #0000ff;"><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="abc edf"</span><span style="color: #0000ff;">></span>无<span style="color: #0000ff;"></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span></span>

解释：类选择器还可以调用多个样式，中间用空格隔开进行层叠。

5.属性选择器

//所需 CSS2 版本

<span style="color: #800000;">[href] </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> orange</span>;
}

解释：属性选择器，直接通过两个中括号里面包含属性名即可。当然，还有更多扩展的属性选择器。

//所需 CSS2 版本

<span style="color: #800000;">[type="password"] </span>{<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;"> 1px solid red</span>;
}

解释：匹配属性值的属性选择器。

//所需版本 CSS3

<span style="color: #800000;">[href^="http"] </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> orange</span>;
}

解释：属性值开头匹配的属性选择器。

//所需版本 CSS3

<span style="color: #800000;">[href$=".com"] </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> orange</span>;
}

解释：属性值结尾匹配的属性选择器。

//所需版本 CSS3

<span style="color: #800000;">[href*="baidu"] </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> orange</span>;
}

解释：属性值包含指定字符的属性选择器。

//所需版本 CSS2

<span style="color: #800000;">[class~="edf"] </span>{<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 50px</span>;
}

解释：属性值具有多个值时，匹配其中一个值的属性选择器。

//所需版本 CSS2

<span style="color: #800000;">[lang|="en"] </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> red</span>;
}

解释：属性值具有多个值且使用“-”号连接符分割的其中一个值的属性选择器。比如

<span style="color: #0000ff;"><span style="color: #800000;">i </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="en-us"</span><span style="color: #0000ff;">></span>HTML5<span style="color: #0000ff;"></span><span style="color: #800000;">i</span><span style="color: #0000ff;">></span></span>

二．复合选择器

将不同的选择器进行组合形成新的特定匹配，我们称为复合选择器。

1.分组选择器

<span style="color: #800000;">p,b,i,span </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> red</span>;
}

解释：将多个选择器通过逗号分割，同时设置一组样式。当然，不但可以分组元素选择器，还可以使用 ID 选择器、类选择器、属性选择器混合使用。

2.后代选择器

<span style="color: #800000;">p b </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> red</span>;
}

解释：选择

元素内部所有元素。不在乎的层次深度。当然，后代选择器也可以混合使用 ID 选择器、类选择器、属性选择器。

3.子选择器

<span style="color: #800000;">ul > li </span>{<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;"> 1px solid red</span>;
}

<span style="color: #0000ff;"><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span><span style="color: #000000;">
        我是儿子
        </span><span style="color: #0000ff;"><span style="color: #800000;">ol</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span><span style="color: #000000;">
                我是孙子
            </span><span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span><span style="color: #000000;">
                我是孙子
            </span><span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></span><span style="color: #800000;">ol</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span><span style="color: #000000;">
        我是儿子
    </span><span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span><span style="color: #000000;">
        我是儿子
    </span><span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span></span></span></span></span></span></span></span>

解释：子选择器类似与后代选择器，而最大的区别就是子选择器只能选择父元素向下一级的元素，不可以再往下选择。

4.相邻兄弟选择器

<span style="color: #800000;">p + b </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> red</span>;
}

解释：相邻兄弟选择器匹配和第一个元素相邻的第二个元素。

5.普通兄弟选择器

<span style="color: #800000;">p ~ b </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> red</span>;
}

解释：普通兄弟选择器匹配和第一个元素后面的所有元素。

三．伪元素选择器

伪选择器分为两种第一种是下节伪类选择器，还有一种就是伪元素选择器。这两种选择器特性上比较容易混淆，在 CSS3 中为了区分，伪元素前置两个冒号（::），伪类前置一个冒号（:）。

1.::first-line 块级首行

<span style="color: #800000;">::first-line </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> red</span>;
}

解释：块级元素比如

、

等的首行文本被选定。如果想限定某种元素，可以加上前置 p::first-line。

2.::first-letter 块级首字母

<span style="color: #800000;">::first-letter </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> red</span>;
}

解释：块级元素的首行字母。

3.::before 文本前插入

<span style="color: #800000;">a::before </span>{<span style="color: #ff0000;">
    content</span>:<span style="color: #0000ff;"> '点击-'</span>;
}

解释：在文本前插入内容。

4.::after 文本后插入

<span style="color: #800000;">a::before </span>{<span style="color: #ff0000;">
    content</span>:<span style="color: #0000ff;"> '-请进'</span>;
}

解释：在文本后插入内容。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

公式アカウントのキャッシュの更新の難しさ：バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は？Mar 04, 2025 pm 12:32 PM

公式アカウントのWebページはキャッシュを更新します。これはシンプルでシンプルで、ポットを飲むのに十分な複雑です。あなたは公式のアカウントの記事を更新するために一生懸命働きましたが、ユーザーはまだ古いバージョンを開くことができますか？この記事では、この背後にあるtwist余曲折と、この問題を優雅に解決する方法を見てみましょう。それを読んだ後、さまざまなキャッシュの問題に簡単に対処でき、ユーザーが常に新鮮なコンテンツを体験できるようになります。最初に基本について話しましょう。それを率直に言うと、アクセス速度を向上させるために、ブラウザまたはサーバーはいくつかの静的リソース（写真、CSS、JSなど）やページコンテンツを保存します。次回アクセスするときは、もう一度ダウンロードすることなく、キャッシュから直接検索できます。自然に高速です。しかし、このことは両刃の剣でもあります。新しいバージョンはオンラインです、

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？Mar 17, 2025 pm 12:27 PM

この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。

HTML5のクロスブラウザー互換性のベストプラクティスは何ですか？Mar 17, 2025 pm 12:20 PM

記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。

WebページのPNG画像にストローク効果を効率的に追加する方法は？Mar 04, 2025 pm 02:39 PM

この記事では、CSSを使用したWebページへの効率的なPNG境界追加を示しています。 CSSはJavaScriptやライブラリと比較して優れたパフォーマンスを提供し、微妙または顕著な効果のために境界幅、スタイル、色を調整する方法を詳述していると主張しています

＆lt; datalist＆gt;の目的は何ですか要素？Mar 21, 2025 pm 12:33 PM

この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

＆lt; meter＆gt;の目的は何ですか要素？Mar 21, 2025 pm 12:35 PM

この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex

HTML5＆lt; time＆gt;を使用するにはどうすればよいですか日付と時刻を意味的に表す要素？Mar 12, 2025 pm 04:05 PM

この記事では、html5＆lt; time＆gt;について説明します。セマンティックデート/時刻表現の要素。人間の読み取り可能なテキストとともに、マシンの読みやすさ（ISO 8601形式）のDateTime属性の重要性を強調し、Accessibilitを増やします

＆lt; Progress＆gt;の目的は何ですか要素？Mar 21, 2025 pm 12:34 PM

この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

メモ帳++7.3.1

使いやすく無料のコードエディター

SecLists

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。