代码：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用选择器</title>
<style type="text/css">
/*标签选择器：根据标签名称来选择页面元素*/
ul{
margin:0;
width:550px;
border: 1px dashed #666666;
padding:10px 5px;
}
/*子块撑开父级区块*/
ul:after{
content:'';
display:block;
clear:both;
}
ul li{
list-style: none;
float:left;
width:40px;
height:40px;
line-height: 40px;
text-align: center;
border-radius:50px;
box-shadow:2px 2px 2px #888;
background-color:skyblue;
margin:5px;
}
/*id选择器*/
#item1{
background-color: cyan;
}
/*类选择器*/
.item2{
background-color:lightcoral;
}
/*属性选择器：属性名*/
ul li[class]{
background-color:lightgray;
}
/*属性选择器：属性值*/
ul li[id="item1"]{
background-color:lightblue!important;
}
/*属性选择器：以指定属性值开头的元素*/
ul li[class^="cat"]{
background-color:lightpink;
}
/*属性选择器：以指定属性值结尾的元素*/
ul li[class$="pig"]{
background-color:lightskyblue;
}
/*属性选择器：属性值中包含指定的字串*/
ul li[class*="t"]{
background-color:lightcoral;
}
/*后代选择器/层级选择器/派生选择器*/
body ul li{
border:1px solid deeppink;
}
/*子选择器*/
ul>li[class="orange"]{
background-color:deepskyblue;
}
/*相邻选择器*/
ul li[class="orange"] ~ *{
background-color:black;
color:whitesmoke;
}
/*相邻兄弟选择器*/
ul li[class="orange"]+li{
background-color:darkcyan;
}
/*群组选择器*/
h1,p{
font-size:2rem;
font-weight:lighter;
margin:0;
}
/*伪类选择器：连接a*/
a{
font-size:2rem;
font-weight:bolder;
text-decoration:none;
}
/*访问前*/
a:link{
color:red;
}
/*访问后*/
a:visited{
color:blue;
}
/*获取焦点的时候*/
a:focus{
color:coral;
}
/*鼠标悬停的时候*/
a:hover{
color:lightblue;
}
/*鼠标点击激活的时候*/
a:active{
color:lightsalmon;
}
/*伪类选择器：位置*/
ul li:first-child{
background-color:#efefef!important;
}
ul li:last-child{
background-color:#669;
}
ul li:nth-child(even){
/*2n+1 5 odd 奇数 2n even偶数*/
background-color:#994843;
}
/*伪类选择器：根据子元素的数量*/
ol :only-child{
/*只有一个子元素 中间加空格 */
background-color:lawngreen;
}
ol li:only-child{
background-color:chocolate;
}
ul li:nth-last-child(3){
background-color:wheat;
}
ol li:nth-of-type(2){
background-color:wheat;
}
:empty{
width:300px;
height:300px;
background-color:darkgray;
}
:empty:after{
content:'hello world';
}
:empty:before{
/*通过伪类添加的元素，默认都是行内元素，
不支持宽高设定，可以通过设置背景图片的方式来间接处理*/
content: url("images/pao.jpg");
}
</style>
</head>
<body>
<ul>
<li id="item1">1</li>
<li class="item2">2</li>
<li class="cat dog pig">3</li>
<li class="orange">4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<h1>css选择器大法</h1>
<p>css选择器非常重要,特殊是对于学习js,jquery以及其它前端框架</p>
<a href="http://www.php.cn">php中文网</a>
<ol>
<li>列表1</li>
</ol>
<ol>
<li>列表1</li>
<li>列表2</li>
</ol>
<ol>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ol>
<ol>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ol>
<div class=""></div>
<span></span>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
手抄代码
