一. css3概述
css3是css2的公升級版本,新增了許多特性,彌補了css2的眾多不足之處。
css3許多查詢元素的方法,極大的提高了查詢元素的效率和精準度。
css3目前在市場上,對pc端的支援很差,有些需要新增私有字首
但在移動端的支援要優於pc端
二. 選擇器1. 屬性選擇器
css3中對屬性選擇器元素元素的查詢提供了五種形式1.1 e[attr] 表示存在attr屬性即可找到
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...