CSS3 には、多くの強力なセレクターが追加されました

これにより、記述量が減ります js イベントスクリプト
まず各バージョンのセレクターを見てみましょう
注:
ele は要素 element を表します
attr は要素を表します属性属性、valは値を表します属性値
:xxxはすべて擬似クラスセレクターに属します、::xxxはすべて擬似要素セレクターに属します
セレクターを可能な限り名前で細分化しました

CCS1セレクター

の要素

Selector	Type	Example	Description
.class	Class selector	.demo	デモを含むすべてのクラスを選択
#id	IDセレクター	#unique	IDが一意であるすべての要素を選択
ele	要素セレクター	p	すべてのp要素を選択
ele,ele	並列セレクター	h1、h2	すべての h1 要素と h2 要素を選択します
ele ele	子孫セレクター	p p	p 要素内のすべての p 要素を選択します
:link	疑似クラスセレクター	a:link	未訪問のリンクを選択
:visited	疑似クラスセレクター	a:visited	訪問済みのリンクを選択
:active	疑似クラスセレクター	a :active	アクティブなリンクを選択
:hover	疑似クラスセレクター	a:hover	マウスホバーリンクを選択
: :first-letter	最初の文字セレクター	p:first-letter	各 p 要素の最初の文字を選択します
::first-line	最初の行セレクター	p :first-line	各 p 要素の最初の行を選択します

CSS1 バージョンには、最も一般的に使用される古典的なセレクターが含まれています
::first-letter と ::first-line はほとんど使用されないようです
CSS2 では、それらは段落、ハイパーリンクなどのブロックレベルの要素にのみ適用できます
などのインライン要素は使用できません
CSS2.1では、:first-letterはすべての要素に適用できます
しかし、使用できる属性はまだ限られています

一般的ではないため、ここではリストしません使用

疑似リンク通常、このようなクラスセレクター(アンカー疑似クラス)を使用します

a:link {color: blue;}             /*静态伪类：未访问链接时蓝色*/a:visited {color: purple;}        /*静态伪类：访问过的链接变为紫色*/a:hover {color: red;}             /*动态伪类：鼠标悬浮在链接上变为红色*/a:active {color: orange;}         /*动态伪类：鼠标按下链接时变为橘黄色*/

ログイン後にコピー

link-visited-hover-active (LVHA)が推奨される順序であり、上書きによる競合が発生しません

また、「緑化LVHuA」を覚えておいてください

CSS2セレクターセレクタータイプ例説明*ワイルドカードセレクター* すべての要素を選択ele&g t; elep>pは、p要素を親とするp要素を選択しますele+ele隣接する兄弟要素セレクターp+pはpを選択しますp 要素の直後要素 [attr][target]対象の属性を持つ要素を選択[attr=val]Attribute selector[target= _空白] ターゲット属性があり、属性値が _blank である要素を選択します[attr~=val]属性セレクター[title~=demo] title 属性があり、単語「」を含む要素を選択します要素uage]属性セレクター[lang|=en] lang属性の開始値がENである要素を選択フォーカスセレクター input: focus はフォーカスのある入力要素を選択します first-child セレクター p: first-child は親となる p 要素を選択します最初の子要素疑似要素セレクターp::before p 要素の前にコンテンツを挿入します疑似要素セレクター p ::after p 要素の後にコンテンツを挿入します (言語)疑似クラスセレクター p:lang(it) lang 属性を選択するための開始値は p 要素ですそれの



	directサブ要素選択セレクター

	Attribute selector


[attr\|=lang
: focus
: first-child
::before
::after
:lang

🎜

这里需要注意的有p+p相邻兄弟元素选择器
选择的是紧挨着p元素后的一个p元素，
发现一些网站和书上写的都是所有p元素，但我验证了一下发现好像不对

title~demo是说title属性包含demo这个词，属性值之间用空格分隔的单词
像这样<img title="demo demo1 demo2"></img>是可以选中的
但是<img title="demo1 demo2"></img>就不能够选中

语言的选择器不常用过就不说了

::before和::after伪元素选择器要想添加内容，需要使用content属性

p::before {    content: "123";}

ログイン後にコピー

我们用after的时候很多时候是为了清除浮动

p::after {    content: "";    display: block;    clear: both;}

ログイン後にコピー

至于为什么就不是今天讨论的范畴了(￣_,￣ )

伪类与伪元素

伪元素选择器写成伪类单冒号的形式没什么问题
但是伪类选择器使用双冒号就不能选择元素了

这里说一下伪类和伪元素的区别
伪类我的理解是元素达到一种状态
状态存在，改变样式；状态消失，样式消失
伪元素应该说是操作元素的特定内容
实在分不清都写成单冒号的形式就好了

CSS3选择器

敲这么多终于到关键地方了
CSS3增加了很多强大的选择器，以伪劣选择器为主
CSS1和CSS2版本的选择器加起来都没它多
我们一起来看一下

の最後から 2 番目の p 要素です。 Negative selector p 要素ではない要素を選択ユーザーによって選択または強調表示されている要素の一部は、値が範囲外である入力要素を選択します指定された範囲: in-range: in-range内の入力要素:read-write:読み取り-書き込み:read-only: read-only: オプション擬似クラスセレクター required 属性が設定された要素を選択法的要素selectorselect 入力値は正当です要素不正な要素セレクター不正な入力値を持つ要素を選択します

属性选择器

[attr^=val]，[attr$=val]，[attr*=val] 这三个属性选择器放在一起记
也很好记，很想我们正则表达式中用的开头匹配符^，结尾匹配符$，统配匹配符*
同时还要区别于CSS2中的[attr~=val]

<p class="demo demo1">1</p><p class="demo demo2">2</p><p class="demo demo3">3</p>

ログイン後にコピー

[class^=de]可以把三行都选中，因为它们的class属性都是以“de”开头的
[class$=o2]可以选中第二行，因为只有它的class属性是以“o2”结尾的
[class*=em]同样可以选中三行，因为它们class的都包含字符串“em”
[class~=de]不能选中任何行，因为它class中以空格分隔的属性值中没有“de”的属性值

说到这个属性选择器，我还要多说一点
我在表格中的示例是这么写的 a[src$=\.pdf]
是因为“.”它不认识，我们需要加“\”转义
不过css中属性选择器也可以写成引号的形式
比如说下面代码时等价的
a[src$=\.pdf]
a[src$=".pdf"]
a[src$='.pdf']

子元素选择器

下面的一堆什么type、child的选择器都是针对子元素在父元素中的位置的
表格中列出的很详细了
我主要谈谈type、child的区别，
以最简单的:first-child和:first-of-type为例

<p>0</p><p>1</p><p>2</p><p>3</p>

ログイン後にコピー

p:first-child{    background-color: red;}

ログイン後にコピー

使用first-child我们发现页面没有变化
这是因为p并不是body元素的第一个子元素

p:first-of-type{/*改*/
    background-color: red;}

ログイン後にコピー

改为first-of-type我们发现第一个p变红了
这是因为它是body元素的子元素中所有p的第一个

其他的也是一样的道理，举一反三

根元素选择器

:root这个选择器没什么意思，和你直接使用html一样

:root {...}
html {...}

ログイン後にコピー

空元素选择器

:empty就是选择真正的空元素，内部没有任何子元素，文本节点也不能有
举个例子

<p></p><p>1</p><p>2</p><p>3</p>

ログイン後にコピー

p:empty::before {    content: "12345";    background-color: gold;}

ログイン後にコピー

目标元素选择器

这个:target选择器还有点意思
写一个例子

<a href="#first">1st</a><br><a href="#second">2nd</a><br><a href="#third">3rd</a><br><a href="#fourth">4th</a><br><a href="#fifth">5th</a><br><br><br><br><br><br><p id="first">1</p><p id="second">2</p><p id="third">3</p><p id="fourth">4</p><p id="fifth">5</p>

ログイン後にコピー

body {    height: 2000px;}p {    width: 200px;    height: 200px;    font: 200px/200px bold;}

ログイン後にコピー

这是一个小demo可以利用锚点在页面中进行跳转
点击链接可以跳转到对应id的元素，并且url链接也发生了改变

此时就会触发:target的样式
我们来试一试，加几行代码

p:target {    background-color: deeppink;}

ログイン後にコピー

再点击链接

我们发现，跳转的同时，p样式改变了

高亮文本选择器

::selection是CSS3新增的选择器
它用来匹配突出显示的文本（用鼠标选择文本）
浏览器有默认的样式（背景为蓝色，字体为）

<p>this is a long long text...</p>

ログイン後にコピー

p::selection{    color: white;    background-color: dodgerblue;}

ログイン後にコピー

浏览器默认的样式就是相当于这样，我们可以自己修改

否定选择器

:not()这个选择器可以排除某些特定条件的元素
比如说我们可以这样用

<p class="demo">1</p><p>2</p><p>3</p>

ログイン後にコピー

p:not(.demo) {    background-color: aqua;}

ログイン後にコピー

这样类属性中有demo的元素就不会变色

CSS小图表

剩下的选择器大部分都是针对input输入标签的
不详细讲了
我们做一个小练习，仅仅用CSS3的选择器做一个点击按钮切换图片的小图表
通过点击单选框显示不同的图片
像这样

首先我们需要编写html代码
使用三个radio和三个img元素

<input type="radio" name="demo" id="a" checked><img src="a.jpg" ><input type="radio" name="demo" id="b"><img src="b.jpg"><input type="radio" name="demo" id="c"><img src="c.jpg">

ログイン後にコピー

然后css部分通过:checked配合条件选择器控制img元素的显示

input {    margin-left: 35px;}img {    display: none;}:checked+img {    position: absolute;    left: 10px;    top: 40px;    display: inline-block;}

ログイン後にコピー

这样我们就完成了我们的小图表功能

整理了一晚上的选择器，可能会有遗漏的
如果想起来，日后再补吧

以上がCSS3 セレクターの詳細な紹介と使用法の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

セレクター	カテゴリ	例	説明
ele~ele	兄弟要素セレクター	p~p	p要素の後のすべてのp要素を選択します
[ attr^=val]	属性セレクター	a[src^=https]	src属性値がhttpsで始まる要素を選択
[attr$=val]	属性セレクター	a[ src$= .pdf]	src 属性値が .pdf で終わる要素を選択
[attr*=val]	属性セレクター	a[src*=demo]	Child を含める src 属性の値を選択デモの文字列要素
: first-of-type	疑似クラスセレクター	p: first-of-type	は、親 p 要素の最初である各 p 要素を選択します
:last-of-type	疑似クラスセレクター	p:last-of-type	は、各 p 要素がその親である最後の p 要素を選択します
: Only-of-type	疑似クラスセレクター	p:only-of-type	各 p 要素が親である唯一の p 要素を選択します
:only-child	only 子要素セレクター	p:only-child	その親の唯一の子要素である各 p 要素を選択します
:nth-child(n)	擬似クラスセレクター	p:nth-child(2)	すべての p 要素を選択します親の 2 番目の子要素
:nth-last-child(n)	疑似クラスセレクター	p:nth-last-child(2)	Select each A p 要素は最後から 2 番目の子要素です親の
:nth-of-type(n)	擬似クラスセレクター	p:nth-of-type(2)	がそれぞれを選択します p 要素は親の 2 番目の p 要素です
:nth-last-of-type(n)	pseudo-class selector	p:nth-last-of-type(2)	select 各 p 要素は、その親
:last-child	疑似クラスセレクター	p:last-child	親要素と子要素の最後にある各 p 要素を選択します
:root	root 要素セレクター	:root	ドキュメントのルート要素を選択します
:empty	emptyタグセレクター	p:empty	要素(テキストノードを含む)の子p要素を選択しません
:target	ターゲット要素セレクター	new:target	現在アクティブな#new要素(クリックしたアンカー名を含むURL)を選択します
:無効	疑似クラスセレクター	input:checked	選択された入力要素を選択します
:not(selector)			:not(p)
	::selection	ハイライトテキストセレクター	::selection
	:out-of-range	擬似クラス選択セレクター	: out-of-range
			擬似クラスセレクター
は指定された範囲内の値を選択します			読み取り/書き込み要素セレクター
は読み取り専用および書き込み可能な要素を選択します			読み取り専用要素セレクター
読み取り専用を選択しますreadonly 属性が設定された要素			:required
:required			:valid
:valid			: 無効な
: 無効な