实例
<!DOCTYPE html>
<html>
<head>
<title>基本选择器的使用</title>
<meta charset="utf-8">
<style type="text/css">
ul{
width:650px;
height:60px;
border:1px dotted black;
padding:5px;
}
/* 标签选择器*/
ul li{
list-style:none;
float:left;
width:30px;
border:1px solid #111;
padding:5px;
margin:10px;
text-align:center;
border-radius:50%;
box-shadow:2px 2px 2px #ccc
}
/* id选择器*/
ul li#one{
background:#ccc;
}
/* class选择器*/
ul li.two{
background:red!important;/*!important优先级最高*/
}
/* 属性值选择器*/
ul li[class="three"]{
background:yellow;;
}
ul li[class^="t"]{ /*类名以t开头的 two three ten*/
background:green;;
}
ul li[class$="n"]{ /*类名以n结束的 seven ten*/
background:orange;
}
ul li[class*="e"]{ /*类名包含s的 three five seven eight nine ten */
background:blue;
}
ul>li[class="four"]{ /* 子选择器 >直接子元素*/
background:lightblue;
}
/* 相邻选择器 兄弟关系 class="seven"以后的所有li元素,不包括自己*/
ul li[class="seven"] ~*{
background:skyblue;
}
/* 相邻兄弟选择器 class="seven"后面的一个li元素eight */
ul li[class="seven"] +li{
background:lightgreen;
}
/* 伪类选择器*/
ul li:first-child{ /* 第一个子元素*/
background:brown!important;
}
ul li:last-child{ /* 最后一个子元素*/
background:purple;
}
ul li:nth-child(6){ /* 第6个子元素 nth-child(n) n是几就是第几个*/
background:pink;
}
ul li:nth-child(2n){ /* 第偶数个子元素 nth-child(even) */
background:coral;
}
ul li:nth-child(odd){ /* 第奇数个子元素 nth-child(2n+1)*/
background:olive;
}
a{
font-size:20px;
}
a:link{ /* 访问前 */
color:green;
}
a:visited{ /* 访问后 */
color:red;
}
a:focus{ /* 访问前 */
color:yellow;
}
a:hover{ /* 鼠标悬停 */
color:blue;
}
a:active{ /* 鼠标悬停 */
color:black;
}
ol{
width: 600px;
}
ol :only-child{ /* 获取只有一个子元素的 */
background: #ccc;
}
ol li:nth-last-child(3){ /* 获取倒数第三个元素的 */
background: yellow;
}
ol li:nth-of-type(3){ /* 获取第三个子元素的 */
background: lightgreen;
}
:empty{ /* 获取空元素 */
width:200px;
height: 200px;
background: skyblue;
}
:empty:after{
content: '我是空元素，里面什么都没有';
}
:empty:before{
content: '我是空元素，里面什么都没有,';
}
</style>
</head>
<body>
<ul>
<li id="one">1</li>
<li class="two">2</li>
<li class="three">3</li>
<li class="four">4</li>
<li class="five">5</li>
<li class="six">6</li>
<li class="seven">7</li>
<li class="eight">8</li>
<li class="nine">9</li>
<li class="ten">10</li>
</ul>
<a href="#">我是什么颜色</a><br>
<ol>
<li>我只有一个li,我用only-child</li>
</ol>
<ol>
<li>我是倒数第三个</li>
<li>你是2</li>
<li>我是第三个</li>
</ol>
<ol>
<li>我是1</li>
<li>我是倒数第三个</li>
<li>我是第三个</li>
<li>我是4</li>
</ol>
<div></div>
</body>
</html>手抄作业
点击 "运行实例" 按钮查看在线实例
