实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器应用</title>
<style>
/*标签选择器*/
div{
border: black 1px solid;
width: 100px;
height: 100px;
border-radius: 5px ;
text-align: center ;
font-size: 18px;
line-height:30px;
background-color: chocolate;
float: left;
margin: 5px 5px 5px 5px;
line-height:100px;
}
/*属性选择器-属性名*/
div[class]{
background-color: aqua;
}
/*属性选择器-属性值*/
div[class="item"]{
background-color: gold;
}
/*类选择器*/
.div{
background-color: blueviolet;
}
/*ID选择器*/
#div1{
background-color: greenyellow;
}
/*在元素之前插入内容*/
div:before {
content:'第';
color: navy;
}
/*在元素之后插入内容*/
div:after {
content: '个';
color: navy;
}
/*派生选择器*/
div b{
color: aliceblue;
}
/*群组选择器*/
p,span{
clear: both;
color: green;
font-size: 20px;
}
/*以属性特定值开头*/
div[class^="b"]{
color: cornsilk;
}
/*以属性特定值结尾*/
div[class$="2"]{
color: darkmagenta;
font-size:30px ;
}
/*属性值包含某个字符*/
div[class*="3"]{
background-color: cornsilk;
}
/*派生选择器*/
table tr td {
border:black 1px solid;
text-align: center;
}
ul,ol{
list-style: none;
}
/*标签选择器*/
table{
/*合并边框*/
border-collapse: collapse;
height:300px;
width: 500px;
}
/*子选择器*/
ul > li{
background-color: greenyellow;
}
/*相邻选择器-自己之后的不包括自己*/
ul li[class="2"] ~ *{
background: brown;
}
ul li[class$="4"] + li {
background-color: pink;
}
/*伪类-链接*/
/*鼠标悬停*/
a:hover{
font-size: 30px;
}
/*选择未访问*/
a:link{
color: green;
}
/*访问过的*/
a:visited{
color:red;
}
/*获取焦点时*/
a:focus {
color:yellow;
}
/*伪类选择器-位置*/
/*第一个子元素*/
ol :first-child{
background-color: blueviolet;
}
/*最后一个*/
ol :last-child{
background-color: blueviolet;
}
/*第几个*/
ol li:nth-child(6) {
background-color: red;
}
/*奇数:odd、偶数even*/
ol li:nth-child(odd) {
background-color:lightgreen;
}
/*伪类-根据数量选择*/
/*只有一个子元素*/
ol li:only-child {
background-color: green;
}
/*所有的规定父元素第二个子元素*/
ol li:nth-child(2){
background-color: chartreuse;
}
/*第几个子元素*/
ol li:nth-of-type(3) {
background-color: wheat;
}
/*伪类：空元素*/
:empty{
width: 100px;
height:100px;
border: #000 1px solid;
}
:empty:after{
content: " hello";
line-height:100px;
}
:empty:before {
content: "nihao ";
}
</style>
</head>
<body>
<div>1</div>
<div class="box1">2</div>
<div class="div">3</div>
<div id="div1">4</div>
<div class="item">5</div>
<div><b>6</b></div>
<div class="box2">7</div>
<div class="item3">8</div><hr>
<p>a</p>
<span>b</span>
<span>b</span>
<span>b</span>
<span>b</span>
<span>b</span>
<ul>
<li class="1">1</li>
<li class="2">2</li>
<li class="3">3</li>
<li class="4">4</li>
<li class="5">5</li>
<li class="6">6</li>
<li class="7">7</li>
<li class="8">8</li>
</ul>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ol>
<ol>
<li>1</li>
</ol>
<ol>
<li>1</li>
<li>2</li>
</ol>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
<a href="">php中文网</a>
<table></table>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
手抄代码：
