基本选择器
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本选择器</title>
<style type="text/css">
li {
list-style: none;
}
#green {
color: green;
}
#red {
color:red;
}
#blue {
color:blue;
}
.violet {
background-color: violet;
}
.orange {
background-color: orange;
}
.green {
background-color: green;
}
ol li {
color: blue;
}
ul * {
border: 1px solid black;
}
ul > li {
font-size: 25px;
}
#blue + li {
color: orange;
}
#blue ~ li {
background-color:green
}
</style>
</head>
<body>
<ul>
<li id="red" class="blue">我是红色，我的背景是蓝色的</li>
<li id="green" class="violet">我是绿色，我的背景是紫罗兰色的</li>
<li class="green">我的背景是绿色的</li>
<li class="orange">我的背景是橙色的</li>
<li>我没有ID,也没有class</li>
<li id="blue">我是蓝色，没有背景色</li>
<li>我是蓝色后面的第一个元素，我是橙色的</li>
<li>我是蓝色后面的元素，我是橙色的</li>
<li>我是蓝色后面的元素，我是橙色的</li>
<ol>
<li>我是ul>ol>li下面的元素1，我是蓝色的</li>
<li>我是ul>ol>li下面的元素2，我是蓝色的</li>
<li>我是ul>ol>li下面的元素3，我是蓝色的</li>
</ol>
</ul>
<ol>
<li>我是ol>li下面的元素1，我是蓝色的</li>
<li>我是ol>li下面的元素2，我是蓝色的</li>
<li>我是ol>li下面的元素3，我是蓝色的</li>
</ol>
</body>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
属性选择器：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style type="text/css">
/*元素选择器*/
div {
padding: 0;
margin: 0;
width: 80px;
height: 80px;
border: 2px solid #777;
padding: 5px 10px;
float: left;
}
/*根据属性名class来选择*/
*[class] {
background-color:slateblue ; /*24679背景设置为石板栏*/
}
/*选择div中class="green"的元素*/
div[class="green"] {
background-color: lightgreen; /*4背景设置为浅绿色*/
}
/*选择class属性值中包含“lightblue”的元素*/
div[class ~= "lightblue"] {
background-color: lightblue; /*79背景设置为浅蓝色*/
}
/*选择id属性值中以“li”开头的元素*/
div[id ^= "li"] {
background-color: grey; /*358背景设置为灰色*/
}
/*选择id属性值中以“en”结尾的元素*/
div[id $= "en"] {
background-color: green; /*15背景设置为绿色*/
}
/*选择属性值中包括指定字母'gh'的类样式元素:;*/
div[class *= "gh"] {
background-color: yellow; /*79背景为黄色*/
}
</style>
</head>
<body>
<div id="seagreen">盒子1
</div>
<div class="blue">盒子2</div>
<div id="lightblue">盒子3</div>
<div class="green">盒子4</div>
<div id="lightgreen">盒子5</div>
<div class="skyblue">盒子6</div>
<div class="lightblue green">盒子7</div>
<div id="lightblue">盒子8</div>
<div class="red lightblue">盒子9</div>
<div>盒子10</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
