实例
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta charset="utf-8" />
<style>
/* 1.标签选择器:根据元素的标签来选择 例如ul 、li */
ul{
margin: 0;
width: 550px;
border: 1px dashed #666;
padding: 10px 5px;
}
/*子块撑开父级区块*/
ul:after {
content: '';
display: block;
clear: both;
}
ul li {
list-style: none;
float: left;
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
border-radius: 50%;
background-color: skyblue;
margin: 5px;
}
/* 2.id选择器 根据id来选择元素 */
#qiu1 {
background-color: pink;
}
/* 3.class选择器 根据类来选择元素 */
.qiu2 {
background-color: green;
}
/* 3.属性选择器 根据属性名来选择元素 */
ul li[class] {
background-color: lightgrey;
}
/* 4.属性选择器 根据属性值来选择元素 */
ul li[class="qiu2"] {
background-color: yellow;
}
/* 5.属性选择器 根据属性值开头来选择元素 */
ul li[class^="qiu4"] {
background-color: brown;
}
/* 6.属性选择器 根据属性值结尾来选择元素 */
ul li[class$="qiu-y"] {
background-color: black;
}
/* 7.属性选择器 根据属性值包含指定的子串来选择元素 */
ul li[class*="iu"] {
background-color: #616130;
}
/* 以上的选择器是根据元素特征相关的选择器 */
/*8.后代选择器/层级选择器*/
body ul li {
border: 1px solid #666;
}
/*9.子选择器*/
ul>li[class="qiuqiu"] {
background-color: #000079;
}
/*9.相邻选择器*/
ul li[class="qiuqiu"] ~ * {
background-color: #FF00FF;
}
/*10.相邻兄弟选择器*/
ul li[class="qiuqiu"] + li {
background-color: #460046;
}
/*11.群组选择器*/
h1,p {
font-size: 1rem;
font-weight: lighter;
}
/*12.伪类选择器：链接选择器*/
a {
font-size: 2rem;
}
/*访问前*/
a:link{
color:blue ;
}
/*访问后*/
a:visited{
color:yellow ;
}
/*获取焦点时*/
a:focus{
color:red ;
}
/*鼠标悬停*/
a:hover{
color:black;
}
/*12.伪类选择器：位置*/
/*位置:第一个*/
ul li:first-child {
background-color: black!important;
}
/*位置:最后一个*/
ul li:last-child {
background-color: red;
}
/*位置:固定位置5*/
ul li:nth-child(5) {
background-color: red;
}
/*位置:偶数*/
ul li:nth-child(2n) {
background-color: red!important;
}
/*位置:奇数*/
ul li:nth-child(2n+1) {
background-color: green!important;
}
/*13.伪类选择器：根据子元素的数量来选择*/
ol :only-child {
background: #666;
}
ul li:nth-last-child(4){
background-color:white!important;
}
ol li:nth-of-type(2){
background-color: wheat;
}
:empty{
width: 100px;
height: 100px;
background-color: red;
}
:empty:after{
content: '你是谁？';
}
/*:empty:before{
content: url("1.jpg");
}*/
</style>
<title>常用选择器</title>
</head>
<body>
<ul>
<li id="qiu1">1</li>
<li class="qiu2">2</li>
<li class="q3">3</li>
<li class="qiu4 qiu-x qiu-y">4</li>
<li class="qiuqiu">5</li>
<li >6</li>
<li >7</li>
<li >8</li>
<li >9</li>
<li >10</li>
</ul>
<h1>群组选择器</h1>
<p>到十点百思不得达克斯</p>
<a href="http://www.baidu.com">百度</a>
<ol>
<li>1</li>
</ol>
<ol>
<li>1</li>
<li>2</li>
</ol>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
<div></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
感悟：类型比较多，特别全，注释也比较多，积累知识，点点滴滴，方成汪洋！