Home > Developer > Web Develop
The new selector in CSS3 can be a lot easier.
This time using the attribute selector, Root,not,empty,target,first-child,last-child,ntn-child (n), Ntn-last-child (n),
First-of-type,nth-of-type (n), Last-of-type,nth-last-of-type (n), Only-child,only-of-type.
The source code is as follows
<body>
<div id= "Header" > here is the page header </div>
<div id= "Content" >
<ol>
<li><a href= "/http ..." > I am the first link </a></li>
<li><a href= ". img" class= "icon" > I am the second link </a></li>
<li><a href= "#" Name= "Mynameisthirdblock" > I'm a third link </a></li>
<li><a id= "Fourthhref" href= "#testTarget" > I am the fourth link </a></li>
<li><a id= "Testempty" ></a></li>
<li><a></a></li>
<li><a ></a></li>
<li></li>
</ol>
<p id= "Testtarget" > Test target </p>
</div>
<div id= "Footer" >
This is the end of the page
</div>
</body>
<style>
/*root root selector, equivalent to html*/
: root{
Background: #A0F3C2;
}
/* Negative selector, except for the change of the ID to content */
Div:not ([id= "content"]) {
Height:3rem;
margin:20px 0;
Color: #97BDEF;
Text-align:center;
Font-size:1.2rem;
Line-height:3rem;
Border:.2rem solid #EAA0F3;
}
OL > li{
Border:.2rem dotted #ABF7FB;
margin:10%;
}
/* Select the element of the first child element of the parent element, not the descendant element
Last-child Similar
*/
OL > li:first-child{
Font-size:1.5rem;
Font-weight:bold;
color:red;
}
/* Locates one or more specific child elements of a parent element
The even-numbered Li plus the shadow
"N" is a parameter, can be a positive integer value, or it can be an expression
Nth-last-child (n) Similar
*/
Ol > Li:nth-child (2n) {
box-shadow:10px 10px 5px #888888;
}
/* To control the background style with only one child element */
ol:only-child{
Display:block;
Background: #E2ACCA;
}
/* The property selector is equivalent to a wildcard character
*e[att^= any string that begins with Val for the "Val" property
*e[att$= "Val" property any string ending in Val
*e[att*= "Val" property contains a Val string
*
*/
a[href^=http]{
Background:pink;
Display:block;
Color: #fff;
}
a[href$=img]{
Background: #F1D182;
Display:block;
Color: #fff;
}
a[name*=third]{
Background: #CA88E6;
Display:block;
Color: #fff;
}
/* NULL Selector */
a:empty{
Display:none;
}
p{
Display:none;
}
/* Target selector, the target element of a marker used to match the URL of the document (page) */
#testTarget: target{
Background:yellow;
Display:block;
margin:10%;
}
</style>
The effect is as follows:
CSS3 of all kinds of 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
