先日、CSSの技術キーワードをいくつか整理したのですが、私の知識が薄すぎて考察が不十分で不足していると感じたので、sf.ggで「コア技術キーワードについて」という質問をしました。 CSS の。」どれですか? 》 また、有力な人々に一緒に参加してもらい、その経験を活かして、CSS のどの知識ポイントが重要であるか、不可欠であるか、または良い基盤を築く必要があるかを教えてもらいます。
この CSS の技術的なキーワードを整理するときに、最もよく使われる機能の 1 つとして、ほぼ毎日使用される CSS を 20 種類挙げろと言われたら、まず思い浮かぶのはセレクターです。セレクターさん、それをぼかすことは可能でしょうか？ もしかして、私たちはブラウザによって依然として CSS2.1 セレクターに固執するよう強制されているのでしょうか? CSS4 仕様がもうすぐ発表されますが、まだ検討中ですか?
これらの質問を受けて、以前使用した知識ポイントを整理し、最終的に一連の記事の形でセレクターについての理解を話すことにしました。具体的な内容は次のとおりです。
この記事を書くときにすべての CSS セレクターをより直感的に確認するために使用し、また、記事内の例を理解しやすくするためのサンプル コード。
マインドマップとサンプルコードに関しては、もちろんGithubにアップロードします。
ウェアハウスアドレス: https://github.com/Alsiso/everyday
マインドマップ: https : //github.com/Alsiso/everyday/blob/master/codes/css-selectors/css...
サンプルコード: https://github.com/Alsiso/everyday/tree/master/codes/css-selectors
About Everydayでは、コード、レイアウト計画、モバイル端末への適応計画などがあり、今後も継続的に追加および更新されます。コードについてのチャットやフロントエンドでの遊びへようこそ。
ワイルドカードセレクターはすべての要素を選択するために使用されます
* { marigin: 0; padding: 0;}私の記事でCSS RESETについて説明しましたが、内部のコアコードはワイルドカードセレクターを使用してパディングとマージンをリセットするために定義されています。ブラウザ内のすべての要素。
実際、ワイルドカード セレクターは、特定の要素の下にあるすべての要素を選択することもできます
#demo *{ margin:0;}ただし、ワイルドカードを使用するときは 注意する必要があります。これは、ワイルドカードがパフォーマンス上の問題を引き起こすからではなく、ワイルドカードの誤用により「継承エラー」が発生するためです。 " または " "継承ショート" 問題、この状況は開発に一定の影響を及ぼします。
要素セレクターも、HTML ドキュメント内の要素のスタイルを指定するために使用されます
ul{ list-style:none;}▲ ここでは、要素セレクター を使用して ul 要素を選択し、デフォルトのドットを削除します。リストの先頭
クラス セレクターは、最も一般的に使用されるセレクターです。これを使用する場合は、HTML ドキュメント要素でクラス名を定義し、スタイル内の .className と一致させる必要があります。一度定義すると、HTML ドキュメント要素で何度でも再利用できます。 CSS
.menu { margin:0 auto;}
<div class="menu"></div>
CSS
div.menu { margin:0 auto;}HTML
<div class="menu"></div>
クラス セレクターは、複数のクラス名の使用をサポートします。たとえば、.menu.active セレクターは、次の要素のみを選択します。メニューとアクティブな 2 つのクラスのみが機能します
CSS
.menu { margin:0 auto;}.menu.active { font-weight:bold;}HTML
<div class="menu active"></div>
マルチクラスセレクター.className1.className2 は、CSS セレクターのブラウザーサポートに関して、IE6+
以降でのみサポートされています以下の内容を表にまとめます。id セレクター #id ID セレクターは、HTML ドキュメントに ID 名を追加し、それをスタイルの #id と照合することで、上記のクラス セレクターと非常によく似て使用されます。 しかし、この 2 つの間の最大の違いはは
です。ID セレクターはページ内の唯一の値であり、複数回使用することはできませんが、クラス セレクターは複数回再利用できます。CSS
#menu{ margin:0 auto;}HTML
<div id="menu"></div>
グループ セレクターは開発でもよく使用され、同じスタイルの要素をグループ化するために使用されます。カンマで区切られた。
a:active,a:hover { outline: 0;}
后代选择器是最常使用的选择器之一，它也被称作包含选择器，用于匹配所有被E元素包含的F元素，这里F元素不管是E元素的子元素或者是孙元素或者是更深层次的关系，都将被选中。
CSS
.menu li{ padding:0 ;}HTML
<ul id="menu"> <li> <ul> <li></li> </ul> </li></ul>
▲ 这里.menu下的li元素和嵌套的ul元素下的li的元素都会被选择，进行清楚内边距。
子元素选择器只能选择某元素的子元素，这里的F元素仅仅是E元素的子元素才可以被选中
CSS
.menu > li{ padding:0 ;}HTML
<ul id="menu"> <li> <ul> <li></li> </ul> </li></ul>
▲ 将会对.menu下的li子元素选中，但会忽视内部嵌套的li元素
相邻兄弟选择器可以选择紧接在另一元素后的元素，但是他们必须有一个相同的父元素。比如E元素和F元素具有一个相同的父元素，而且F元素在E元素后面，这样我们就可以使用相邻兄弟元素选择器来选择F元素。
CSS
h1 + p { margin-top:5px;}HTML
<div> <h1>标题</h1> <p>内容</p></div>
▲ 将会选择h1元素后面的兄弟元素p
通用兄弟元素选择器是CSS3新增加一种选择器，用于选择某元素后面的所有兄弟元素。它和相邻兄弟元素选择器用法相似，但不同于前者只是选择相邻的后一个元素，而通用兄弟元素选择器是选择所有元素。
CSS
h1 ~ p { margin-top:5px;}HTML
<div> <h1>标题</h1> <p>内容</p> <p>内容</p> <p>内容</p></div>
▲ 将会选择h1元素后面的所有的兄弟元素p
| 选择器 | 描述 | CSS版本 |
|---|---|---|
| E[attr] | 匹配所有具有attr属性的E元素 | 2.1 |
| E[attr=value] | 匹配所有attr属性等于“value”的E元素 | 2.1 |
| E[attr~=value] | 匹配所有attr属性具有多个空格分隔的值、其中一个值等于“value”的E元素 | 2.1 |
| E[attr^=value] | 匹配所有attr属性值是以val开头的E元素 | 2.1 |
| E[attr$=value] | 匹配所有attr属性值是以val结束的E元素 | 3 |
| E[attr*=value] | 匹配所有attr属性值包含有“value”的E元素 | 3 |
E[attr]属性选择器是CSS3属性选择器最简单的一种，用于选择具有att属性的E元素。
CSS
img[alt] { margin: 10px;}HTML
<img src="url" alt="" /><img src="url" />
▲ 将会选择到第一张图片，因为匹配到了alt属性，你也可以使用多属性的方式选择元素
img[src][alt] { margin: 10px;}E[attr="value"]是指定了属性值value，从而缩小了范围可以更为精确的查找到自己想要的元素。
CSS
input[type="text"] { border: 2px solid #000;}HTML
<input type="text" /><input type="submit" />
▲ 将会选择到type="text"表单元素。
如果你要根据属性值中的词列表的某个词来进行选择元素，那么就需要使用这种属性选择器：E[attr~="value"]，你会发现它和E[attr="value"]极为的相似，但是两者的区别是，属性选择器中有波浪（~）时属性值有value时就相匹配，没有波浪（~）时属性值要完全是value时才匹配。
CSS
div[class~="a"] { border: 2px solid #000;}HTML
<div class="a">1</div><div class="b">2</div><div class="a b">3</div>
▲ 将会选择到第1、3个div元素，因为匹配到了class属性，且属性值中有一个值为a
E[attr^="value"]属性选择器，指的是选择attr属性值以“value”开头的所有元素
CSS
div[class^="a"] { border: 2px solid #000;}HTML
<div class="abc">1</div><div class="acb">2</div><div class="bac">3</div>
▲ 将会选择到第1、2个div元素，因为匹配到了class属性，且属性值以a开头
E[attr$="value"]属性选择器刚好与E[attr^="value"]选择器相反，这里是选择attr属性值以"value"结尾的所有元素。
CSS
div[class$="c"] { border: 2px solid #000;}HTML
<div class="abc">1</div><div class="acb">2</div><div class="bac">3</div>
▲ 将会选择到第1、3个div元素，因为匹配到了class属性，且属性值以c结尾
E[attr*="value"]属性选择器表示的是选择attr属性值中包含"value"字符串的所有元素。
CSS
div[class*="b"] { border: 2px solid #000;}HTML
<div class="abc">1</div><div class="acb">2</div><div class="bac">3</div>
▲ 将会选择到所有的元素，因为匹配到了class属性，且属性值都包含了b
E[attr|="val"]是属性选择器中的最后一种，它被称作为特定属性选择器，这个选择器会选择attr属性值等于value或以value-开头的所有元素。
CSS
div[class|="a"] { border: 2px solid #000;}HTML
<div class="a-test">1</div><div class="b-test">2</div><div class="c-test">3</div>
▲ 将会选择第1个div元素，因为匹配到了class属性，且属性值以紧跟着"a-"的开头
一般动态伪类是在用户操作体验时触发的，最常见的就是超链接，它拥有访问前，鼠标悬停，被点击，已访问4种伪类效果。
不过在使用时的时候，一定要注意书写的顺序，不然在不同的浏览器中会带来一些意想不到的错误。
a:link {}a:visited {}a:hover {}a:active {}最可靠的记忆顺序就是遵循爱恨原则：l(link)ov(visited)e h(hover)a(active)te, 即用喜欢(love)和讨厌(hate)两个词来概括。
还有一个用户行为的动态伪类:focus，常用于表单元素（触发onfocus事件发生）时的样式。
input[type="text"]:focus{ border: 2px solid #000;}▲ 当用户聚焦到输入框内，会给输入框添加一个边框颜色。
我们把以下3种状态称作表单状态伪类，你会发现这些关键字就是HTML表单元素的属性，checked用于type="radio"和type="checkbox"够选中状态，disabled用于type="text"禁用的状态，而enabled这里表示type="text"可用的状态。
CSS
input[type="text"]:enabled { background: #fff;}input[type="text"]:disabled{ background: #eee;}input:checked + span { background: red;}HTML
<input type="text" value="可用状态" /><input type="text" value="可用状态" /><input type="text" value="禁用状态" disabled="disabled" /><input type="text" value="禁用状态" disabled="disabled" /><label><input type="radio" name="radio" /><span>黑色</span></label>
▲ 将会给可用状态的文本框设置为白色(#fff)背景，禁用状态设置为灰色(#eee)背景，如果你选中了radio，它兄弟元素span的文本会变成红色
E:first-child 和 E:last-child
E:first-child是用来选择父元素的第一个子元素E，但是它必须为父元素的第一个子元素，不然会失效，举例说明
CSS
p:first-child { color:red;}HTML
<div> <h1>标题</h1> <p>段落</p></div>
▲ 你会发现p元素的字体并没有变为红色，因为p元素前面还有个h1，它并不是父元素下的第一个子元素。
<div> <p>段落</p></div>
▲ 这时需要改变结构，效果才会正常。
而E:last-child与E:first-child选择器的作用类似，不同的是E:last-child选择是的元素的最后一个子元素。
CSS
p:last-child { color:red;}HTML
<div> <h1>标题</h1> <p>段落</p></div>
▲ 将p元素的字体设置为红色
E:nth-child(n) 和 E:nth-last-child(n)
E:nth-child(n)用于匹配父元素的第n个子元素E，假设该子元素不是E，则选择符无效。
该选择符允许使用一个乘法因子(n)来作为换算方式，如下:
li:nth-child(2) { background:#fff}▲ 选择第几个标签，“2可以是你想要的数字，最小从0开始”
li:nth-child(n+4) { background:#fff}▲ 选择大于等于4标签，“n”表示从整数
li:nth-child(-n+4) { background:#fff}▲ 选择小于等于4标签
li:nth-child(2n) { background:#fff}li:nth-child(even) { background:#fff}▲ 选择偶数标签，2n也可以是even
li:nth-child(2n-1) { background:#fff}li:nth-child(odd) { background:#fff}▲ 选择奇数标签，2n-1也可以是odd
li:nth-child(3n+1) { background:#fff}▲ 自定义选择标签，3n+1表示“隔二取一”
而E:nth-last-child(n)又要开始反着来了，CSS3选择器有正就有反
li:nth-last-child(3) { background:#fff}▲ 选择倒数第3个标签
E:first-of-type 和 E:last-of-type
E:first-of-type的使用方法类似于我们上面讲过的E:first-child,不过区别在于该选择器只会选择同类型的第一个元素，而不是父元素的第一个元素，举例说明：
CSS
p:first-of-type { color:red;}p:last-of-type { color:green;}HTML
<div> <h1>标题</h1> <p>段落</p> <p>段落</p> <div></div></div>
▲ 你会发现第一个p元素的字体被设置为红色，第二个p元素的字体被设置为绿色，这就是E:first-of-type和E:first-child不同之处。
E:nth-of-type(n) 和 E:nth-last-of-type(n)
这两个选择器的用法类似于:nth-child(n)和E:nth-last-child(n)，关于区别也是选择器只会选择同类型的兄弟元素，举个栗子
<div> <p>第1个p</p> <p>第2个p</p> <span>第1个span</span> <p>第3个p</p> <span>第2个span</span> <p>第4个p</p> <p>第5个p</p></div>
p:nth-child(3) { color:red;}▲ 如果使用:nth-child(3)你会发现第3个p元素文本并没有变成红色。就像我们之前说的，如果第n个子元素不是E，则是无效选择符，但n会递增。
p:nth-of-type(3) { color:red;}▲ 但是使用:nth-of-type(3)后会发现第3个p元素文本被设置为红色。
E:only-child 和 E:only-of-type
E:only-child用来匹配父元素仅有的一个子元素E，而E:only-of-type是表示一个元素它有很多个子元素，但是只会匹配其中只有一个子元素的元素，说起来有点绕口，来个栗子
HTML
<div> <p>段落</p></div>容器段落
容器
p:only-child { color: red;}▲ 将会对第1个div元素下的p元素文本设置成红色。
p:only-of-type { color: red;}▲ 不仅会第1个div元素下的p元素文本设置成红色，也会对第2个div元素下的p元素文本设置成红色，因为它是p元素中唯一的一个同级兄弟元素。
E:empty
E:empty是用来选择没有任何内容的元素，包括text节点，也就是意味着连一个空格都不能有
HTML
<div> <p> </p> <p></p></div>
CSS
p:empty { height: 100px;}▲ 将会对第2个空元素p设置一个高度，为什么第一个会失效呢，因为该容器里面有一个空格。
E:not(s)用于匹配不含有s选择符的元素E，说起来不好理解，那么说一个最常用的开发场景，假如我们要对ul元素下的所有li都加上一个下边框用于内容分割，但是最后一个不需要，如下：
HTML
<ul> <li>列表1</li> <li>列表2</li> <li>列表3</li> <li>列表4</li></ul>
CSS
ul li:not(:last-child) { border-bottom: 1px solid #ddd;}▲ 将会对列表中除最后一项外的所有列表项添加一条下边框
以上四个伪元素选择器在CSS2.1都已经被支持，但在CSS3中将伪元素选择符前面的单个冒号(:)修改为双冒号(::)，如E::first-letter、E::first-line、E::before、E::after，不过之前的单冒号写法也是有效的。
p::first-letter { font-weight:bold; }▲ 将会对文本块的第一个字母进行加粗
p::first-line { font-weight:bold; }▲ 将会对段落的第一行文本进行加粗
E::before和E::after是用来给元素的前面和后面差入内容，配合"content"使用，但它必须有值才能生效。
HTML
<div>me</div>
CSS
div:before{ content:'you before'; color:red;}div:after{ content:'you after'; color:green;}▲ 将会在div容器中的文本me加上添加后的内容并设置其颜色
E::placeholder用于设置对象文字占位符的样式，但是每个浏览器的CSS选择器都有所差异，需要针对每个浏览器做单独的设定，举个例子看代码
::-webkit-input-placeholder { /* WebKit browsers */ color: #999;}:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #999;}::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #999;}:-ms-input-placeholder { /* Internet Explorer 10+ */ color: #999;}E::selection用于设置文本被选择时的样式，被定义的样式属性有3个，而且使用时需要对火狐浏览器单独设置。
p::-moz-selection{ background:#000; color:#f00; text-shadow:1px 1px rgba(0,0,0,.3);}p::selection{ background:#000; color:#f00; text-shadow:1px 1px rgba(0,0,0,.3);}自从哈坤·利提出CSS建议到1996年CSS1.0问世，距离今天已经有20个年头。
不过CSS的发展一直在持续，1997年组织了专门管CSS的工作组，并在1998年发布了CSS2.0，之后发布了修订版本的CSS2.1。
CSS2.1 是我们一直再用的，也是浏览器支持较为完整的一个版本。
CSS3 的开发工作早在2001年以前就启动了，不过发展到今天，大多数的现代浏览器对CSS3属性和选择器支持良好，除了一些微软IE浏览器的较老版本。
历史前进的步伐并不会停止的，新的CSS4也正由W3C编辑团队研发中。在CSS4中引进了许多的新变化，不过基本选择器是不会有变化的，更多的还是添加一些伪类，那么接下来一起看看增加的内容。
提醒：目前这些代码功能可能还在实验规范阶段，浏览器并没有得到支持，所以并不能投入使用 ！
否定类 E:not(s,s,s..)
E:not其实在选择器已经出现在CSS3了，它用于匹配不含有s选择符的元素E，上面我们讲过它的使用方法，但是它只能用于简单选择器，伪类，标签，id，类和类选择器参数。不过在CSS4中得到了升级，具体区别
p:not(.header) { font-weight: normal; } ▲ CSS3将会对除了.header类以外的文本加粗
p:not(.header, .footer) { font-weight: normal; } ▲ CSS4通过传入一个用逗号，将会对除了.header和.footer类以外的文本加粗
关联类 E:has(s)
这个选择器通过一个参数（选择符），去匹配与某一元素对应的任意选择器，举个例子
a:has(>img) { border: 1px solid #000; } ▲ 将会对所有带有img元素的a元素加个黑色的边框
匹配任何伪类E:matches
这个伪类选择器可以规则运用在所有的选择器组中，它能帮我们简写多组选择器的规则，例子说明，
<section> <h1>标题</h1></section><nav> <h1>标题</h1></nav>
▲ 上面的两个容器都有一个h1标题元素，如何对容器下的h1`字体进行字体颜色设置呢
section h1,nav h1{ color:red;}:matches(section, nav) h1 { color: red;}▲ 这一种是传统的方法，第二种就是:matches方法。
位置伪类E:local-link和E:local-link(n)
位置伪类是访问者在你网站上的位置
/* 将会匹配 http://example.com/ link(s) */:local-link(0) { color: red;}/* 将会匹配 http://example.com/year/ link(s) */:local-link(1) { color: red;}/* 将会匹配 http://example.com/year/month/ link(s) */:local-link(2) { color: red;}表单状态伪类 E:indeterminate
checkbox中的indeterminate属性用于展示半选择状态，这个属性只是改变checkbox的外观，不对它的checked属性产生影响，CSS4选择器中也增加了半选择状态的伪类。
:indeterminate { opacity: 0.6;}表单状态伪类 E:required和 E:optional
required属性是HTML5新添加的，用于规定必需在提交之前填写输入字段
:required { border: 1px solid red;}:optional { border: 1px solid gray;}<input type="text" required="required" /><input type="text" />
▲ 第一个设置了required属性的表单元素将会设置一个红色边框，而第二个没有设置该属性的，将会设置一个灰色边框。
范围限制伪类E:in-range和E:out-of-range
用于表单字段值范围的限制，取决于表单的min和max属性
:in-range { background-color:green;}:out-of-range { background-color:red;}<input type="number" value="5" max="10" min="1" />
▲ 如果你输入的值在设置的最小和最大值范围内，那么表单背景会呈现为绿色，如果超出了限制，那么会呈现为红色。
关于更多的CSS4选择器，可参考这里的 示例介绍。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
