前端学习（218）:属性选择器

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/ html4/strict.dtd">
<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><title>属性选择器</title><style type="text/css">td[lang] {color: red;}td[title="a"] {color: red;}td[title~="c"] {color: red;}td[title|="h"] {color: red;}</style></head><body><big><b>有lang属性的td元素会被选择</b></big><table border="1"><tr><td>th[lang]</td><td>无属性</td><td lang="">lang=""</td><td lang="en">lang="en"</td><td lang="cn">lang="cn"</td></tr></table><br /><big><b>title属性值为a的td元素会被选择</b></big><table border="1"><tr><td>[title="a"]</td><td>无属性</td><td title="a">title="a"</td><td title="a b">title="a b"</td><td title="ab">title="ab"</td><td title="ba">title="ba"</td></tr></table><br /><big><b>title属性值包含“c，且c前后只能有空格”的td元素会被选择</b></big><table border="1"><tr><td>[title~="c"]</td><td>无属性</td><td title="c">title="c"</td><td title="c d">title="c d"</td><td title="c-d">title="c-d"</td><td title="cd">title="cd"</td><td title="d c">title="d c"</td><td title="dc">title="dc"</td></tr></table><br /><big><b>title属性值为“h开头，且h只能为独立单词，后面可跟连字符”的td元素会被选择</b></big><table border="1"><tr><td>[title|="h"]</td><td>无属性</td><td title="h">title="h"</td><td title="h i">title="h i"</td><td title="h-i">title="h-i"</td><td title="hi">title="hi"</td><td title="i h">title="i h"</td><td title="i h j">title="i h j"</td></tr></table></body>
</html>

运行结果