close

支援CSS2 以上

用法：p[title~=名稱]
說明：套用有定義title屬性的p tag 裡有某字

css定義：
p[title~="test"]  {
文字大小 font-size : 30px 為30像素
文字顏色 color :color 為 blue;
}
注意事項：
是屬性裡有某字，且要相同。
此字前後不可加其它字。
如p[title~="test"]  必須在title有 test 此字才套用。
test1、test2、thistest3 這不套用。
有點想 and 的做法。

程式：
<!DOCTYPE html>
<html>
<head>
<title>css基本定義 [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="this test">p Tag id=p0</p>

<p class="p1" title="this test1">p Tag id=p1</p>

<div>
  <span><p>div span p Tag</p></span>
</div>
<p class="p2" title="this test2"> p Tag id=p2</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="thistest3"> p Tag id=p3</p>

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

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


圖：




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

感謝~























其它文章 

            

                        


    

        

                    

    

    

        arrow
    

    

        arrow
    

    
    

    


                        

    
    
    
            
    
    
    
        
    
            
    全站熱搜
    
        
    
        
    
                
    
    
    

    




                            
                
    
                        
                        



                                                    
                                                            
     
        
        

    
    
    
        
    
    
    
        
    
            PG Levin Li 發表在 痞客邦                    留言(0) 人氣()
                    
     
        
    
            E-mail轉寄