This is the 22nd day of my participation in the August More Text Challenge

Label selector

What is a 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

Note:

  • 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 it ishtmlCan be used as a tag selector

The id selector

What is an 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
  • Note:

Every HTML tag has an attribute called ID, In other words, each tag can have an ID and the name of the ID should not be repeated in the same interface. When you write an ID selector, make sure you prefix the name of the ID with # Id Cannot be the name of an HTML tag (that is, a h1 IMG INPUT…). In enterprise development, we generally don’t use ids if only for styling purposes, because in front-end development ids are usually reserved for JS

Class selectors

What is a 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: Every HTML tag has an attribute called class, That means that you can set the class name for each tag in the same interface and the class name can be repeated so make sure you put a dot in front of the class name when you write a class selector and the naming convention for the class name is the same as the naming convention for the ID name and the class name is used to style CSS in HTML You can bind multiple class names to each tag in

  • Format:

< tag name class=” class name 1 class name 2…”

The difference between id and class selectors

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 is#At the beginning
  • The class selector is.At the beginning

Id selector or Class selector in enterprise development?

  • Id is normally used for JS, so do not use id to set styles except in special cases
  • A developer’s use of classes in enterprise development can tell a lot about that developer’s skill level
  • In general, the extraction of redundant code is important in enterprise development. You can extract some common code into a class selector, and then bind the tag to the class selector

Descendant selector

What is a descendant selector?

  • Action: Finds all specific descendant tags of the specified tag and sets properties

  • 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

  • Note:

Descendant selectors have to be separated by a space and the descendant not only the son, but also the grandchild or the great-grandchild, and any descendant that ends up in the given tag is the descendant and the descendant selectors can use not only the tag name, but other selectors and the descendant selectors can continue through the space

Child element selector

What is a child element selector?

  • Action: Finds all specific direct children of the specified tag, and then sets the properties

  • Format:

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

Find all the tags with the name “tag name 1″, and then find all the elements with the direct child element name” tag name 2″ in that tag

  • Note:

Child element selectors only look for children, they don’t look for other tags that are nested and they need to be connected by a > symbol, and they can’t have Spaces and child element selectors can use not just tag names, but other selectors and child element selectors can continue through the > symbol

The difference between descendant and child selectors

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… , as long as the specific tag is placed within the specified tag is 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

Both descendant and child selectors can continue through their respective concatenation selectors 1> selectors 2> selectors 3> selectors 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

What is an intersection selector?

  • Effect: Sets the properties of the intersecting part of the selected labels
  • Format:
Selector 1 Selector 2{property: value; }Copy the code

Note:

  • There is no concatenation between the selector and the selector
  • Selectors can use label name/ID name /class name
  • Intersection selectors are only used for understanding and not much in enterprise development

Union selector

What is a union selector?

  • Effect: Sets properties for all selected labels in the selector
  • Format:
Selector 1, selector 2{property: value; }Copy the code
  • Note:

Union selectors must be used, to join selectors can use tag name/ID name/class name

Sibling selector

Sibling selector: Only sibling labels can be selected.

Adjacent sibling selector CSS2

  • Effect: Sets attributes for the tag immediately following the specified tag

  • Format:

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

Note: Adjacent sibling selectors must be joined by +. Adjacent sibling selectors can only select the label immediately following them, not separated labels

Universal sibling selector CSS3

  • Effect: Sets properties for all tags selected by all selectors following the specified selector
  • Format:
Selectors 1 to selectors 2{property: value; }Copy the code
  • Note:Universal sibling selector must be used~The connect universal sibling selector selects all the tags selected by a selector following the specified selector, whether separated or not

Sequence selector

Sequence selector is a new selector in CSS3, the most representative of which is sequence selector

What is a sequential selector? Action: Select any of the specified tags and set the properties

Format:

  • Number one in the same class

:first-child Select the first tag of the same level (jpCH89: Nth-child (n) : nth-last-Child (n) : nth-last-Child (n) :only-child :last-child (n) :last-child (n) :last-child (n) :last-child (n) :last-child (n) :last-child (n) :last-child (n) :last-child (n) :last-child (n) :last-child (n) :last-child (n) :last-child (n) :last-child (n

  • How many of the same class 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 a tag of unique type in the parent element

  • Other usage

:nth-child(odd) selects all odd numbers of the same level :nth-child(even) selects all even numbers of the same level :nth-child(xn+y) x and y are user-defined, and n is a counter, Nth-of-type (odd) Selects all odd numbers of the same type in the same level :nth-of-type(even) Selects all even numbers of the same type in the same level :nth-of-type(xn+y) X and y are user-defined. And n is a counter that increments from 0.

Property selector

What is a property selector?

  • Function: Find the corresponding label according to the specified attribute name, and then set the attribute
  • format1:

[attribute]

  • Function: Find the corresponding label according to the specified attribute name, and then set the attribute
  • format2:

[attribute=value] [attribute=”value”]

  • Function: finds the specified attribute and its value is equal tovalueAnd then set the properties
  • The most common application is to distinguish between input attributes
input[type=password]{}
<input type="text" name="" id="">
<input type="password" name="" id="">
Copy the code
  1. What does the value of an attribute start with

[attribute | = value] CSS2 (understand) [attribute ^ = value] CSS 3 (value add do not add double quotation marks are available) difference between the two: CSS2 can only find values that start with “value” and are separated by “-“. CSS3 can find values that start with “value”, whether separated by “-” or not

  1. Where does the value of an attribute end [attribute$=value] CSS3

  2. Of whether the value of an attribute contains a specific value

[attribute*=value] CSS2 [attribute*=value] CSS3 CSS2 can only find individual words that contain value, and value is separated by Spaces. CSS3 can only find words that contain value, whether they are separated or not

Wildcard selector

What is a wildcard selector?

  • Effect: Sets attributes for all labels on the current screen
  • Format:
*{property: value; }Copy the code

Note: The wildcard selector is used to set the attributes of all the labels on the interface, so 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