css3基本定義 [attribute^=value]元素屬性 套用樣式



支援CSS3 以上

用法:p[title屬性^=名稱]
說明:套用有定義title屬性的p tag 有某字開頭

css定義:
p[title^="test"]  {
文字大小 font-size : 30px 為30像素
文字顏色 color :color 為 blue;
}
注意事項:
title 為元系的屬性。
如: id 、 name 、class等屬性。



程式:
<!DOCTYPE html>
<html>
<head>
<title>css3基本定義 [attribute^=value]元素屬性 套用樣式</title>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<style type="text/css">

p[title^=test] {
font-size: 30px;
color: blue;
}

</style>
</head>
<body>
<p class="p0" title="test">p Tag id=p0  title=test</p>

<p class="p1" title="test-1">p Tag id=p1 title=test-1</p>

<div>
  <span><p>div span p Tag</p></span>
</div>
<p class="p2" title="test-2"> p Tag id=p2 title=test-2</p>

<span>
<h5 id="myDivId">span h5 Tag myDivId</h5>
<p>span p Tag</p>
</span>
<ul>
<li><p> ul li p Tag</p></li>
<li><p> ul li p Tag</p></li>
<li><p> ul li p Tag</p></li>
</ul>
<p class="p3" title="this-test_3"> p Tag id=p3 title=this-test_3</p>

<div>
<h5> h5 Tag</h5>
<p>p Tag</p>
</div>

<p class="p4" title="thistest_4"> p Tag id=p4 title=thistest_4</p>
</body>
</html>

結果p tag有title 有test文字開頭都會套用。
如:test、test-1、test-2
圖:





測試結束~
如果還不了解可參考:w3schools CSS Selector Reference

感謝~




 






 
















其它文章

arrow
arrow

    PG Levin Li 發表在 痞客邦 留言(0) 人氣()