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; eledirectサブ要素選択セレクター | | p>p | は、p要素を親とするp要素を選択します
| ele+ele | 隣接する兄弟要素セレクター | p+p | はpを選択しますp 要素の直後 要素
| [attr]Attribute selector | | [target] | 対象の属性を持つ要素を選択
| [attr=val] | Attribute selector | [target= _空白] | ターゲット属性があり、属性値が _blank である要素を選択します
| [attr~=val] | 属性セレクター | [title~=demo] | title 属性があり、単語「」を含む要素を選択します要素
| [attr|=lang | uage] | 属性セレクター | [lang|=en] | lang属性の開始値がENである要素を選択
| : focus | | フォーカス セレクター | input: focus | はフォーカスのある入力要素を選択します
| : first-child | | first-child セレクター | p: first-child | は親となる p 要素を選択します最初の子要素
| ::before | | 疑似要素セレクター | p::before | p 要素の前にコンテンツを挿入します
| ::after | | 疑似要素セレクター | p ::after | p 要素の後にコンテンツを挿入します
| :lang | (言語) | 疑似クラスセレクター | p:lang(it) | lang 属性を選択するための開始値は p 要素ですそれの
🎜
这里需要注意的有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版本的选择器加起来都没它多
我们一起来看一下
| セレクター | カテゴリ | 例 | 説明 |
|---|
| 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 要素は、その親 |
の最後から 2 番目の p 要素です。 | :last-child | 疑似クラスセレクター | p:last-child | 親要素と子要素の最後にある各 p 要素を選択します |
| :root | root 要素セレクター | :root | ドキュメントのルート要素を選択します |
| :empty | emptyタグセレクター | p:empty | 要素(テキストノードを含む)の子p要素を選択しません |
| :target | ターゲット要素セレクター | new:target | 現在アクティブな#new要素(クリックしたアンカー名を含むURL)を選択します |
| :無効 | 疑似クラスセレクター | input:checked | 選択された入力要素を選択します |
| :not(selector) | | Negative selector | :not(p) |
p 要素ではない要素を選択 | ::selection | ハイライトテキストセレクター | ::selection |
ユーザーによって選択または強調表示されている要素の一部 | :out-of-range | 擬似クラス選択セレクター | : out-of-range |
は、値が範囲外である入力要素を選択します指定された範囲 | | : in-range | 擬似クラスセレクター |
: in-range| は指定された範囲内の値を選択します | | 内の入力要素:read-write | 読み取り/書き込み要素セレクター |
:読み取り-書き込み| は読み取り専用および書き込み可能な要素を選択します | | :read-only | 読み取り専用要素セレクター |
: read-only| 読み取り専用を選択しますreadonly 属性が設定された要素 | | : オプション | :required |
擬似クラスセレクター| :required | required 属性が設定された要素を選択 | | :valid |
法的要素selector| :valid | select 入力値は正当です 要素 | | : 無効な |
不正な要素セレクター| : 無効な | 不正な入力値を持つ要素を選択します | | 属性选择器
[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 サイトの他の関連記事を参照してください。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
-
2023-03-15 16:54:01
-
2023-03-15 12:26:02
-
2023-03-14 18:58:01
-
2023-03-14 11:30:01
-
1970-01-01 08:00:00
-
2023-03-16 15:20:01
-
1970-01-01 08:00:00
-
1970-01-01 08:00:00
-
1970-01-01 08:00:00
-
1970-01-01 08:00:00
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
