实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS中常用的选择器</title>
<style>
body{
font-size:16px;
}
/*h2元素选择器*/
h2{
font-size: 1rem;
}
/*id选择器*/
#t{
color:red;
}
/*class选择器*/
.c{
width: 6.25rem;
line-height: 6.25rem;
background: #ccc;
text-align: center;
}
/*属性选择器: 属性名*/
ul li[class]{
list-style-type: none;
display: block;
width: 3rem;
height: 3rem;
float: left;
margin: 1rem;
background: red;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
/*属性选择器: 属性值*/
ul li[class="li1"]{
background:lightgreen;
}
/*属性选择器：以指定属性值开头*/
ul li[class^="li1"]{
font-size: 2rem;
}
/*属性选择器：以指定属性值开头*/
ul li[class^="li2"]{
font-size: 2rem;
}
/*属性选择器: 属性值中包含指定子串*/
ul li[class*="li"]{
font-size: 1rem;
}
/*后代选择器*/
body ul li a{
font-size: 2rem;
}
/*子选择器*/
ul > li[class="li3"]{
width: 4rem;
height: 4rem;
}
/*相邻选择器 选中的是此元素之后的元素*/
ul > li[class="li5"] ~*{
width: 5rem;
height: 5rem;
}
/*相邻兄弟选择器*/
ul >li[class="li4"]+li{
background: #000;
}
/*群组选择器*/
h2,ul li a{
font-size: 1rem!important;
}
/*选择第一个元素*/
ul li:first-child {
background: #efefef;
}
/*选择最后一个元素*/
ul li:last-child{
background:lightcoral;
}
/*选中某一个元素 从一开始*/
ul li:nth-child(2){
background:lightgreen;
}
ul li:nth-child(3){
background:lightskyblue;
}
</style>
</head>
<body>
<h2 id="t" class="c">h2标题标签</h2>
<ul>
<li class="li1"><a href="#">li1</a></li>
<li class="li2"><a href="#">li2</a></li>
<li class="li3"><a href="#">li3</a></li>
<li class="li4"><a href="#">li4</a></li>
<li class="li5"><a href="#">li5</a></li>
<li class="li6"><a href="#">li6</a></li>
<li class="li7"><a href="#">li7</a></li>
</ul>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
