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

2021-08-03 13:57:55 字數 2851 閱讀 6390

一. 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...