时间跟不上，先把自己理解的贴上，同末放假再补上
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css元素选择器作业</title>
<style>
p {height: 30px;border: 1px solid #ccc;}
p[s1] {background: red;}
p[s2=ad] {background-color: greenyellow;}
p[s3]:nth-child(even) { background-color: brown;}
p[s4^="h"] {background-color: cadetblue;}
p[s5$="d"] {background-color: antiquewhite;}
p[s6*="ua"] {background-color: lavenderblush; border: 2px solid #666;}
body p[s7="adu"] {background-color: rebeccapurple;}
body>p[s8*="h"] {background-color: rebeccapurple;}
label{ float:left;margin:0 5px; overflow:hidden; position:relative;}
label input{ position:absolute;left:-50px;top:-50px;}
span{float:left;width:50px;height:50px;border:3px solid #000;border-radius: 50%;}
input:checked~span {background:red;}
</style>
</head>
<body>
<h3>属性选择器</h3>
<p>通用选择 p[s1] {background: red;}</p>
<p s1="leo">leo</p>
<p s1="ad">阿杜</p>
<p s1="hh">欢欢</p>
<p s1="hz">华仔</p>
<p>精确选择 p[s2=ad] {background-color: greenyellow;}</p>
<p s2="leo">leo</p>
<p s2="ad">阿杜</p>
<p s2="hh">欢欢</p>
<p s2="hz">华仔</p>
<p>以指定属性值开头 p[s4^="h"] </p>
<p s4="leo">leo</p>
<p s4="ad">阿杜</p>
<p s4="hh">欢欢</p>
<p s4="hz">华仔</p>
<p>以指定属性值结尾 p[s5$="d"] </p>
<p s5="leo">leo</p>
<p s5="ad">阿杜</p>
<p s5="hh">欢欢</p>
<p s5="hz">华仔</p>
<p>属性值中包含子串 p[s6*="ua"] </p>
<p s6="leo">leo</p>
<p s6="adu">阿杜</p>
<p s6="huanh">欢欢</p>
<p s6="huaz">华仔</p>
<h3>后代选择器</h3>
<p>body p[s7="adu"]</p>
<p s7="leo">leo</p>
<p s7="adu">阿杜</p>
<p s7="huanh">欢欢</p>
<p s7="huaz">华仔</p>
<h3>子选择器</h3>
<p> body p[s]</p>
<p s8="leo">leo</p>
<p s8="adu">阿杜</p>
<p s8="huanh">欢欢</p>
<p s8="huaz">华仔</p>
<h3>伪类选择器</h3>
<p>even选择偶数行,odd选择奇数 p[s3]:nth-child(even) { background-color: brown;}</p>
<p s3="leo">leo</p>
<p s3="ad">阿杜</p>
<p s3="hh">欢欢</p>
<p s3="hz">华仔</p>
<label>
<input type="radio" name="tab" />
<span></span>
</label>
<label>
<input type="radio" name="tab" />
<span></span>
</label>
<label>
<input type="radio" name="tab" />
<span></span>
</label>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
