HTML5&CSS3練習筆記(一)

標籤：style   blog   http   color   os   io   art   ar   

屬性選取器的用法 格式：[屬性/^/*/$=值]

1、【attr=val】 匹配指定值的元素

1 <div>2         <div id="section1">3             完全符合元素4         </div>5  </div>

HTML代碼

1 [id=section1]2 {3      background: #eee;4      font-size: 20px;5      color: Red;6 }

CSS代碼

如下：

完全符合元素

2、【attr*=val】匹配包含指定內容的元素，例子為設定id包含tion2的樣式

1 <div>2         <div id="section2">3             匹配包含指定id元素</div>4 </div>

HTML代碼

1 [id*=tion2]2 {3    background: #eee;4    font-size: 20px;5    color: green;6 }

CSS代碼

如下：

匹配包含指定id內容元素3、【attr^=val】匹配開頭包含指定值的元素

1 <div>2         <div id="subsection3">3             匹配開頭包含指定內容元素-14         </div>5        <div id="subsection3">6             匹配開頭包含指定內容元素-27         </div>8  </div>

HTML代碼

[id^=sub]{    background: #eee;    font-size: 20px;    color: blue;}

CSS代碼

如下：

subsection1 匹配開頭包含指定內容元素-1subsection2 匹配開頭包含指定內容元素-2susection3 匹配開頭包含指定內容元素-24、【attr$=val】匹配結尾包含指定值的元素

 1 <div> 2         <div id="section1sub"> 3             section1sub匹配結尾包含指定內容元素 4         </div> 5         <div id="section2sub"> 6            section2sub 匹配結尾包含指定內容元素 7         </div> 8         <div id="section3sub"> 9             section3su 匹配結尾包含指定內容元素10         </div>11  </div>    

HTML代碼

1 [id$=sub]2 {3     background: #eee;4     font-size: 20px;5     color: gray;6 }

CSS代碼

如下：

section1sub匹配結尾包含指定內容元素section2sub 匹配結尾包含指定內容元素section3su 匹配結尾包含指定內容元素