What does this article bring to you about CSS selectors? CSS Selector Use summary, there is a certain reference value, the need for friends can refer to, I hope to help you.
1. Selector (device) using basic syntax
Selector {Attribute 1: Property value 1;
Attribute 2: Attribute value 2;
Attribute 3: Attribute value 3;
.....: .......;
}
2. Tag Selector (directly using HTML tags as selector)
Second.html
<!doctype html>Second.css
p{ font-size:34px; Text-align:left; Text-transform:uppercase; Font-family: black body, Arial; Text-indent:3em; Text-decoration:line-through; Font-weight:bolder; letter-spacing:0.5em; line-height:3px; margin:34px; padding:23px; }3. Class selector (set a class name for each label, CSS can be set by the class name tag style, different label class names can be the same, the same can share the same style)-css with the tag name. class name or. Class name representation
Second.html
<!doctype html>Second.css
. text{ font-variant:small-caps;/* Small Capital Letter * /font-family: Arial, bold; Font-style:italic; Text-transform:lowercase; font-size:35px; Text-indent:3em; Text-decoration:overline; Font-weight:bold; letter-spacing:1px; Line-height:3em; Font-variant:small-caps; Text-align:right; }4.ID Selector (set a unique id,css for each HTML tag to set the style for the tag by id)
In--css, the #id value {} is used to denoteSecond.html
<!doctype html>Second.css
. text{ font-variant:small-caps;/* Small Capital Letter * /font-family: Arial, bold; Font-style:italic; Text-transform:lowercase; font-size:35px; Text-indent:3em; Text-decoration:overline; } #textp1 { font-weight:bold; letter-spacing:1px; Line-height:3em; Font-variant:small-caps; Text-align:right; }5. Include selector (descendant selector: cross-generational, cross-label): contains another label in one label
Second.html<!doctype html>Second.css
P a{ text-decoration:none; font-size:25px; Background-color:pink; }. text{ font-size:21px; Font-style:normal; Text-transform:lowercase; Text-indent:3em; Font-weight:bold; Letter-spacing:0.7em; line-height:27px; }6. Sub-selectors (ie does not support): The middle cannot contain other tags, CSS with tags 1 > label 2 (sub-label) representation
Second.html
<!doctype html>Second.css
p>a{ Text-decoration:none; Font-family: black body, Arial; } p{ font-size:23px;}7. Adjacent selector: (CSS style function in the last tab) Common Settings table column properties –css with label 1+ .... label N indicates
Second.html
<!doctype html>Second.css
. text+.text1{ Color:pink; Background-color:gray; font-size:34px; }8. Set Selector: Multiple tags together to set the style, separated by commas
Second.css
<!doctype html>Second.css
. text,.text1{ Color:pink; Background-color:gray; font-size:34px;}9. Pseudo-Class (a state of an element that is often used to describe the state of a hyperlink: link (not visited), visited (status visited), hover (mouse over state), active (clicked) CSS with tag name: status representation
Second.html
<!doctype html>Second.css
a:link { color:blue; font-size:53px; Text-decoration:none; } a:visited { color:red; font-size:193px; } A:hover { color:green; font-size:73px; } A:active { color:gray; font-size:183px; }10. Pseudo-Element (state of an element in an object) tag name in CSS: Pseudo-class representation
Commonly used (first-letter[action in the first word],first-line[action on the first line of text])
Second.html<!doctype html>Second.css
p:first-letter{ font-size:200%; } p:first-line{ color:red; }11 Style priority: Inline selector >id selector > class selector (Pseudo class, properties) > tag Selector
can use!important; increase priority
Related recommendations:CSS class selector and ID selector
CSS after generation selector and multi-class selector
CSS tag Selector, ID selector, class selector instance
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
