Home > Article > Web Front-end > Summary of how to use CSS selectors_html/css_WEB-ITnose
Summary of how to use CSS selectors_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:45:05921browse
1. Element selector
Definition: You can switch a style from one element to another.
Example: If you are styling HTML, the selector will usually be an HTML element, such as p, h1, em, a, or even html itself.
html {color:black;}h1 {color:blue;}h2 {color:silver;} 2. Type selector
Definition: The type selector matches the name of the document language element type, matching every instance of that 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, It's like a wildcard.
Example: The following rule can make every element in the document red.
* {color:red;} 4. ID selector
Definition: Similar to a class selector, but there must be a # sign in front, also called a checkerboard number or pound sign .
Example:
*#intro {font-weight:bold;} <p id="intro">This is a paragraph of introduction.</p>
5. Contains selector
Definition: Used to select the descendants of an element in the document tree element.
Instance
<body><h1>Heading <em>here</em></h1><p>Lorem ipsum dolor <em>sit</em> amet.</p></body>
6. Pseudo-class selector
Definition: Allows us to format some entries that are not in the document tree.
Example:
Use pseudo-class selectors to format the 4 different states of the hyperlink 3499910bf9dac5ae3c52d5ede7383485 element in different ways.
◆a:link Selector for unvisited links.
a:link{color:red;} ◆a:visited Selector used for visited links.
a:visite{color:blue} ◆a:hover The selector used for the link over which the mouse cursor is placed.
a:hover{color:yellow} ◆a:active Selector for links that get focus (for example: clicked).
a:active{color:pink} 7. Pseudo-element selector
Definition: Allows us to format some information that is not in the document tree.
There are two types supported by browsers: first-line and first-letter.
first-line is used for the first line of an element.
Example:
p:first-line{font-weight:bolder}
first-letter is used for the first letter of an element.
Example:
p:first-letter{font-size:20px;}
Summary:
Basic selector :
1. Element (label) selector: Acts directly on the label name.
2. Class selector: There must be a class attribute on the label, and a dot must be added before the class attribute value.
3.id selector: The label must have an id attribute, and # must be added before the id attribute value.
4. Attribute selector: Use [] to enclose the attribute/property="value" of the tag.
5. Wildcard selector: in the form: *{...}.
Composite selector:
1. Intersection selector: Use two or more selectors written next to each other (div.class{...}).
2. Union selector: Two or more selectors are written together and separated by commas. All selected tags will be applied (div, h1, .class, #div1{... }).
3. Background selector: Two or more selectors are written together and separated by spaces. All descendant selectors of the first selector will be applied (div .class{...}) .