Used to look for specific types of elements, generally referred to in CSS are commonly defined and widely used elements, such as paragraph, title, body, etc.
< is also called an element selector or a simple selector >
P{font-size:16px;color:black;}used to look for descendants of a particular element or group of elements, denoted by a space in the middle
Body p{font-size:14px;}Used to find the element with the specified ID, denoted by the character #
#intro {font-weight:bold;}4. Class selector<p id= "Intro" >hello world!</p>
Used to look for an element with the specified class name, by the point number.
. Date-posted{color: #ccc;}5. Pseudo-Class selector<p class= "date-posted" >12/12/2012</p>
apply a style to a particular state of the target element
Common:: link,:visited (link pseudo-class, can only be applied to anchor elements)
: Hover,:active,:focus (Dynamic Pseudo-class, theoretically applicable to any element)
A:link{color:blue;text-decoration:none;}A:visited{color:grey;}
a:hover,:active,:focus{color:red;}Matches all available elements, represented by *
*{padding:0;margin:0;}
7. Advanced Selector1) Sub-selector
Select only the immediate descendants of the element, that is, the child element, the definition symbol is >
Body>p{color:green;}<body>
<p> This paragraph is green </p>
<div><p> This paragraph is not green </p></div>
<p> This paragraph is green </p>
</body>
2) adjacent sibling selector (adjacent selector)
Locates the element after an element under the same parent element, the definition symbol is +
h2+p{color:red;}
<p> is red </p>
<p> not red </p>
<div><p> not red </p></div>
<p> not red </p>
It's not red.
<p> Red </p>
<p> not Red </p>
3) Property Selector
Looking for an element based on whether a property exists or the value of the property, defined by writing the property and value in []
a[name]{color:red}/* Select the A element with the name attribute */
[Special]/* Select any element with the Special property */
img[alt= "So"][class= "pic"]{margin:20px;}/* Match two properties and values simultaneously */
[special~= "Wo"] {color:red;}
Common selectors
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
