Community Learn Tools Library Leisure
search
English
Home > Web Front-end > HTML Tutorial > body text

CSS selector notes

WBOY
Release： 2016-10-15 10:32:03
Original
1003 people have browsed it

1. Element selector

Serial number Selector Meaning
1. * Universal element selector, matches any element
2. E Tag selector, matches all elements using the E tag
3. .info class selector, matches all elements containing info in the class attribute
4. #footer id selector, matches all elements with id attribute equal to footer

1. *

<span style="color: #800000;">* </span>{<span style="color: #ff0000;">
  margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
  padding</span>:<span style="color: #0000ff;"> 0</span>;
}
Copy after login

Before we look at more advanced selectors, we should get to know the well-known clear selector. The asterisk will select every element on the page. Many developers use it to clear `margin` and `padding`. Of course you can use this when practicing, but I don't recommend using it in a production environment. It adds a lot of unnecessary stuff to the browser.
`*` can also be used to select all child elements of an element. 

<span style="color: #800000;">#container * </span>{<span style="color: #ff0000;">
  border</span>:<span style="color: #0000ff;"> 1px solid black</span>;
}
Copy after login

It will select all elements under `#container`.

2.E

<span style="color: #800000;">a </span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;"> red</span>; }<span style="color: #800000;">
ul </span>{<span style="color: #ff0000;"> margin-left</span>:<span style="color: #0000ff;"> 0</span>; }
Copy after login

If you want to locate all tags on the page, instead of using `id` or 'class', use the tag selector directly.

3. .info

<span style="color: #800000;">.error </span>{<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> red</span>;
}
Copy after login

This is a `class` selector. It differs from the `id` selector in that it can target multiple elements. You can use `class` when you want to style multiple elements. When you want to modify a specific element, use `id` to locate it.

4. #footer

<span style="color: #800000;">#container </span>{<span style="color: #ff0000;">
   width</span>:<span style="color: #0000ff;"> 960px</span>;<span style="color: #ff0000;">
   margin</span>:<span style="color: #0000ff;"> auto</span>;
}
Copy after login

Use `#` in the selector to locate an element by id.

2. Multi-element combination selector

Serial number Selector Meaning
5. E,F Multi-element selector, matches all E elements or F elements at the same time, separated by commas between E and F
6. E F The descendant element selector matches all F elements that are descendants of the E element. E and F are separated by spaces
7. E > F Child element selector, matches all child elements F of E element
8. E + F Adjacent element selector, matches all sibling elements F immediately following the E element
9. E~F Match any sibling F element after the E element

5. E,F

<span style="color: #800000;">a,li </span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;"> red</span>; }
Copy after login

Match all a elements and li elements

6. E F

<span style="color: #800000;">li a </span>{<span style="color: #ff0000;">
  text-decoration</span>:<span style="color: #0000ff;"> none</span>;
}
Copy after login

Only match multiple a elements after li (including grandchildren)

7. E > F

<span style="color: #800000;">div#container > ul </span>{<span style="color: #ff0000;">
  border</span>:<span style="color: #0000ff;"> 1px solid black</span>;
}
Copy after login

Only matches multiple a elements after li (excluding grandchildren). The difference between `E F` and `E > F` is that the latter command selects its direct child elements. Look at the example below: 

<span style="color: #008080;"> 1</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="container"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 2</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 3</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> List Item<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 4</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 5</span>         <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> Child <span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 6</span>     <span style="color: #0000ff;"></</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 7</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> List Item <span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 8</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> List Item <span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 9</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> List Item <span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">10</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">11</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
Copy after login

`#container > ul` will only select all direct `ul` elements under the `div` with `id` as 'container'. It will not locate the `ul` element under the first `li`.

8. E + F

<span style="color: #800000;">ul + p </span>{<span style="color: #ff0000;">
   color</span>:<span style="color: #0000ff;"> red</span>;
}
Copy after login

This is called adjacent selector. It directs the selection of the immediate successor elements of the specified element. The above example selects the first paragraph after all `ul` tags and sets their color to red.

9. E~F

<span style="color: #800000;">ul ~ p </span>{<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> red</span>;
}
Copy after login

`ul + p` selector will only select those elements that immediately follow the specified element. This selector will select all matching elements following the target element.

3. Relationship selector

Serial number Selector Meaning
10. E[att] Matches all E elements with att attribute, regardless of its value. (Note: E can be omitted here, such as "[cheacked]". The same below.)
11. E[att=val] Match all E elements whose att attribute is equal to "val"
12. E[att~=val] Match all E elements whose att attribute has multiple space-separated values, one of which is equal to "val"
13. E[att|=val] Matches all E elements with the att attribute and the attribute value is a string starting with val and separated by the connector "-".
14. E[att^="val"] Match all elements whose att attribute starts with "val"
15. E[att$="val"] Match all elements whose att attribute ends with "val"
16. E[att*="val"] Match all elements whose att attribute contains the string "val"

10. E[att]

匹配所有具有att属性的E元素，不考虑它的值。

<span style="color: #008080;"> 1</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 2</span> <span style="background-color: #f5f5f5; color: #800000;">a[class]</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">#f00</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #008080;"> 3</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 4</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 5</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 6</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 7</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="?"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="external"</span><span style="color: #0000ff;">></span>外部链接<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 8</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="?"</span><span style="color: #0000ff;">></span>内部链接<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 9</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="?"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="external"</span><span style="color: #0000ff;">></span>外部链接<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">10</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="?"</span><span style="color: #0000ff;">></span>内部链接<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">11</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">12</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
Copy after login

上面的这个例子中，只会选择有class属性的元素。那些没有此属性的将不会被这个代码修饰。

11. E[att=val]

匹配所有att属性等于"val"的E元素

<span style="color: #800000;">a[class="external"]</span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">#f00</span>;}
Copy after login

上面这片代码将会把`class`属性值为`external`的标签设置为红色，而其他标签则不受影响。

12. E[att~=val]

匹配所有att属性具有多个空格分隔的值、其中一个值等于"val"的E元素

<span style="color: #0000ff;"><</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
a[class~="external"]</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">#f00</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="?"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="external txt"</span><span style="color: #0000ff;">></span>外部链接<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="?"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="txt"</span><span style="color: #0000ff;">></span>内部链接<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="?"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="external txt"</span><span style="color: #0000ff;">></span>外部链接<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="?"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="txt"</span><span style="color: #0000ff;">></span>内部链接<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
Copy after login

这个`~`符号可以定位那些某属性值是空格分隔多值的标签（因此只有外部链接是红色字体）。

13. E[att|=val]

选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。

<span style="color: #008080;"> 1</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 2</span> <span style="background-color: #f5f5f5; color: #800000;">li[class|="test3"]</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">#f00</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #008080;"> 3</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 4</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 5</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 6</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 7</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="test1-abc"</span><span style="color: #0000ff;">></span>列表项目1<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 8</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="test2-abc"</span><span style="color: #0000ff;">></span>列表项目2<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 9</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="test3-abc"</span><span style="color: #0000ff;">></span>列表项目3<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">10</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="test4-abc"</span><span style="color: #0000ff;">></span>列表项目4<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">11</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="test5-abc"</span><span style="color: #0000ff;">></span>列表项目5<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">12</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="test6-abc"</span><span style="color: #0000ff;">></span>列表项目6<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">13</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">14</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
Copy after login

因此只有项目3为红色。

14. E[att^="val"]

选择具有att属性且属性值为以val开头的字符串的E元素。 
<span style="color: #008080;"> 1</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 2</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 3</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="abc"</span><span style="color: #0000ff;">></span>列表项目1<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 4</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="acb"</span><span style="color: #0000ff;">></span>列表项目2<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 5</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="bac"</span><span style="color: #0000ff;">></span>列表项目3<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 6</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="bca"</span><span style="color: #0000ff;">></span>列表项目4<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 7</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="cab"</span><span style="color: #0000ff;">></span>列表项目5<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 8</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="cba"</span><span style="color: #0000ff;">></span>列表项目6<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 9</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">10</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
Copy after login
<span style="color: #800000;">li[class^="a"]</span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">#f00</span>;}
Copy after login

选择具有class属性且属性值为以a开头的字符串的E元素(因此只有项目1、2为红色)。

15. E[att$="val"]

匹配所有att属性以"val"结尾的元素

<span style="color: #800000;">li[class$="a"]</span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">#f00</span>;}
Copy after login

选择具有class属性且属性值为以a结尾的字符串的E元素(项目4、6为红色)。

16. E[att*="val"]

匹配所有att属性包含"val"字符串的元素

<span style="color: #800000;">li[class*="a"]</span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">#f00</span>;}
Copy after login

因为class的属性中都含有字母a所以结果均为红色。

 四、伪类选择器

17. E:link 匹配所有未被点击的链接
18. E:visited 匹配所有已被点击的链接
19. E:hover 匹配鼠标悬停其上的E元素
20. E:active 匹配鼠标已经其上按下、还没有释放的E元素
21. E:first-child 匹配父元素的第一个子元素E
22. E:last-child 匹配父元素的最后一个子元素E
23. E:only-child 匹配父元素仅有的一个子元素E
24. E:nth-child(n) 匹配父元素的第n个子元素E
25. E:nth-last-child(n) 匹配父元素的倒数第n个子元素E
26. E:first-of-type 匹配同类型中的第一个同级兄弟元素E
27. E:last-of-type 匹配同类型中的最后一个同级兄弟元素E
28. E:only-of-type 匹配同类型中的唯一的一个同级兄弟元素E
29. E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E
30. E:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素E

17. E:link

设置超链接a在未被访问前的样式。

<span style="color: #008080;">1</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">2</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="?"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="external"</span><span style="color: #0000ff;">></span>外部链接<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">3</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="?"</span><span style="color: #0000ff;">></span>内部链接<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">4</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="?"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="external"</span><span style="color: #0000ff;">></span>外部链接<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">5</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="?"</span><span style="color: #0000ff;">></span>内部链接<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">6</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
Copy after login
<span style="color: #800000;">a:link</span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">#03c</span>;}<span style="color: #800000;">
.external:link</span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">#f00</span>;}
Copy after login

运行结果：外部链接为红色；内部链接为蓝色

18. E:visited

设置超链接a在其链接地址已被访问过时的样式。

19. E:hover

设置元素在其鼠标悬停时的样式。

20. E:active

设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。

21. E:first-child

匹配父元素的第一个子元素E。

<span style="color: #008080;">1</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">2</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">3</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>test1<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">4</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>test2<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">5</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>test3<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">6</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>test4<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">7</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>test5<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">8</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">9</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
Copy after login
<span style="color: #800000;">li:first-child</span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">#f00</span>;}
Copy after login

结果只有列表第一条信息test1为红色

22. E:last-child

匹配父元素的最后一个子元素E。

<span style="color: #800000;">li:last-child</span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">#f00</span>;}
Copy after login

结果只有列表最后一条信息test5为红色

23. E:only-child

匹配父元素仅有的一个子元素E。

<span style="color: #008080;">1</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">2</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>test1<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">3</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">4</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">5</span>    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>test2<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">6</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>test3<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">7</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>test4<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">8</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
Copy after login
<span style="color: #800000;">li:only-child</span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">#f00</span>;}
Copy after login

结果只有列表test1为红色

24. E:nth-child(n)

匹配父元素的第n个子元素E。

<span style="color: #800000;">li:nth-child(3)</span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">#f00</span>;}
Copy after login

结果只有列表test3为红色

25. E:nth-last-child(n)

匹配父元素的倒数第n个子元素E。

<span style="color: #800000;">li:nth-last-child(3)</span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">#f00</span>;}
Copy after login

结果只有列表test3为红色

26. E:first-of-type

匹配同类型中的第一个同级兄弟元素E。

<span style="color: #008080;">1</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="test"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">2</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">div</span><span style="color: #0000ff;">><</span><span style="color: #800000;">b</span><span style="color: #0000ff;">></span>我是一个div元素<span style="color: #0000ff;"></</span><span style="color: #800000;">b</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">3</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>这是段落1<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">4</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>这是段落2<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">5</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>这是段落3<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">6</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>这是段落4<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">7</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>这是段落5<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">8</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
Copy after login
<span style="color: #800000;">p:first-of-type</span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">#f00</span>;}
Copy after login

结果只有这是段落1为红色。

27. E:last-of-type

匹配同类型中的最后一个同级兄弟元素E。

<span style="color: #800000;">p:last-of-type</span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">#f00</span>;}
Copy after login

结果只有这是段落5为红色。

28. E:only-of-type

匹配同类型中的唯一的一个同级兄弟元素E。 

<span style="color: #800000;">b:only-of-type</span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">f00</span>;}
Copy after login

结果只有我是一个div元素为红色。

29. E:nth-of-type(n)

匹配同类型中的第n个同级兄弟元素E,n 可以代表数字也可以代表字母。 

<span style="color: #800000;">p:nth-of-type(2)</span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">#f00</span>;}
Copy after login

结果只有这是段落2为红色。

n为odd时表示奇数；n为even表示偶数；

<span style="color: #800000;">p:nth-of-type(odd)</span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">#f00</span>;}
Copy after login

结果：段落1、3、5显示为红色。

<span style="color: #800000;">p:nth-of-type(even)</span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">#f00</span>;}
Copy after login

结果：段落2、4显示为红色。

30. E:nth-last-of-type(n)

匹配同类型中的倒数第n个同级兄弟元素E，n 可以代表数字也可以代表字母。。 

<span style="color: #800000;">p:nth-last-of-type(2)</span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">#f00</span>;}
Copy after login

结果：段落4显示为红色。

n为odd时表示奇数；n为even表示偶数；

<span style="color: #800000;">p:nth-last-of-type(odd)</span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">#f00</span>;}
Copy after login

结果：段落1、3、5显示为红色。

<span style="color: #800000;">p:nth-last-of-type(even)</span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">#f00</span>;}
Copy after login

结果：段落2、4显示为红色。

Related labels：
CSS选择器笔记
source：php.cn
Previous article：Let’s talk about some interesting CSS topics (8)-Pure CSS navigation bar Tab switching solution Next article：How much do you know about css3 attribute column
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Use JS to control playback quality Is there any way to control the playback quality of a video using Javascript? More precise...
From 2024-04-04 00:21:55
0
1
384
How to use CSS selectors to target div elements containing specific attributes or tags? I'm working on a POS system that generates a website. Most of the code is proprietary so I...
From 2024-04-03 22:25:59
0
1
277
How to check width property of CSS class selector? An example is .label{} Here is my comment on the css code, where I chose a width of 270 for the .label: If you in...
From 2024-04-01 17:45:11
0
1
338
Flex spacing broken when trying to overflow HTML <pre><code> tag instead of wrapping I apply CSS to the precode selector in order to make styled code blocks like you would see...
From 2024-04-01 12:22:06
0
1
296
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template