Learned CSS, consolidate the foundation
The selector
Attribute selection
- [attribute] : attribute
- [attribute=”xx”] : has an element whose attribute value is xx
- [attribute~=”xx”] : The values in the attribute attribute are separated by Spaces, and one of the values is xx
- [attribute | = “x”] : match all attribute attribute has a value – separated by a hyphen, one of the elements of value starting with x
pseudo-classes
- :nth-of-type(n) : the selector matches each element of the NTH child of a specific type belonging to the parent element: p:nth-of-type(1) matches the first p element
Pseudo elements
specification
- 1. No space, applied to the element itself. 2. With Spaces: applies to first-generation child elements
- Pseudo-classes cannot be preceded by Spaces
pseudo-classes
| pseudo-classes | role |
|---|---|
| :avtive | active |
| :hover | The mouse is suspended |
| :checked | Radio or checkbox is selected |
| :disabled | Do not use |
| :empty | Without child elements, text will not work |
| :enabled | |
| :first-child | The first element |
| :first-of-type | First element (tag type) |
| :focus | Focusing on the |
| :focus-visible | |
| :invalid | Does not meet the verification |
| :last-child | |
| :last-of-type | |
| :link | Links that have not been visited |
| :visited | Links that have been visited |
| :is() | Corresponds to the parentheses |
Pseudo elements
| Pseudo elements | role |
|---|---|
| ::first-line | Element first line |
| ::first-letter | The first character of the element |
| ::selection | Text in candidate |
| ::before | |
| ::after | after |
Child parent phase
- why?
Absolute positioning is relative to the nearest located ancestor element, and if the element has no located ancestor element, its position is relative to the original containing block.
If the parent element is positioned relative to the child element, the child element is positioned relative to the parent element.