CSS选择器总结

目录

一、相邻兄弟选择器

概述

示例

效果

二、通用兄弟选择器

概述

示例

效果

三、属性选择器

 概述

示例

效果 

四、统配选择器（性能最低的选择器）

概述

示例

 效果

五、元素（标签）选择器

概述

示例

效果

六、ID选择器

概述

示例

效果

七、子选择器

概述

示例

效果

八、类选择器

概述

示例

效果

九、后代选择器

概述

示例

效果

十、选择器列表

概述

示例

---

一、相邻兄弟选择器

概述

相邻兄弟选择器 (+) 介于两个选择器之间，当第二个元素紧跟在第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中。

former_element + target_element { style properties }

/* 图片后面紧跟着的段落将被选中 */
img + p {
  font-style: bold;
}

示例

<!-- HTML -->
<ul>
  <li>One</li>
  <li>Two!</li>
  <li>Three</li>
</ul>

/* css */
li:first-of-type + li {
  color: red;
}

效果

二、通用兄弟选择器

概述

兄弟选择符，位置无须紧邻，只须同层级，A~B 选择A元素之后所有同层级B元素。

former_element ~ target_element { style properties }

示例

p ~ span {
  color: red;
}

<span>This is not red.</span>
<p>Here is a paragraph.</p>
<code>Here is some code.</code>
<span>And here is a span.</span>

效果

三、属性选择器

 概述

CSS 属性选择器通过已经存在的属性名或属性值匹配元素。

[attr]

表示带有以 attr 命名的属性的元素。

[attr=value]

表示带有以 attr 命名的属性，且属性值为 value 的元素。

[attr~=value]

表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少有一个值为 value。

[attr|=value]

表示带有以 attr 命名的属性的元素，属性值为“value”或是以“value-”为前缀（"-"为连字符，Unicode 编码为 U+002D）开头。典型的应用场景是用来匹配语言简写代码（如 zh-CN，zh-TW 可以用 zh 作为 value）。

[attr^=value]

表示带有以 attr 命名的属性，且属性值是以 value 开头的元素。

[attr$=value]

表示带有以 attr 命名的属性，且属性值是以 value 结尾的元素。

[attr*=value]

表示带有以 attr 命名的属性，且属性值至少包含一个 value 值的元素。

[attr operator value i]

在属性选择器的右方括号前添加一个用空格隔开的字母 i（或 I），可以在匹配属性值时忽略大小写（支持 ASCII 字符范围之内的字母）。

示例

/* CSS */

a {
  color: blue;
}

/* 以 "#" 开头的页面本地链接 */
a[href^="#"] {
  background-color: gold;
}

/* 包含 "example" 的链接 */
a[href*="example"] {
  background-color: silver;
}

/* 包含 "insensitive" 的链接,不区分大小写 */
a[href*="insensitive" i] {
  color: cyan;
}

/* 包含 "cAsE" 的链接，区分大小写 */
a[href*="cAsE" s] {
  color: pink;
}

/* 以 ".org" 结尾的链接 */
a[href$=".org"] {
  color: red;
}

<!-- HTML -->

<ul>
  <li><a href="#internal">Internal link</a></li>
  <li><a href="http://example.com">Example link</a></li>
  <li><a href="#InSensitive">Insensitive internal link</a></li>
  <li><a href="http://example.org">Example org link</a></li>
</ul>

效果 

四、统配选择器（性能最低的选择器）

概述

在CSS中,一个星号(*)就是一个通配选择器.它可以匹配任意类型的HTML元素.在配合其他简单选择器的时候,省略掉通配选择器会有同样的效果.比如,*.warning 和.warning 的效果完全相同.

在CSS3中,星号(*)可以和命名空间组合使用:

• ns|* - 会匹配ns命名空间下的所有元素
• *|* - 会匹配所有命名空间下的所有元素
• |* - 会匹配所有没有命名空间的元素

示例

/* css */

*[lang^=en]{color:green;}
*.warning {color:red;}
*#maincontent {border: 1px solid blue;}

<!-- HTML -->
 <p class="warning">
  <span lang="en-us">A green span</span> in a red paragraph.
</p>
<p id="maincontent" lang="en-gb">
  <span class="warning">A red span</span> in a green paragraph.
</p>

 效果

五、元素（标签）选择器

概述

CSS元素选择器(也称为类型选择器)通过node节点名称匹配元素. 因此,在单独使用时,寻找特定类型的元素时,元素选择器都会匹配该文档中所有此类型的元素.

元素 {样式声明 }

示例

span {
  background-color: DodgerBlue;
  color: #ffffff;
}
  <span>这里是由 span 包裹的一些文字.</span>
  <p>这里是由 p 包裹的一些文字.</p>

效果

 

六、ID选择器

概述

在一个HTML文档中,CSS ID 选择器会根据该元素的 ID 属性中的内容匹配元素,元素 ID 属性名必须与选择器中的 ID 属性名完全匹配，此条样式声明才会生效。

#id属性值 {样式声明 }

它与下面的属性选择器语句等价：

[id=id属性值] {样式声明 }

示例

/* CSS */

span#identified {
  background-color: DodgerBlue;
}

<!-- HTML -->
  <span id="identified">Here's a span with some text.</span>
  <span>Here's another.</span>

效果

七、子选择器

概述

当使用  > 选择符分隔两个元素时,它只会匹配那些作为第一个元素的直接后代(子元素)的第二元素. 与之相比, 当两个元素由 后代选择器 相连时, 它表示匹配存在的所有由第一个元素作为祖先元素(但不一定是父元素)的第二个元素, 无论它在 DOM 中"跳跃" 多少次.

元素1 > 元素2 {样式声明 }

示例

span { background-color: white; }
div > span {
  background-color: DodgerBlue;
}
<div>
  <span>Span 1. In the div.
    <span>Span 2. In the span that's in the div.</span>
  </span>
</div>
<span>Span 3. Not in a div at all</span>

效果

八、类选择器

概述

在一个HTML文档中，CSS类选择器会根据元素的类属性中的内容匹配元素。类属性被定义为一个以空格分隔的列表项，在这组类名中，必须有一项与类选择器中的类名完全匹配，此条样式声明才会生效。

.类名 {样式声明 }

它与下面的语句等价  attribute selector:

[class~=类名] {样式声明 }

示例

span.classy {
  background-color: DodgerBlue;
}
  <span class="classy">Here's a span with some text.</span>
  <span>Here's another.</span>

效果

九、后代选择器

概述

后代选择器（通常用单个空格字符表示）组合了两个选择器，如果第二个选择器匹配的元素具有与第一个选择器匹配的祖先（父母，父母的父母，父母的父母的父母等）元素，则它们将被选择。利用后代组合器的选择器称为后代选择器。

从技术上讲，后代组合器是两个选择器之间的一个或多个 CSS  空格字符-空格字符和/或四个控制字符之一：回车，换页，换行和制表符在没有其他组合器的情况下。此外，组成组合器的空白字符可以包含任意数量的CSS注释。

selector1 selector2 {
  /* property declarations */
}

示例

li {
  list-style-type: disc;
}

li li {
  list-style-type: circle;
}
<ul>
  <li>
    <div>Item 1</div>
    <ul>
      <li>Subitem A</li>
      <li>Subitem B</li>
    </ul>
  </li>
  <li>
    <div>Item 2</div>
    <ul>
      <li>Subitem A</li>
      <li>Subitem B</li>
    </ul>
  </li>
</ul>

效果

十、选择器列表

概述

CSS 选择器列表（,），常被称为并集选择器或并集组合器，选择所有能被列表中的任意一个选择器选中的节点。

element, element, element { style properties }

示例

h1, h2, h3, h4, h5, h6 { font-family: helvetica; }