Talk about several selectors in CSS

today this article mainly and we talk about several selectors in CSS, the need for friends can refer to, hope to help everyone.

1. Wildcard Selector

The wildcard selector is represented by the "*" symbol, which is the widest range of all selectors and matches all elements of the page.

/* Set the color of all labels in the current page to be red */* {color:red;}

2. Tag Selector

A tag Selector is a label that selects the same name on the current page

/* Set the text color of all P tags to red */p {color:red;}

3. ID selector

The ID selector is identified with "#" followed by the ID name

{:;}

This is the title

Note that the attribute value of an ID in an HTML tag must be unique on a page (it is a specification rather than a hard rule).

ID selector naming specification

• Allows only letters (case-insensitive, strictly differentiated), Underline, number, that is, id= "head" and id= "head" do not conflict

• Only allow to start with a letter

• Name No length limit, can be 1 letters, can be many, but not too long

• Do not allow label names (not mandatory)

4. Class Selector

A class selector is a type of label that selects the same class attribute value for all labels on a page, with a. (dot) representation

{:;}

This is Heading 1.

This is Heading 2.

A label can contain multiple class selectors, separated by a space in the class tag.

. head {color:blue;}. subhead {font-size:50px;}

This is Heading 2.

5. Composite selector

5.1. Intersection Selector

The intersection selector, also known as a label-specific selector, consists of two selectors, the first of which is a tag selector, the second is a class selector or an ID selector, and no spaces between two selectors, such as

H3.special/  * need to satisfy the tag is H3 also have special class */

Or

P#one/* Need to satisfy the tag is p while ID is one */

5.2. Set selector

The set selector is a comma-connected selector, and any type of selector (including the tag Selector, class selector ID selector, and so on) can be used as part of the set selector. If some selectors define styles that are identical or partially identical, you can use the set selector to define the same CSS style for them

/* Also set the style */h3 for the tag h3 and the Element class box,. box {color:red;font-size:14px;}

5.3. Descendant selector

descendant selectors are used to select the descendants of an element or group of elements, which is written by writing the outer tag in front, the inner tag is written in the back, and the middle is separated by a space. When a tag is nested, the inner tag becomes the descendant of the outer tag (the descendants include not only the son but also the children and grandchildren).