6 CSS 屬性選擇器

2021-07-04 06:54:10 字數 1817 閱讀 2332

對帶有指定屬性的 html 元素設定樣式。

可以為擁有指定屬性的 html 元素設定樣式,而不僅限於 class 和 id 屬性。

注釋:只有在規定了 !doctype 時,ie7 和 ie8 才支援屬性選擇器。在 ie6 及更低的版本中,不支援屬性選擇。

屬性選擇器

下面的例子為帶有 title 屬性的所有元素設定樣式:

[title]

type="text/css">

[title]

style>

head>

可以應用樣式:h1>

title="hello world">hello worldh2>

title="w3school"

href="">w3schoola>

無法應用樣式:h1>

hello worldh2>

href="">w3schoola>

body>

html>

屬性和值選擇器

下面的例子為 title=」w3school」 的所有元素設定樣式:

[title=w3school]

type="text/css">

[title=w3school]

style>

head>

可以應用樣式:h1>

title="w3school"

src="/i/w3school_logo_white.gif" />

title="w3school"

href="">w3schoola>

無法應用樣式:h1>

title="greeting">hi!p>

class="w3school"

href="">w3schoola>

body>

html>

屬性和值選擇器 - 多個值

下面的例子為包含指定值的 title 屬性的所有元素設定樣式。適用於由空格分隔的屬性值:

[title~=hello]  //空格

type="text/css">

[title~=hello]

style>

head>

可以應用樣式:h1>

title="hello world">hello worldh2>

title="student hello">hello w3school students!h1>

無法應用樣式:h1>

title="world">hello worldh2>

title="student">hello w3school students!p>

body>

html>

下面的例子為帶有包含指定值的 lang 屬性的所有元素設定樣式。適用於由連字元分隔的屬性值:

[lang|=en]  // - 連字元

type="text/css">

[lang|=en]

style>

head>

可以應用樣式:h1>

lang="en">hello!p>

lang="en-us">hi!p>

無法應用樣式:h1>

lang="us">hi!p>

lang="zh">hao!p>

body>

html>

6 CSS屬性選擇器

屬性選擇器 利用標籤的屬性對樣式的生效物件進行選擇。我們在基本選擇器中學過class選擇器和id選擇器,它們也是標籤中的屬性,只是因為這兩個使用頻率很高,因此把它們抽離出來作為兩種獨立的選擇器。我們如果想利用其他系統自帶的屬性去選擇樣式的生效物件,那麼就使用屬性選擇器。格式一 基本選擇器 屬性 意義...

重溫系列6《css 複雜選擇器》

1.css的註解 我是css的註解樣式,在兩星號後面 2.父子選擇器 父父級元素 父級元素 子元素 子子級元素 下面是父子結構的html的結構 下面是css的程式碼 fathe ther father son sonson fathe ther father son fathe ther fathe...

CSS選擇器 屬性選擇器

最近重新學習了css3,發現選擇器還能這麼玩。介紹一下屬性選擇器 我給咱們順著往下縷一縷 資訊量挺大 剛開始是這樣子 如下 doctype html head meta charset utf 8 title 測試網頁 title style h1 m1 style head body div h1...