> For the complete documentation index, see [llms.txt](https://gzqsjtu.gitbook.io/workspace/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://gzqsjtu.gitbook.io/workspace/css/selector.md).

# Selector

![](https://4116032991-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LgnugJ0SdX2tMAwP37V%2F-Lhh6SPpD8GePSbPj5Q5%2F-Lhh7V3Md1wF4o1kyt6r%2Fimage.png?alt=media\&token=55207d5c-3aac-4011-a963-602662c456a9)

![](https://4116032991-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LgnugJ0SdX2tMAwP37V%2F-Lhh6SPpD8GePSbPj5Q5%2F-Lhh7bEp1GjnWkNtBmOu%2Fimage.png?alt=media\&token=6773bdb3-4c85-4d59-8071-babc901109cf)

![](https://4116032991-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LgnugJ0SdX2tMAwP37V%2F-Lhh6SPpD8GePSbPj5Q5%2F-Lhh7gBnz8N03a6otyTh%2Fimage.png?alt=media\&token=9c4a5f78-d7e8-4cc1-9004-e01bee961070)

**:first-child**

The `:checked` selector matches every checked \<input> element (only for radio buttons and checkboxes) and \<option> element.

The `:root` selector matches the document's root element. In HTML, the root element is always the html element.

## Specificity

### inherits from its ancestor  < Directly targeted elements .    all the time

![](https://4116032991-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LgnugJ0SdX2tMAwP37V%2F-MEVkC2cTShyNF6TrGpx%2F-MEVlRHcB5xde0aNIswj%2Fimage.png?alt=media\&token=dba1b1a4-c797-4af4-b957-02cd2f58cf7e)

| `<span style="color:red;">` | `#text{color:red;}` | `.text{color:red;} [type="text"]{color:red}` | `span{color:red;}` |
| --------------------------- | ------------------- | -------------------------------------------- | ------------------ |

| x,0,0,0 | 0,x,0,0 | 0,0,x,0 | 0,0,0,x |
| ------- | ------- | ------- | ------- |

!important    10000

1. [Type selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Type_selectors) (e.g., `h1`) and pseudo-elements (e.g., `::before`).
2. [Class selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors) (e.g., `.example`), attributes selectors (e.g., `[type="radio"]`) and pseudo-classes (e.g., `:hover`).
3. [ID selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/ID_selectors) (e.g., `#example`).

* 继承不如指定
* !important > 内联 > ID > Class|属性|伪类 Pseudo-classes | Pseudo-elements> 元素选择器
* :link、:visited、:hover、:active按照LVHA（LoVe HAte）顺序定义

## Specificity Rules

* Equal specificity: the latest rule counts
* ID selectors have a higher specificity than attribute selectors
* Contextual selectors are more specific than a single element selector
* A class selector beats any number of element selectors
* The universal selector and inherited values have a specificity of 0

inline style > ID selector > class, attribute and pseudo-class selector > tag and pseudo-element selector