CSS selector usage summary, css selector Summary
1. Element Selector
Definition: You can switch a style from one element to another.
Example: If you set an HTML style, the selector is usually an HTML element, such as p, h1, em, a, or even html.
html {color:black;}h1 {color:blue;}h2 {color:silver;}
2. Type Selector
Definition: The type selector matches the name of the element type in the Document Language, and matches every instance of the element type in the document tree.
Example: The following rule matches all h1 elements in the document tree.
h1 {font-family: sans-serif;}
3. wildcard Selector
Definition: wildcard selector, displayed as an asterisk (*). This selector can match any element, just like a wildcard.
Example: The following rules can make every element in the document red.
* {color:red;}
4. ID Selector
Definition: It is similar to a class selector, but there must be a # sign, also known as a checker or well number.
Instance:
*#intro {font-weight:bold;}
<p id="intro">This is a paragraph of introduction.</p>
5. Include Selector
Definition: used to select the descendant element of an element in the document tree.
Instance
<body>
<p>Lorem ipsum dolor <em>sit</em> amet.</p>
</body>
6. Pseudo-class selector
Definition: allows us to format entries that are not in the document tree.
Instance:
The pseudo-class selector can be used to format different states in 4 of the <a> element in different ways.
◆ A: link is used as the selector for unaccessed links.
a:link{color:red;}
◆ A: visited is used as the selector of the accessed link.
a:visite{color:blue}
◆ A: Specifies the Selector Used by hover to place the cursor over the link.
a:hover{color:yellow}
◆ A: The Selector Used by the active node to obtain the link of the Focus (for example, click.
a:active{color:pink}
7. pseudo element Selector
Definition: allows us to format information not found in the document tree.
The browser supports two types: first-line and first-letter.
First-line is used for the first line of an element.
Instance:
P: first-line {font-weight: bolder}
First-letter is used for the first letter of an element.
Instance:
P: first-letter {font-size: 20px ;}
Summary:
Basic selector:
1. element (TAG) selector: directly acts on the tag name.
2. class selector: the label must have the class attribute and must be added before the class attribute value.
3. id selector: The tag must have the id attribute, and # Must be added before the id attribute value #.
4. Attribute selector: use [] to enclose the attribute/attribute = "value" of a tag.
5. wildcard selector: for example :*{...}.
Compound selector:
1. Intersection selector: use two or more selectors to write together (div. class {...}).
2. union selector: Two or more selectors are written together and separated by commas. All selected tags are used (div, h1 ,. class, # div1 {...}).
3. backend selectors: Two or more selectors are written together and separated by spaces. All descendant selectors of the first selector will be used (div. class {...}).
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
