CSS3 选择器

本文介绍 CSS 选择器及其工作原理。以下是对 CSS 中大多数选择器的说明。

以下是 CSS 示例，然后是它将作用的 HTML 代码。要亲自尝试，请创建一个 HTML 页面，放入 CSS 和相关的 HTML，然后查看结果。在大多数选择器中，我都提供了演示链接，您可以访问并查看结果。

在下面的帖子中，您可能会找到一些新的 CSS 选择器，它们是新 CSS3 的一部分。我已在我使用的最新 Chrome 版本上尝试了所有下面的示例和演示。

.Class -: 选择所有具有给定类名的元素。
CSS

.MyIntro
{
  font:15px arial,sans-serif;
  color:red;
}

用途

<div class="MyIntro">
<p>My name is Pranay Rana.</p>
<p>I am working as Soft Engg.</p>
</div>

---

#id -: 选择所有具有给定 ID 名的元素。
CSS

 #MyIntro
{
  font:15px arial,sans-serif;
  color:red;
}

用途

<div id="MyIntro">
<p>My name is Pranay Rana.</p>
<p>I am working as Soft Engg.</p>
</div>

注意：一个 HTML 页面可以有多个具有相同类名的元素，但只能有一个具有 ID 的元素。

---

HTMLElement - 选择所有具有给定名称的 HTML 元素。
CSS

 p
{
  font:15px arial,sans-serif;
  color:red;
}

用途

<div>
<p>My name is Pranay Rana.</p>
<p>I am working as Soft Engg.</p>
</div>

---

HtmlElement HtmlElemnt - 选择所有位于 html 元素内的 html 元素。
CSS

div p
{
  font:15px arial,sans-serif;
  color:red;
}

用途

<div >
<p>My name is Pranay Rana.</p>
<Span>
 <p> data </p>
</Span>
</div>
<p>I am working as Soft Engg.</p>

在此示例中，div 内的所有 p 元素都以红色突出显示，但 div 外的 p 元素不受影响。

演示

---

HtmlElement > HtmlElemnt - 选择所有作为 html 元素子元素的 html 元素。
CSS

div > p
{
  font:15px arial,sans-serif;
  color:red;
}

用途

<div >
<p>My name is Pranay Rana.</p>
<Span>
 <p> data </p>
</Span>
</div>
<p>I am working as Soft Engg.</p>

在此示例中，所有作为 div 子元素的 p 元素都以红色突出显示，但不是 div 子元素的 p 元素不受影响。

演示

---

HtmlElement + HtmlElemnt - 选择所有紧跟在 html 元素之后的 html 元素。
CSS

div + p
{
  font:15px arial,sans-serif;
  color:red;
}

用途

<div >
<p>My name is Pranay Rana.</p>
</div>
<p>I am working as Soft Engg.</p>
<p> data </p>

在此示例中，紧跟在 div 之后的 p 元素以红色突出显示，“我是一名软件工程师。”这段文字被高亮显示。

演示

---

HtmlElement ~ HtmlElemnt - 选择所有在 html 元素之前的 html 元素。
CSS

div ~ p
{
  font:15px arial,sans-serif;
  color:red;
}

用途

<div >
<p>My name is Pranay Rana.</p>
    <span>
        <p> data </p>
  </span> 
</div>
<p>I am working as Soft Engg.</p>
<p>My Demo Page.</p>

在此示例中，位于 div 之前的 p 元素以红色突出显示，“我是一名软件工程师。”和“我的演示页面。”这段文字被高亮显示。

演示

---

[attribute] - 选择所有具有给定属性的 html 元素。
CSS

[data-name]
{
  font:15px arial,sans-serif;
  color:red;
}

用途

<div >
<p data-name="pranay">My name is Pranay Rana.</p>
    <span>
        <p> data </p>
  </span> 
</div>
<p>I am working as Soft Engg.</p>
<p data-name="demo">My Demo Page.</p>

在此示例中，任何具有“data-name”属性的元素都以红色突出显示，“我的名字是 Pranay Rana。”和“我的演示页面。”这段文字被高亮显示。

演示

---

[attribute = data] - 选择所有属性值等于 data 的 html 元素。
CSS

[data-name = 'demo']
{
  font:15px arial,sans-serif;
  color:red;
}

用途

<div >
<p data-name="pranay">My name is Pranay Rana.</p>
    <span>
        <p> data </p>
  </span> 
</div>
<p>I am working as Soft Engg.</p>
<p data-name="demo">My Demo Page.</p>

在此示例中，任何具有“data-name”属性且值为“demo”的元素都以红色突出显示，“我的演示页面。”这段文字被高亮显示。

演示

---

[attribute ^= data] - 选择属性值以 data 开头的 html 元素。
CSS

[data-name ^= 'pra']
{
  font:15px arial,sans-serif;
  color:red;
}

演示

---

[attribute $= data] - 选择属性值以 data 结尾的 html 元素。
CSS

[data-name ^= 'pra']
{
  font:15px arial,sans-serif;
  color:red;
}

演示

---

[attribute *= data] - 选择属性值包含 data 的 html 元素。
CSS

[data-name *= 'rana']
{
  font:15px arial,sans-serif;
  color:red;
}

演示

---

[attribute ~= data] - 选择属性值包含 word data 的 html 元素。
CSS

[data-name ~= 'page']
{
  font:15px arial,sans-serif;
  color:red;
}

用途

<div >
<p data-name="pranay_page">My name is Pranay Rana.</p>
    <span>
        <p> data </p>
  </span> 
</div>
<p>I am working as Soft Engg.</p>
<p data-name="demo page">My Demo Page.</p>

在此示例中，任何属性“data-name”值包含单词“page”的元素都以红色突出显示，“我的演示页面。”这段文字被高亮显示。

演示

---

:first-child - 选择父元素的第一个元素（第一个子元素）。
CSS

li:first-child
{
  font:15px arial,sans-serif;
  color:red;
}

用途

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
</ul>

在此示例中，“item1”元素以红色突出显示。

演示

---

:last-child - 选择父元素的最后一个元素（最后一个子元素）。
CSS

li:last-child
{
  font:15px arial,sans-serif;
  color:red;
}

用途

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
</ul>

在此示例中，“item4”元素以红色突出显示。

演示

---

:nth-child(n) - 选择父元素的第 n 个子元素。
CSS

li:nth-child(2)
{
  font:15px arial,sans-serif;
  color:red;
}

用途

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
</ul>

在此示例中，“第二个 li”元素以红色突出显示，“item2”文本被高亮显示。

演示

---

:nth-last-child(n) - 从底部开始计算，选择父元素的倒数第 n 个子元素。
CSS

li:nth-last-child(2)
{
  font:15px arial,sans-serif;
  color:red;
}

用途

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
</ul>

在此示例中，“倒数第二个 li”元素以红色突出显示，“item3”文本被高亮显示。

演示

---

:only-child - 选择作为父元素唯一子元素的子元素。
CSS

p:only-child
{
  font:15px arial,sans-serif;
  color:red;
}

用途

<div>
    <p> pragraph 1</p>
</div> 
<div>
    <p> pragraph 2</p>
    <p> pragraph 3</p>
    <p> pragraph 4</p>
</div>

在此示例中，“段落 1”元素以红色突出显示，它是 div 元素的唯一子元素。

演示

---

:first-of-type - 选择作为父元素第一个出现的给定类型的第一个元素。
CSS

p:first-of-type
{
  font:15px arial,sans-serif;
  color:red;
}

用途

<div>
    <p> pragraph 1</p>
    <p> pragraph 2</p>
    <p> pragraph 3</p>
</div>

在此示例中，“段落 1”元素以红色突出显示。

演示

---

:last-of-type - 选择作为父元素最后一个出现的给定类型的最后一个元素。
CSS

p:last-of-type
{
  font:15px arial,sans-serif;
  color:red;
}

用途

<div>
    <p> pragraph 1</p>
    <p> pragraph 2</p>
    <p> pragraph 3</p>
</div>

在此示例中，“段落 1”元素以红色突出显示，这意味着这里的“段落 1”是 div 下的第一个 p 类型元素。

演示

---

:nth-of-type(n) - 选择作为父元素第 n 个出现的给定类型的第 n 个元素。
CSS

p:nth-of-type(2)
{
  font:15px arial,sans-serif;
  color:red;
}

用途

<div>
    <p> pragraph 1</p>
    <p> pragraph 2</p>
    <p> pragraph 3</p>
    <p> pragraph 4</p>
</div>  

在此示例中，“段落 2”元素以红色突出显示，这意味着这里的“段落 2”是 div 下的第 2 个 p 类型元素。

演示

---

:nth-last-of-type(n) - 从最后一个开始计算，选择作为父元素第 n 个出现的给定类型的倒数第 n 个元素。
CSS

p:nth-last-of-type(2)
{
  font:15px arial,sans-serif;
  color:red;
}

用途

<div>
    <p> pragraph 1</p>
    <p> pragraph 2</p>
    <p> pragraph 3</p>
    <p> pragraph 4</p>
</div>  

在此示例中，“段落 3”元素以红色突出显示，这意味着这里的“段落 3”是 div 下从最后一个开始计算的第 3 个 p 类型元素。

演示

---

:only-of-type - 选择作为父元素下给定类型的唯一元素。
CSS

p:only-of-type
{
  font:15px arial,sans-serif;
  color:red;
}

用途

<div>
    <p> pragraph 1</p>
</div> 
<div>
    <p> pragraph 2</p>
    <p> pragraph 3</p>
    <p> pragraph 4</p>
</div>  

在此示例中，“段落 1”元素以红色突出显示，因为 p 是给定类型的唯一元素。

演示

---

:empty - 选择空元素，即不包含任何子元素的元素。
CSS

div:empty
{
  width:100px;
height:20px;
background:red;
}

用途

<div></div> 
<div>
    <p> pragraph 2</p>
    <p> pragraph 3</p>
    <p> pragraph 4</p>
</div>  

在此，文档中的所有文本都以红色突出显示。

演示

---

::selection - 用选定的颜色高亮显示文本。
CSS

::selection
{
  background:green;
}

用途

<div> <p> pragraph 1</p> </div> 
   <div>
    <p> pragraph 2</p>
    <p> pragraph 3</p>
    <p> pragraph 4</p>
</div>    

在此，在文档中选择的所有文本都以绿色高亮显示。

演示

---

:not(HTMLElement) - 它不将样式应用于指定的 HTMLElement。
CSS

:not(span)
{
  font:15px arial,sans-serif;
  color:red;
}
span
{
  color:black;
}

用途

 <p> pragraph 1</p>
 <p> pragraph 2</p>
 <p> pragraph 3</p>
 <p> pragraph 4</p>
 <span> span data</span>    

在此，突出显示 p 元素中的所有文本，即不将样式应用于 span 元素。

演示

---

:enable - 选择所有启用的元素。
:disable - 选择所有禁用的元素。
CSS

:input[type="text"]:enabled
{
background:green;
}
input[type="text"]:disabled
{
background:red;
}

用途

Name: <input type="text" value="Pranay Rana" /><br>
Country: <input type="text" disabled="disabled" value="India" />    

在此，姓名以红色突出显示，国家框以绿色突出显示。

演示 

结论

这里的大多数选择器都是 CSS3 的新内容，我希望这对您有所帮助。我在这里涵盖了大多数 CSS 选择器，但如果有什么遗漏，请在下方留言。

如果您有任何疑问或喜欢这篇文章，请发表评论。如果任何链接无法正常工作或已损坏，请报告。