Home > Developer > Web Develop
2.2.2 Complex Selector
Element Selector
The element of the document is the most basic selector.
In simple terms, it is the HTML tag that makes the selector.
Syntax: tag {declaration;}
Cases:
HTML {
color:red;
}
p {
font-size:20px;
}
Class Selector
Class selectors allow you to specify styles in a way that is independent of document elements.
You can specify a single element, or multiple. Typically class selectors can also be used in conjunction.
Syntax:. class selector name {declaration} "." + Class Selector Name
Naming rules: Letters or underscores, which can contain letters, underscores, and numbers.
Cases:
<style type= "Text/css" >
. Lizi {
color:red;
}
</style>
<body>
<div class= "Lizi" > Example one </div>
<p class= "Lizi" > Example two </p>
</body>
ID Selector
The ID selector can only be used once in a document.
Syntax: #ID选择器名 {declaration} "#" + ID selector name
Naming rules: Letters or underscores, which can contain letters, underscores, and numbers.
Cases:
<style type= "Text/css" >
#lizi1 {
color:red;
}
#lizi2 {
color:red;
}
</style>
<body>
<div id= "Lizi1" > Example one </div>
<p id= "Lizi2" > Example two </p>
</body>
(anchor) Pseudo-class
A simple introduction to a, linked class selector, a:hover{declaration;}. It means that when the mouse moves to the <a> tab, the link is the style of the declaration that is displayed.
a:hover{
color:red;
font-size:100px;
}
2.2.3 Other selectors
Selector grouping (and set selector)
Multiple simple selectors share a style.
Syntax: selector 1, selector 2, ... Selector n{the common declaration} selectors are separated by commas.
Cases:
H1,h2,p,body {
color:red;
}
Descendant Selector
Descendant selectors can select elements that are descendants of an element.
Syntax: The parent element child element {declaration} is separated by a space between the parent and child elements.
Cases:
Div H1 {
font-size:100px;
color:red;
}
Property Selector
The property selector can select elements based on their attributes and property values.
Syntax: Label [property] {declaration} The front label is optional.
Cases:
*[width] {color:red;}
p[bgcolor]{font-size:10px;}
Child element Selector
The properties of the element's child elements.
Syntax: element > child element {declaration}
Cases:
P > Strong {color:red;} Only strong in the child elements of the P element will change style.
Adjacent sibling selector
The adjacent sibling selector enables the next two elements (siblings) to have a common parent attribute .
Syntax: element A + element b{declaration} After completion, only the style is added for element B .
Cases:
P + H1 {color:red}
These are not all, generally used selectors can be.
Not clear text? Click below to watch the video tutorial
CSS Selector Video tutorial
Scan QR code focus on "small classroom Network"
The first time to get the latest tutorials
650) this.width=650; "class=" wp-image-107 aligncenter "src=" Http://www.xxkt.org/wp-content/uploads/2017/08/qrcode_ For_gh_06e50401e49d_860.jpg "alt=" two-dimensional code "width=" "height=" "style=" margin:0px auto;padding:0px;border:0px; Height:auto;width:auto;background:url ("Images/imgbg.gif") no-repeat 0% 0; "/>
22
650) this.width=650; "src=" http://www.xxkt.org/wp-content/themes/shayou/images/dashang.jpg "style=" margin:0px Auto ;p adding:0px;border:0px;height:auto;width:auto; "alt=" dashang.jpg "/>
2.2 CSS Selector
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
