The selector

Tag selectors, id selectors, class selectors, descendant selectors, child selector, intersection selector, and set the selector, brothers selector, pseudo class selectors, sequence dynamic pseudo class selector, a selector, dynamic pseudo class selector tags, no pseudo class selectors, pseudo element selector, attribute selectors, wildcard selector, combination selector

First, label selector

Function: According to the specified label name, find all the labels in the current interface, and then set the properties

Format:

Tag name {attribute: value; }Copy the code

【 Attention 】 :

  • The label selector selects all the labels in the current interface, not a single label
  • The tag selector selects the tag no matter how deep it is hidden
  • As long as is in the HTML tag can be used as a tag selector (h/a/img/ul/ol/dl/input…).

Id selector

Function: Find the corresponding label based on the specified ID name, and then set the property

Format:

#id name {attribute: value; }Copy the code

【 Attention 】 :

  • Each HTML tag has an attribute called ID, which means that each tag can set an ID
  • The id name cannot be repeated on the same interface
  • Be sure to prefix the ID name with # when writing an ID selector
  • The name of the ID is canonical
    1. The ID can contain only letters, digits, and underscores (_), including A-z 0-9
    2. The ID name cannot start with a number
    3. Id The id cannot be the name of an HTML tag. It cannot be a H1 IMG input…
    4. In enterprise development, we generally don’t use ids if only for styling purposes, because ID is reserved for JS

Class selector

Function: Find the corresponding label based on the specified class name, and then set the property

Format:

. Class name {attribute: value; }Copy the code

【 note 】

  • Each HTML tag has an attribute called class, which means that each tag can have a class name
  • The class name can be repeated in the same interface
  • Be sure to prefix the class name when writing a class selector.
  • The naming conventions for class names are the same as for ID names
  • Class names are specifically used to style CSS
  • In HTML, each tag can be bound to multiple class names at the same time, in the following format:< tag name class=" class name 1 class name 2..." >
What’s the difference between id and class?
  • Id is equivalent to a person’s ID card can not be repeated
  • Class is equivalent to a person whose name can be repeated
  • Only one ID name can be bound to an HTML tag
  • An HTML tag can bind multiple class names
Is an ID selector different from a class selector?
  • The ID selector starts with #
  • The class selector is. At the beginning

4. Descendant selector

Finds all specific descendant tags of the specified tag and sets the property format:

Tag Name 1 Tag Name 2{Attribute: value; }Copy the code

First find all the tags named “tag name 1″, then find all the tags named” tag name 2″ under this tag, then set the properties

【 Attention 】 :

  • Descendant selectors must be separated by Spaces
  • Descendants are not only sons, but also grandchildren/great-grandchildren, as long as they are eventually placed on the specified label
  • Descendant selectors can use not only tag names but other selectors as well
  • Descendant selectors can continue through whitespace

Child element selectors

Finds all specific direct children of the specified tag, and formats the attribute:

Tag name 1> Tag name 2{attribute: value; }Copy the code

【 Attention 】 :

  • The child element selector looks only for the child, not for other nested tags
  • Child element selectors need to be concatenated with > and without Spaces
  • Child element selectors can use other selectors as well as tag names
  • Child element selectors can be continued through the > symbol
What’s the difference between a descendant selector and a child element selector?
  • Descendant selectors use Spaces as a concatenation
  • The child element selector uses > as a concatenation
  • The descendant selector will select all of the specified descendant tags in the specified tag, that is, will select the son/grandson… Any custom tag that is placed in the specified TAB will be selected
  • The child element selector will only select all of the specified direct tags in the specified tag, that is, only the specified child tag will be selected
Common ground between descendant selectors and child element selectors
  • Descendant selectors and child element selectors can both use tag names/ID names /class names as selectors
  • Descendant selectors and child element selectors can both continue through their respective concatenation, selector 1> selector 2> selector 3> selector 4{}
How to choose in enterprise development
  • If you want to select all specific labels within the specified label, use the descendant selector
  • If you want to select only all of the specific child tags in the specified tag, use the child element selector

Intersection selector

Selector 1 selector 2{Property: value; } Note: 1. There is no concatenation between the selector and the selector. The selector can use tag name/ID name /class name. 3. Intersection selector is only used for understanding, not much in enterprise development

Union selector

What it does: Format attributes for all the selected labels:

Selector 1, selector 2{property: value; }Copy the code

【 Attention 】 :

  • The union selector must be used to join
  • Selectors can use label name/ID name /class name

Eight, brother selector

1. Adjacent sibling selector CSS2

Does: format the attributes of the selected tag immediately following the specified selector:

Selector 1+ selector 2{property: value; }Copy the code

【 Attention 】 :

  • Adjacent sibling selectors must be joined by +
  • Adjacent sibling selectors can only select the label immediately following them, not the separated label
2. Universal sibling selector CSS3

Does: format all tags selected by all selectors following the specified selector:

Selectors 1 to selectors 2{property: value; }Copy the code

【 Attention 】 :

  • Universal sibling selectors must be connected with ~
  • The universal sibling selector selects all the labels selected by a selector following the specified selector, whether separated or not

Pseudoclass selector

Pseudo-classes start with “:” and are used after selectors to indicate that an element should be selected in a particular state

Order selector (structure pseudo-class selector)

The most representative new selector in CSS3 is the sequential selector

1. Rank in the same rank
:first-child Selects the first label of the same level :last-child Selects the last label of the same level :nth-child(n) Selects the NTH label of the same level: nth-Child (odd) Selects all odd numbers of the same level :nth-child(even) Select all even numbers of the same level :nth-child(xn+y) X and y are user-defined, and n is a counter incrementing from 0. For example, (3n+1) corresponds to 1,4,7..... :nth-last-child(n) Selects the NTH last tag of the same level :only-child Selects the only child element E of the parent element. This parameter is valid only if there is only one child elementCopy the code

[Note] : Do not distinguish between types

2. The number of the same level and type
:first-of-type Select the first tag of the same type in the same level :last-of-type Select the last tag of the same type in the same level: nTH-of-type (n) Select the NTH tag of the same type in the same level :nth-last-of-type(n) select the first tag of the same type in the same level :nth-last-of-type(n) Select the NTH last tag of the same type in the same level :only-of-type Select the only child element of a particular type of the parent elementCopy the code

Dynamic pseudo-class selectors

E:link selector: selects matching E elements that are defined by hyperlinks and have not been accessed. Often used on link tracing points E:visited: Selects the matched E element that has been hyperlinked and visited. E: Active (user action selector) : Selects the matching E element and the matching element is active. E:hover (user action selector) : selects the matching E element and hover the user's mouse over it. IE6 and below only support A: HoverCopy the code

Pseudoclass selector for a tag

Through our observation, it is found that label A has a certain state
  1. Default state, never accessed
  2. The accessed state
  3. Hold down the mouse
  4. The mouse is hovering over the A label

format

: Link Modifies styles in the state never visited :visited Modifies styles in the state visited: Hover modifies styles in the state hovering over a tag :active Modifies styles in the state long pressing the mouseCopy the code

【 Attention 】 :

  1. The pseudo-class selector for the A tag can appear either alone or together
  2. The pseudo-class selectors of the A tag have strict order requirements if they appear together
  3. Default state :link-> visited state :visited-> Mouse hover state :active, the order of writing must comply with the principle of love hate
  4. Abbreviate if the style of the default state is the same as that of the accessed state
*/ a{color: green; */ /*a:link{*/ /*color: green; */ /*}*/ /*a:visited{*/ /*color: green; *} / / * * /Copy the code

Negate pseudo-class selectors

What it does: Removes selected elements from a selected element

Format: :not(selector)

Such as:

p:not(.hello){ 
    background-color: red; 
 }
Copy the code

False element selector

Purpose: Use pseudo-elements to represent special positions within an element

::after refers to the last part of the element and should be used in conjunction with the content style. You can add some content to the position after by using the content ::before refers to the first part of the element and should be used in conjunction with the content style. Content adds something to the before position ::first-letter sets a style for the first character ::first-line sets a style for the first lineCopy the code

15. Property selector

Function: Finds the corresponding label based on the specified attribute name and sets the attribute format: [attribute], [attribute=value] Function: Find the tag that has a specified attribute equal to value, and set the attribute. The most common application is to distinguish between the input attribute

input[type=password]{}
input[name^=user]{}
<input type="text" name="user" id="">
<input type="password" name="" id="">
Copy the code
What does the value of an attribute start with
  • [attribute|=value] CSS2
  • [attribute^=value] CSS3
The difference between the two:
  • Only the beginning of value can be found in CSS2, and value is separated by – from everything else
  • CSS3 can find all entries that start with value, whether separated by – or not

Wildcard selector

Set attributes for all the tags in the current interface, clear the HTML style format:

*{property: value; }Copy the code

[Note] : Since the wildcard selector is to set the attributes of all the labels on the interface, all the labels will be traversed before setting. If there are too many labels on the current interface, the performance will be poor. Therefore, the wildcard selector is generally not used in enterprise development

Combinatorial selectors

Function: Multiple selectors used in combination. For example, “div.one” represents a div element whose class is one