基本属性实例
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>基本选择器</title>
</head>
<style type="text/css">
/*选择全部有ID*/
*[id]
{
/*background-color: green;*/
}
/*选择名值*/
li[clsss="c3"]{
/* background-color: blue;*/
}
li[class~=d1]{
/* background-color: red;*/
}
li[class^=d]{
background-color: black;
}
</style>
<body>
<ul>
<li id="i2">我是标签一</li>
<li class="c2">我是标签二</li>
<li class="c2">我是标签三</li>
<li class="c3">我是标签四</li>
<li class="d1">我是标签五</li>
<li class="d2">我是标签六</li>
<li id="i3">我是标签七</li>
<li id="i4">我是标签八</li>
</ul>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
属性选择器
实例
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>属性选择器</title>
</head>
<style type="text/css">
/*选择全部有ID*/
*[id]
{
/*background-color: green;*/
}
/*选择名值*/
li[clsss="c3"]{
/* background-color: blue;*/
}
li[class~=d1]{
/* background-color: red;*/
}
li[class^=d]{
background-color: black;
}
</style>
<body>
<ul>
<li id="i2">我是标签一</li>
<li class="c2">我是标签二</li>
<li class="c2">我是标签三</li>
<li class="c3">我是标签四</li>
<li class="d1">我是标签五</li>
<li class="d2">我是标签六</li>
<li id="i3">我是标签七</li>
<li id="i4">我是标签八</li>
</ul>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
