1.基本选择器
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1.基本选择器</title>
<!-- 标签、id、class选择器 -->
<style type="text/css">
ul{
padding: 0;
margin:0;
width:450;
border:1px dashed #666;
padding:10px 5px;
}
ul:after{
content:'';
display: block;
clear:both;
}
li{
list-style: none;
float:left;
width:40px;
line-height: 40px;
text-align: center;
border-radius:50%;
background-color: skyblue;
margin-right:5px;
}
/*id选择器*/
#item1{
background-color: lightgreen;
}
/*类选择器*/
.green{
background-color: lightgreen;
}
/*父子选择器*/
ul li{
color: white;
}
/*通配选择器*/
ul *{
border: 1px solid black;
/*子元素选择器*/
ul > li {
background-color: :blue;
}
/*相邻兄弟选择器*/
#item2 + li {
background-color: black;
}
/*选择全部兄弟*/
#item2 ~ li {
background-color: black;
}
</style>
}
</head>
<body>
<ul>
<li id="item1">1</li>
<li class="green">2</li>
<li class="green">3</li>
<li>4</li>
<li>5</li>
<li id="item2">6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2.属性选择器
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>4.属性选择器</title>
<!-- 标签、id、class选择器 -->
<style type="text/css">
ul{
padding: 0;
margin:0;
width:450;
border:1px dashed #666;
padding:10px 5px;
}
ul:after{
content:'';
display: block;
clear:both;
}
li{
list-style: none;
float:left;
width:40px;
line-height: 40px;
text-align: center;
border-radius:50%;
background-color: skyblue;
margin-right:5px;
}
/*id选择器*/
#item1{
/*background-color: lightgreen;*/
}
类选择器
.green{
/*background-color: lightgreen;*/
}
父子选择器
ul li{
/*color: white;*/
}
通配选择器
ul *{
/*border: 1px solid black;*/
子元素选择器
ul > li {
/*background-color: :blue;*/
}
相邻兄弟选择器
#item2 + li {
/*background-color: black;*/
}
选择全部兄弟
#item2 ~ li {
/*background-color: black;*/
}
/*根据属性名来选择元素
/*选中所有有ID属性的元素*/
*[id] {
/*background-color: red;*/
}
/*根据属性的名各值来选元素*/
li[class="green"]{
/*background-color: lightgreen;*/
}
/*选择class属性中实习实习包括指定单词的元素*/
li[class ~= "red"]{
/*background-color: brown;*/
}
/*选择以‘ph'开头的顺样式的元素*/
li[class ^= "ph"]{
/*background-color: coral;*/
}
/*选择以's'结尾的类样式的元素*/
li[class $= "s"]{
/*background-color: lime;*/
}
/*选择属性值中包括指定字母'e'的元素*/
li[class *= "e"]{
background-color: yellowgreen;
}
</style>
</head>
<body>
<ul>
<li id="item1">1</li>
<li class="green">2</li>
<li class="green">3</li>
<li class="red">4</li>
<li>5</li>
<li id="item2">6</li>
<li class="php">7</li>
<li class="phpcss">8</li>
<li>9</li>
</ul>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
3.伪类选择器
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style>
ul{
padding: 0;
margin:0;
width:450;
border:1px dashed #666;
padding:10px 5px;
}
ul:after{
content:'';
display: block;
clear:both;
}
li{
list-style: none;
float:left;
width:40px;
line-height: 40px;
text-align: center;
border-radius:50%;
background-color: skyblue;
margin-right:5px;
}
ul:before{
content:'PHP中文网'; /*行内元素*/
}
ul.after{
content: url(.../images/1.jpg);
}
ul li:first-child{
background-color: brown;
}
ul li:last-child{
background-color: brown;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
