CSS选择器

在 CSS 中，选择器用于定位我们想要设置样式的网页上的 HTML 元素。CSS 选择器是 CSS 规则的第一部分。 它是一种元素和其他术语的模式，它们告诉浏览器应该选择哪些 HTML 元素以将规则内的 CSS 属性值应用于它们。 选择器选择的一个或多个元素称为选择器的主题。如下图中的h1和p。

• 元素选择器

h1 {
    color: red;
    font-size: 5em;
}

In the above example, the CSS rule opens with a selector . This selects the HTML element that we are going to style. In this case, we are styling level one headings h1.

• 类选择器

In your HTML document, add a class attribute to the second list item. Your list will now look like this:

<ul>
  <li>Item one</li>
  <li class="special">Item two</li>
  <li>Item <em>three</em></li>
</ul>

Copy to Clipboard

In your CSS, you can target the class of special by creating a selector that starts with a full stop character. Add the following to your CSS file:

.special {
  color: orange;
  font-weight: bold;
}

• ID选择器

#unique { }

• 属性选择器

a[title] { }

Or even make a selection based on the presence of an attribute with a particular value:

a[href="https://example.com"] { }

Selector	Example	Description
[*attr*]	a[title]	Matches elements with an attr attribute (whose name is the value in square brackets).
[*attr*=*value*]	a[href="https://example.com"]	Matches elements with an attr attribute whose value is exactly value — the string inside the quotes.
[*attr*~=*value*]	p[class~="special"]	Matches elements with an attr attribute whose value is exactly value, or contains value in its (space separated) list of values.
[*attr*|=*value*]	div[lang|="zh"]	Matches elements with an attr attribute whose value is exactly value or begins with value immediately followed by a hyphen.
[attr^=value]	li[class^="box-"]	Matches elements with an attr attribute, whose value begins with value.
[attr$=value]	li[class$="-box"]	Matches elements with an attr attribute whose value ends with value.
[attr*=value]	li[class*="box"]	Matches elements with an attr attribute whose value contains value anywhere within the string.

• By using li[class] we can match any list item with a class attribute. This matches all of the list items except the first one.

• li[class=“a”] matches a selector with a class of a, but not a selector with a class of a with another space-separated class as part of the value. It selects the second list item.

• li[class~=“a”] will match a class of a but also a value that contains the class of a as part of a whitespace-separated list. It selects the second and third list items.

• li[class^=“a”] matches any attribute value which starts with a, so matches the first two list items.

• li[class$=“a”] matches any attribute value that ends with a, so matches the first and third list item.

• li[class*=“a”] matches any attribute value where a appears anywhere in the string, so it matches all of our list items.

• 伪元素选择器

p::first-line { }

::first-line always selects the first line of text inside an element

a:hover { }其实也可以认为是伪元素选择器

• 位置选择器

// 后代 Descendant combinator

li em {
  color: rebeccapurple;
}

This selector will select any <em> element that is inside (a descendant of) an <li>.

Something else you might like to try is styling a paragraph when it comes directly after a heading at the same hierarchy level in the HTML. To do so, place a + (an adjacent sibling combinator) between the selectors.

// 儿子 Child combinator
to select only

elements that are direct children of

elements:

article > p

In this next example, we have an unordered list, nested inside of which is an ordered list. The child combinator selects only those

• elements which are direct children of a
  • , and styles them with a top border.

• <ul>
      <li>Unordered item</li>
      <li>Unordered item
          <ol>
              <li>Item 1</li>
              <li>Item 2</li>
          </ol>
      </li>
  </ul>
  

  ul > li {
      border-top: 5px solid red;
  }  
  

  

  If you remove the > that designates this as a child combinator, you end up with a descendant selector and all

• elements will get a red border.
  

• // 兄弟 Adjacent sibling combinator

  h1 + p {
    font-size: 200%;
  }
  

  // General sibling combinator
  If you want to select siblings of an element even if they are not directly adjacent, then you can use the general sibling combinator (~). To select all elements that come anywhere after

  elements, we’d do this:

  p ~ img
  

  • 状态选择器

  the CSS below styles unvisited links pink and visited links green.

  a:link {
    color: pink;
  }
  
  a:visited {
    color: green;
  }
  /* when the user hovers over it  */
  a:hover {
    text-decoration: none;
  }
  

  • 组合选择器和组合器

  You can target multiple selectors at the same time by separating the selectors with a comma. If you want all paragraphs and all list items to be green, your rule would look like this:

  p, li {
      color: green;
  }
  

  li.special {
    color: orange;
    font-weight: bold;
  }
  

  This syntax means “target any li element that has a class of special”.

  /* selects any <span> that is inside a <p>, which is inside an <article>  */
  article p span { }
  
  /* selects any <p> that comes directly after a <ul>, which comes directly after an <h1>  */
  h1 + ul + p { }
  

  body h1 + p .special {
    color: yellow;
    background-color: black;
    padding: 5px;
  }
  

  This will style any element with a class of special, which is inside a <p>, which comes just after an <h1>, which is inside a <body>.

  参考 CSS选择器

  CSS Selectors

  Level 3 Selectors specification

  CSS selectors reference