表面感觉是听懂了，上手的话又感觉不是很懂~~
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style type="text/css">
#beijing1 {
background-color: red;
color:black;
border-color: green;
}#beijing2 {
background-color: lightblue;
color:yellow;
border-color: brown;
}
.lei1{
background-color: green;
color:blue;
}
.lei2+li{
background-color: black;
color:red;
}
td[class="title"]{
background-color: lightblue;
color: white;
}
td[class~="bh"]{
background-color: lightgreen;
color: red;
}
td[class^="kt"]{
background-color: blue;
color:black;
}
td[class$="jw"]{
font-size: small;
}
td[class*="xx"]{
background-color: yellowgreen;
font-size: larger;
}
</style>
</head>
<body>
<div>标准选择器</div>
<ul>
<li id="beijing1">我是id选择器</li>
<li id= "beijing2">我也是id选择器</li>
<li class="lei1">我是类选择器</li>
<li class="lei2">我也是类选择器，我是改变我后面哥们颜色的</li>
<li>我就是被改变颜色的</li>
</ul>
<hr>
<div>属性选择器</div>
<table align="center" border="1" cellpadding="5">
<tr>
<td class="title">我是全部匹配</td>
<td class="aa bh bb">我是包含</td>
<td class="ktaac">我是开头</td>
</tr>
<tr>
<td class="dnbjw">我是结尾</td>
<td class="adnixxtt">我是存在</td>
</tr>
</table>
</body>
</html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
