结构伪类选择器
ul li:first-child { background : #0af6f6;
}
ul li:last-child { background : #d27bf3;
}
p:nth-child(2) { background : red;
}
p:nth-of-type(2) { background : gold;
}
< h1> h1</ h1>
< p> p1</ p>
< p> p2</ p>
< p> p3</ p>
< ul> < li> li1</ li> < li> li2</ li> < li> li3</ li> < li> < p> p4</ p> </ li>
</ ul>
属性选择器(常用)
<! DOCTYPE html >
< html lang = " en" >
< head> < meta charset = " UTF-8" > < title> Title</ title> < link rel = " stylesheet" href = " CSS/style.css" >
</ head>
< body>
< p class = " demo" > < a href = " http://www.baidu.com" class = " links item first" id = " a" > 1</ a> < a href = " images/123.jpg" class = " links item first" id = " b" > 2</ a> < a href = " " > 3</ a> < a href = " " > 4</ a> < a href = " " > 5</ a> < a href = " " > 6</ a> < a href = " " > 7</ a> < a href = " " > 8</ a> < a href = " " > 9</ a> < a href = " " > 10</ a>
</ p>
</ body>
</ html>
=绝对等于
*=包含等于
^=以这个开头
$=以这个结尾
.demo a { float : left; display : block; height : 50px; width : 50px; border-radius : 10px; background : #0af6f6; text-align : center; color : #c4f8d9; text-decoration : none; margin-right : 5px; font : bold 20px/50px Arial;
}
a[id=a] { background : red;
}
a[class*="links"] { background : red;
}
a[href^=http] { background : yellow;
}
a[href$=jpg] { background : yellow;
}