CSS base selector

CSS selector function

Locate the specified HTML page element and select the tag.

CSS base selector

“1. Label selector”

  • Tag selectors (element selectors) refer to the use of HTML tag names as selectors, classification by tag name, for a certain type of tag in the page to specify a uniform CSS style.
  • Function: you can select all types of labels.
  • Advantages: Quickly style the same type of tags in a web page
  • Disadvantages: Can’t design differentiated styles.
Attribute 1: Attribute value 1; Attribute 2: Attribute value 2; Attribute 3: Attribute value 3; }Copy the code

“2. Class selector”

  • Class selectors are identified with a “.”, followed by the class name.
  • Syntax: class name selector
. Class name {attribute 1: attribute value 1; Attribute 2: Attribute value 2; Attribute 3: Attribute value 3; }<p class='the name of the class'></p>
Copy the code

  • Advantages: You can define separate or identical styles for element objects. You can select one or more labels.

  • Note: Class selectors use “. (English dot), followed by the class name (custom, our own name)

    • Long names or phrases can be named using a dash for the selector.
    • Do not use pure numbers, Chinese and other names, try to use English letters to express.
    • Multiple class name selector: Class names are separated by Spaces.

“3. Id selector”

Id selectors are identified with #, followed by the ID name

  • The element ID value is unique and can only correspond to a specific element in the document.
Attribute 1: attribute value 1; Attribute 2: Attribute value 2; Attribute 3: Attribute value 3; }<p id="Id"></p>
Copy the code

“4. Wildcard selector”

Wildcard selectors are represented by *, which selects all labels. It is the broadest of all selectors, matching all elements on a page.

  • Pay attention to: matches all elements on the page, slowing down the page response speed. Do not use it randomly
* {properties1: attribute values1; attribute2: attribute values2; attribute3: attribute values3; }
Copy the code

For example, the following code uses a wildcard selector to define CSS styles that clear the default margins for all HTML tags.

* {
  margin: 0;                    /* Define the margin */
  padding: 0;                   /* Define the inner margin */
}
Copy the code

“5. Summary of Basic Selector”

The selector role disadvantages usage usage
Label selector You can pick all the same tags, like P Undifferentiated selection more P {color: red; }
Class selectors One or more labels can be selected You can choose according to your needs Very much .nav { color: red; }
The id selector Only one label can be selected at a time Can only be used once Not recommended #nav {color: red; }
Wildcard selector Select all labels Too many choices, some of them are not needed Not recommended * {color: red; }

“6. Team Engagement – Selector”

  1. Use wildcard selectors as little as possible*.
  2. Use ID selectors as little as possible
  3. Do not use tag selectors without concrete semantic definitions.
Recommend * / / *
.jdc {}
li {}
p{}

/* not recommended */* {}#jdc {}
div{} becausedivThere are no semantics, so we use them as little as possibleCopy the code