First, selector

CSS selectors are the first part of CSS rules

It is the way elements and other parts combine to tell the browser which HTML element should be selected as the CSS attribute value in the applied rule

The element selected by the selector is called the selector object

Let’s start with an HTML structure

<div id="box">
    <div class="one">
        <p class="one_1">
        </p>
        <p class="one_1">
        </p>
    </div>
    <div class="two"></div>
    <div class="two"></div>
    <div class="two"></div>
</div>
Copy the code

CSS property selectors are:

  • The id selector (#box) selects the element with the id box
  • Class selector (.one) that selects all elements of class one
  • Tag selector (div), selects all elements labeled as div
  • Descendant selector (#box div), selects all div elements with id inside the box element
  • Child selector (.one>one_1), selects all elements whose parent element is.one_1
  • The neighboring sibling selector (.one+.two) selects all.two elements immediately after.one
  • Group selector (div, P), select all elements of div, P

There are also some selectors that are used less frequently:

  • Pseudo class selector
    • :link: selects unaccessed links
    • :visited: Selects links that have been visited
    • :active: Selects the active link
    • :hover :hover over an element with the mouse pointer
    • : Focus: Select something with focus
    • :first-child: the first child of the parent element
  • Pseudo element selector
    • ::first-letter: Used to add a special style to the first letter of text
    • ::first-line: used to add a special style to the first line of text
    • ::before: can be used to insert some content before the element content
    • ::after: can be used to insert some content after the element content
    • :: Selection Pseudo-elements match parts of the element selected by the user.
  • Property selector
    • [attribute] Selects the element with the attribute attribute
    • [attribute=value] Selects all elements that use attribute=value
    • [attribute~=value] Selects the element whose attribute attribute contains value
    • [attribute | = value] : select the attribute properties begin with the value of the element

Second, priority

! Important > Inline > ID selector > Class selector > Tag selector

For details, please refer to developer.mozilla.org/zh-CN/docs/…

Inheritance properties

In CSS, inheritance refers to setting attributes for a parent element that are automatically owned by subsequent elements

Inheritance attributes can be divided into:

  • Font family properties
    • Font: combination font
    • Font-family: specifies the font family for the element
    • Font-weight: Sets the weight of the font
    • Font-size: Set the font size
    • Font-style: Defines the style of the font
    • Font-variant: A font that is larger or smaller
  • Text series properties
    • Text-indent: indicates the indentation of text
    • Text-align: text level
    • The line – height: line height
    • Word-spacing: Increases or decreases the spacing between words
    • Letter-spacing: Increases or decreases the spacing between characters
    • Text-transform: controls the case of text
    • Direction: Specifies the writing direction of the text
    • Color: text color
  • Element visibility
    • visibility
  • Table layout properties
    • Caption -side: Locates the table title position
    • Border-collapse: Merge table borders
    • Border-spacing: Sets the spacing between borders of adjacent cells
    • Empty-cells: The appearance and disappearance of the border of a cell
    • Table-layout: What determines the width of a table
  • A list of attributes
    • List-style: indicates the style of the dots before the text
    • List-style -position: indicates the position of the dot
    • List-style: The above attributes can be passed through this attribute collection
  • reference
    • Quotes: Sets the quote type for nested references
  • The cursor attributes
    • Cursor: Arrows can change into desired shapes

Some special points about inheritance:

  • The font color of the A label cannot be inherited
  • H1-h6 tag font size is also not inherited

No inherited properties

  • display
  • Text attributes: vertical-align, text-decoration
  • Box model attributes: width, height, inside and outside margins, borders, etc
  • Background properties: background image, color, position, etc
  • Location properties: Float, clear float, position, etc
  • Generate content properties: content, counter-reset, counter-increment
  • Outline style attributes: outline-style, outline-width, outline-color, outline
  • Page style attributes: size, page-break-before, page-break-after