第1关:CSS3-属性选择器相关概念
-
1、以下选项中,属于属性选择器的是(C )
A、 B、 C、 D、 -
2、样式规则如下:
A、 B、 C、 D、p[class $= en]{font-weight:bold;}
该样式规则将对选项(B )产生效果。 -
3、样式规则如下:
A、 B、 C、 D、div[name ~= ten]{border:1px solid blue;}
该样式规则将对选项( A)产生效果。 -
4、样式规则如下:
A、 B、 C、 D、p[class |= en]{font-size:20px;}
该样式规则将对选项(D )产生效果。
第2关:CSS3-属性选择器
任务描述
本关任务:使用属性选择器设置文字样式。
<!DOCTYPE html>
<html>
<head>
<title>属性选择器</title>
<style type="text/css">
div{
width:70px;
height:40px;
border:1px solid teal;
float:left;
}
li{list-style:none;}
/* ********* Begin ******* */
div[title]{font-size:25px;text-align:center;}
/* ********* End ******* */
</style>
</head>
<body>
<div name="a a1" class="a"></div>
<div name="b-1" class="b" title="nice"><li>nice</li></div>
<div name="b-2" class="b" title="to"><li>to</li></div>
<div name="b-3" class="b" title="meet"><li>meet</li></div>
<div name="b-4" class="b" title="you"><li>you</li></div>
<div name="a a2" class="a"></div>
</body>
</html>
第3关:CSS3-包含及连字符选择器
任务描述
本关任务:使用属性值的包含及前缀选择器设置文字样式。
<!DOCTYPE html>
<html>
<head>
<title>属性选择器</title>
<style type="text/css">
div{
width:70px;
height:40px;
border:1px solid teal;
float:left;
}
li{list-style:none;}
div[title]{
font-size:25px;
text-align:center;
}
/* ********* Begin ******* */
div[class=b]{font-weight:bold;}
div[name~=a]{background-color:pink;}
div[name^=b]{background-color:orange;}
/* ********* End ******* */
</style>
</head>
<body>
<div name="a a1" class="a"></div>
<div name="b-1" class="b" title="nice"><li>nice</li></div>
<div name="b-2" class="b" title="to"><li>to</li></div>
<div name="b-3" class="b" title="meet"><li>meet</li></div>
<div name="b-4" class="b" title="you"><li>you</li></div>
<div name="a a2" class="a"></div>
</body>
</html>
第4关:CSS3-前缀后缀选择器
任务描述
本关任务:使用属性值的前缀及后缀选择器设置文字样式。
<!DOCTYPE html>
<html>
<head>
<title>属性选择器</title>
<style type="text/css">
div{
width:70px;
height:40px;
border:1px solid teal;
float:left;
}
li{list-style:none;}
div[title]{
font-size:25px;
text-align:center;
}
div[class="b"]{ font-weight:bold; }
div[name~="a"]{ background-color:pink; }
div[name|="b"]{ background-color:orange; }
/* ********* Begin ******* */
div[title^="n"]{color:blue;}
div[title*="o"]{color:red;}
div[title$="t"]{color:green;}
/* ********* End ******* */
</style>
</head>
<body>
<div name="a a1" class="a"></div>
<div name="b-1" class="b" title="nice"><li>nice</li></div>
<div name="b-2" class="b" title="to"><li>to</li></div>
<div name="b-3" class="b" title="meet"><li>meet</li></div>
<div name="b-4" class="b" title="you"><li>you</li></div>
<div name="a a2" class="a"></div>
</body>
</html>