CSS3的新增選擇器示例 屬性選擇器

一. css3概述

css3是css2的公升級版本，新增了許多特性，彌補了css2的眾多不足之處。

css3許多查詢元素的方法，極大的提高了查詢元素的效率和精準度。
css3目前在市場上，對pc端的支援很差，有些需要新增私有字首
但在移動端的支援要優於pc端

css3中對屬性選擇器元素元素的查詢提供了五種形式

css3中選擇器示例title>

/*③ 通過屬性選擇器來給有name屬性的元素設定樣式*/
div[name]
style>
head>
name="">
div>
div>
body>
html>執行結果 
1.2 e[attr=val]表示屬性值完全等於val
css3中選擇器示例title>
/*③ 通過標籤選擇器先給所有的div標籤，設定寬高，和預設顏色黑色*/
div /*④ 給標籤：div，屬性：class，值為box的元素設定樣式, 背景顏色設定為紅色*/
div[class='box']
style>
head>
class="box">盒子1div>
class="">黑子2div>
class="box2">黑子3div>
body>
html>執行效果 
1.3 e[attr=val] 表示的屬性值裡包含 val 字元並且在』任意』位置*
css3中選擇器示例title>
/*③ 通過標籤選擇器先給所有的div標籤，設定寬高，和預設顏色黑色*/
div /*④ 給標籤：div，屬性：class，值包含box的元素設定如下樣式*/
div[class*='box']
style>
head>
class="box">盒子1div>
class="">黑子2div>
class="box2">黑子3div>
class="bo">黑子4div>
body>
html>執行結果 
1.4 e[attr^=val] 表示的屬性值裡包含以 val 字元開始的元素
css3中選擇器示例title>
/*③ 通過標籤選擇器先給所有的div標籤，設定寬高，和預設顏色黑色*/
div /*④ 給標籤：div，屬性：class，值是以box開頭的元素設定如下樣式*/
div[class^='box']
style>
head>
class="box">盒子1div>
class="abox">黑子2div>
class="box2">黑子3div>
class="cccbox">黑子4div>
body>
html>執行結果 
1.5 e[attr$=val] 表示的屬性值裡包含以 val 字元結尾的元素
css3中選擇器示例title>
/*③ 通過標籤選擇器先給所有的div標籤，設定寬高，和預設顏色黑色*/
div /*④ 給標籤：div，屬性：class，值是以box結尾的元素設定如下樣式*/
div[class$='box']
style>
head>
class="box">盒子1div>
class="abox">黑子2div>
class="box2">黑子3div>
class="cccbox">黑子4div>
body>
html>執行結果
CSS3 新增選擇器
新增選擇器 用法描述 element1 element2 p u選擇在同乙個父級元素下的p後面的所有的ul 選擇其 src 屬性值以 https 開頭的每個a元素 attribute value a src pdf 選擇其 src 屬性以 pdf 結尾的所有a元素 attribute value a...
css3新增選擇器
1.屬性選擇器 1 e att 元素 屬性 選擇具有att屬性的e元素，需要選擇有某個屬性的元素，而不論是行為是什麼，可以使用簡單的屬性選擇器 注 可以根據多個屬性進行選擇，只需要將屬性選擇器連線即可。2 e att val 元素 屬性 屬性值 選擇具有att屬性且屬性值為val的e元素，進一步縮小...
css3新增選擇器
屬性選擇器 1.dom attr 帶有attr的屬性會被選擇 2.dom attr value 帶有attr的屬性，並且值為value的元素會被選擇 3.dom attr value 帶有attr的屬性，並且值當中只要包含完整的value單詞，就會被選擇 4.dom attr value 帶有att...