前端学习(218):属性选择器
生活随笔
收集整理的這篇文章主要介紹了
前端学习(218):属性选择器
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
<!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>有l(wèi)ang屬性的td元素會(huì)被選擇</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元素會(huì)被選擇</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元素會(huì)被選擇</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只能為獨(dú)立單詞,后面可跟連字符”的td元素會(huì)被選擇</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>
運(yùn)行結(jié)果
總結(jié)
以上是生活随笔為你收集整理的前端学习(218):属性选择器的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Velocity常用语法
- 下一篇: 前端学习(395):京东制作页面4自己制