マスター CSS セレクター_html/css_WEB-ITnose

CSS セレクターは、スタイル シート内の要素を一致させるときに使用するだけでなく、jQuery などのライブラリを使用するときに要素を選択するためにも使用できるため、フロントエンド開発者はそれに習熟する必要があります。一般的に使用される CSS セレクターの例をいくつか示します。

要素セレクター

E は、指定された要素名を持つすべての要素を選択します (例: p は、すべての p 要素を選択します)。

ユニバーサル セレクター

*、次のようなすべての要素を選択します。

* {  box-sizing: border-box;}

クラス セレクター

.class、ピリオドとクラス名 (.header など) で表され、ヘッダー要素を含むすべてのクラス属性を選択します。

<div class="header">会被选中</div><h2 class="header">也会被选中</h2>

マルチクラスセレクター

複数のクラスを使用して、.collapse.in などの複数のクラス名を同時に含む要素を選択します。 Collapse と in の両方のクラスを含む要素を選択します:

<div class="collapse in">会被选中</div><div class="collapse">不会被选中</div><div class="in">不会被选中</div>

IE 6ブラウザのマルチカテゴリ セレクターはサポートされていないため、マルチ カテゴリ内の以前のカテゴリは無視されます。たとえば、ここでは IE 6 は .in のみに一致します。

ID セレクター

#id は、# 記号と ID 値 (#title など) で表され、id 属性が title と等しい要素を選択します。

<h2 id="title"></h2>

Context selector

selector selector は、要素内の要素を選択するために使用されます (p 要素など)。p 要素内にあるすべての span 要素を選択します。

<p>  <span>会被选中</span>  <strong><span>同样会被选中</span></strong></p>

子要素 selector

selector > は、p > など、特定の親要素を持つ要素を選択するために使用され、親要素が p であるすべての span 要素を選択します。

<p>  <span>父元素是 p 会被选中</span>  <strong><span>父元素是 strong 不会被选中</span></strong></p>

selector + selector、特定の要素の直後の要素を選択するために使用されます。 h2 + p、隣接する h2 要素の後のすべての兄弟 p 要素を選択します。

<div>  <p>h2 之前的不会被选中</p>  <h2>示例</h2>  <p>紧邻 h2 的会被选中</p>  <p>不会被选中</p></div>

selector ~ selector、特定の要素 h2 ~ p の後の兄弟要素を選択するために使用され、すべての h2 要素の後に兄弟 p 要素を選択します。

<div>  <p>不会被选中</p>  <h2>示例</h2>  <p>h2 之后的同级 p 元素会被选中</p>  <span>示例</span>  <p>h2 之后的同级 p 元素会被选中</p></div>

[attribute] は、[title] などの特定の属性を持つすべての要素を選択するために使用され、title 属性を持つすべての要素を選択します。

<a title="link">会被选中</a><a>不会被选中</a>

[attribute="value"]、[title="link"] などの特定の属性と値を持つすべての要素を選択するために使用され、title 属性を持つすべての要素を選択し、値が link である要素。

<a title="link">会被选中</a><a title="this is a link">属性值不匹配，不会被选中</a>

[attribute~="value"]、特定の属性を持つすべての要素を選択するために使用され、属性値にはスペースで区切られた指定された単語が含まれます ([title~="link"] など)。値に link という単語が含まれる title 属性を持つすべての要素。

<a title="link">会被选中</a><a title="this is a link">属性值中包含 link 会被选中</a><a title="thisisalink">不会被选中</a><a title="other">不会被选中</a>

[attribute|="value"]、特定の属性を持つすべての要素を選択するために使用され、属性値は指定された値で始まり、単語全体であるか、その後にハイフンが続く必要があります。 [ title|="red"] は、title 属性と red で始まる値を持つすべての要素を選択します。

<a title="red">会被选中</a><a title="red-hot">会被选中</a><a title="redhot">不会被选中</a>

[attribute^="value"]、特定の属性を持つすべての要素を選択するために使用され、属性値は指定された文字列で始まります (a[href^="http://"] など)。 href 属性値が http:// 文字列で始まるすべての a 要素を選択します。

<a href="http://www.baidu.com/">会被选中</a><a href="/index">不会被选中</a>

[attribute$="value"]、特定の属性を持つすべての要素を選択するために使用され、属性値は指定された文字列で終わります (例: img[src$=".png"]、すべての画像を選択) png形式の要素。

<img alt="logo" src="/assets/logo.png"> <!-- 会被选中 --><img alt="banner" src="/assets/banner.jpg"> <!-- 不会被选中 -->

[attribute*="value"]、特定の属性を持つすべての要素を選択するために使用され、属性値には指定された文字列が含まれます ([title*="red"] など)。 title 属性と値には赤い文字列のすべての要素が含まれます。

属性セレクターの比較

擬似クラス

状態擬似クラスセレクター

状態擬似クラスセレクターは、以下に基づいて対応する要素を選択します要素の特定の状態。

:target，选择目标元素。当用户点击一个指向页面中其它元素的链接，则那个被指向的元素就是目标元素，例如：

<a href="#more">more</a> <!-- 点击这个链接之后 --><div id="more">...</div> <!-- 这个元素会被 :target 选中 -->

:enabled，选择所有已启用的元素。

<input type="text"> <!-- 会被选中 --><input disabled type="text"> <!-- 已禁用不会被选中 -->

:disabled，选择所有被禁用的元素，和 :enabled 相反，例如：

input[type="text"]:disabled {  background-color: #eee;}

给禁用的文本输入框一个灰色的背景。

<input type="text"> <!-- 不会被选中 --><input disabled type="text"> <!-- 禁用的文本框会被选中 -->

:checked，选择所有已经被勾选的单选框或者复选框，例如 input:checked。

<input checked type="radio"> <!-- 已经勾选的元素会被选中 --><input type="checkbox"> <!-- 没有勾选的不会被选中 -->

示例，结合属性选择器选择被勾选的单选框：input[type="radio"]:checked。

:lang 选择器

:lang(language)，用于选择所有带有以指定值开头的 lang 属性的元素，例如 p:lang(en)。

<p lang="en">会被选中</p><p lang="en-US">会被选中</p>

该选择器等同于 [lang|="language"]，是 [attribute|="value"] 选择器的一种特例。

结构伪类选择器

:nth-child(n)，选择同级元素中的第 n 个元素，例如 ul > li:nth-child(2)：

<ul>  <li>不会被选中</li>  <li>第二个元素会被选中</li>  <li>不会被选中</li></ul>

需要注意的是子元素的下标是从 1 开始的。除了可以指定特定的数字，也可以使用 even（偶数）, odd（奇数） 关键字，例如 ul > li:nth-child(odd)，或者使用公式，例如 ul > li:nth-child(2n+1)（n 是计数器，从 0 开始）：

<ul>  <li>第一个子元素会被选中</li>  <li>第二个子元素不会被选中</li>  <li>第三个子元素会被选中</li></ul>

:nth-last-child(n)，同上，不过是从最后一个子元素开始计数，使用该选择器可以实现隔行变色的效果。

:first-child，选择同级元素中的第一个元素，例如 ul > li:first-child：

<ul>  <li>会被选中</li>  <li>不会被选中</li>  <li>不会被选中</li></ul>

作用等同于 ul > li:nth-child(1)。

:last-child，选择同级元素中的最后一个元素，例如 ul > li:last-child：

<ul>  <li>不会被选中</li>  <li>不会被选中</li>  <li>会被选中</li></ul>

作用等同于 ul > li:nth-last-child(1)。

:only-child，用于选择父元素下唯一的子元素，例如 ul > li:only-child：

<ul>  <li>唯一子元素，会被选中</li></ul><ul>  <li>不会被选中</li>  <li>不会被选中</li></ul>

:nth-of-type(n)，选择同级元素中的第 n 个同类元素，和 :nth-child 类似，例如 .box > :nth-of-type(2)：

<div class="box">  <p>第一个 p 子元素，不会被选中</p>  <span>第一个 span 子元素，不会被选中</span>  <p>第二个 p 子元素，会被选中</p>  <span>第二个 span 子元素，会被选中</span></div>

:nth-last-of-type，同上，不过是从最后一个同类子元素开始计数。

:first-of-type，选择同级元素中的第一个同类元素，等同于 :nth-of-type(1)。

:last-of-type，选择同级元素中的最后一个同类元素，等同于 nth-last-of-type(1)。

:only-of-type，用于选择父元素下特定类型的唯一子元素，例如 .box > :only-of-type：

<div class="box">  <p>不会被选中</p>  <em>唯一的 em 子元素会被选中</em>  <p>不会被选中</p>  <span>唯一的 span 子元素会被选中</span></div>

:root 选择器

:root，选择文档的根元素，对于 HTML 文档就是 html 元素。

:empty 伪类选择器

:empty，选择没有子元素的元素（包括文本节点），例如：

p:empty {  display: none;}

表示隐藏没有内容的 p 元素，

<p>非空不会被选中</p><p></p> <!-- 为空会被选中 -->

否定伪类选择器

:not(selector)，选择所有不匹配选择器的元素，例如 :not(p)，选择所有不为 p 的元素：

<p>不会被选中</p><span>会被选中</span>

要选择既不是 p 也不是 span 的元素可以多次使用否定伪类选择器，例如 :not(p):not(span)，需要同时满足条件的元素才会被选中。

CSS 4 否定伪类选择器支持传入参数列表，比如 :not(p, span)。

伪元素

伪元素选择器用于选择那些若有实无的元素。在 CSS3 中，伪元素的写法为两个冒号，为了兼容旧浏览器，也可以使用一个冒号。

首字母伪元素选择器

::first-letter，选择元素的第一个字母，例如：

p::first-letter {  font-size: 300%;}

段落元素的首字母放大。

首行伪元素选择器

::first-line，选择元素的第一行，例如：

p::first-line {  text-decoration: underline;}

段落元素的首行添加下划线。

::before/::after 伪元素选择器

::before，选择在元素之前插入的生成内容。

::after，选择在元素之后插入的生成内容，例如：

<blockquote>Lorem ipsum dolor sit amet.</blockquote>

和样式：

blockquote::before {  content: "\0022";}blockquote::after {  content: "\0022";}

::selection 伪元素选择器

::selection，选择用户选取的内容，例如：

::selection {  background: #b3d4fc;  text-shadow: none;}

参考资料