在CSS中,屬性選擇器是一種非常強(qiáng)大的選擇器,它對于選擇指定屬性的元素非常有用。下面是一些常見的屬性選擇器:
/*選擇所有title屬性為example的元素*/ [title="example"] { color: red; } /*選擇所有href屬性值以"http"開頭的元素*/ [href^="http"] { color: blue; } /*選擇所有class屬性包含example的元素*/ [class*="example"] { font-size: 20px; } /*選擇所有rel屬性以"external"結(jié)尾的元素*/ [rel$="external"] { font-weight: bold; } /*選擇所有href屬性包含"example"且以".html"結(jié)尾的元素*/ [href*="example"][href$=".html"] { text-decoration: underline; }
使用屬性選擇器,可以更加方便和準(zhǔn)確地選擇元素,給元素添加樣式。這種選擇器也比較容易理解和使用,因?yàn)橹恍枰唵蔚刂付▽傩悦Q和屬性值即可。
除此之外,有些屬性選擇器也可以用來對表單元素進(jìn)行更加靈活的操作。例如,我們可以使用以下的選擇器來選擇所有type屬性為text的輸入框:
input[type="text"] { border: 1px solid #ccc; padding: 5px; }
總之,屬性選擇器是CSS中非常有用的一種選擇器,可以幫助我們輕松地選中指定屬性的元素,并對其進(jìn)行樣式上的調(diào)整。