css3屬性選擇器的用法是什麼

用法：1、選擇指定屬性的元素，語法「元素[屬性名]」；2、選擇指定屬性值的元素，語法「元素[屬性名=屬性值]」；3、選擇指定前綴屬性值的元素，語法「元素[屬性名^=屬性值]」；4、選擇指定後綴屬性值的元素，語法「元素[屬性名$=屬性值]」。

本教學操作環境：windows10系統、CSS3&&HTML5版本、Dell G3電腦。

css3屬性選擇器的用法是什麼

CSS3中使用了很多的屬性選擇器，透過這些屬性選擇器，對具有指定屬性的 HTML 元素設定樣式。可以為擁有指定屬性的 HTML 元素設定樣式，而不僅限於 class 和 id 屬性。可以根據我們自己的設計來定義元素的樣式，製作出精美的網頁。下面讓我們來看看有哪些屬性選擇器~

E[att^=value] 

E[att^=value] 屬性選擇器是指選擇名稱為E的標籤，且該標籤定義了att屬性，att屬性值包含前綴為value的子字串。需要注意的是E是可以省略的，如果省略則表示可以符合滿足條件的任意標籤。例如，div[id^=section]表示符合包含id屬性，且id屬性值是以「section」字串開頭的div元素。

E[att$=value] 

E[att$=value] 屬性選擇器是指選擇名稱為E的標籤，且該標籤定義了att屬性，att屬性值包含後綴為value的子字串。與E[att^=value]選擇器一樣，E元素可以省略，如果省略則表示可以符合滿足條件的任意元素。例如，div[id$=section]表示符合包含id屬性，且id屬性值是以「section」字串結尾的div元素。

E[att * = value]

E[att * = value]選擇器用於選擇名稱為E的標籤，且該標籤定義了att屬性， att屬性值包含value子字串。此選擇器與前兩個選擇器一樣，E元素也可以省略，如果省略則表示可以符合滿足條件的任意元素。例如，div[id * = section]表示符合包含id屬性，且id屬性值包含「section」字串的div元素。

以下用E代表要選擇的標籤（可以為標籤名稱、類別名稱、id名等）；用attr代表屬性名稱；val代表屬性值。

E[attr~=「val」]

選取條件：1、標籤內有這個屬性，屬性值只有"val」。 2.標籤內有這個屬性，屬性值包含"val"，"val"值需獨立存在。

    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>

為了易於分辨，現在將每個p浮動給一個寬、高、背景顏色和邊框，並用屬性選擇器改變其背景顏色來看看效果。

		p{
			float: left;
            width: 100px;
            height: 100px;
            background-color: orange;
            border:1px solid teal;
        }
        .p[title~="a"]{
            background-color: pink;
        }

效果圖

分析：可以看到第三個p也被選中，因為其屬性值有a、b和c三個值，其中有一個值為a滿足條件，所以被選中了。

E[attr|=“val”]

選取條件：1、標籤內有這個屬性，屬性值只有"val"。 2、標籤內有這個屬性，以val值開頭並且以"-"連接的。

    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>

		p{
            width: 100px;
            height: 100px;
            background-color: orange;
            border:1px solid teal;
            float: left;
        }
        p[title|="a"]{
            background-color: pink;
        }

效果圖

分析：被選取的是第一個和最後一個。第三個p以a開頭但之後的值不是"-「連接，第四個以」-"連接但不是以a開頭，所以沒有被選中。

E[attr^=“val”]

選取條件：1、標籤內有這個屬性，屬性值只有"val"。 2.標籤內有這個屬性，屬性值以"val" 開頭。

E[attr$=“val”]

選取條件：1、標籤內有這個屬性，屬性值只有"val"。 2.標籤內有這個屬性，屬性值以"val" 結尾。

	<p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>

		p{
            width: 100px;
            height: 100px;
            background-color: orange;
            border:1px solid teal;
            float: left;
        }
        p[title^="a"]{
            background-color: pink;
        }
        p[title$="b"]{
            background-color: darkturquoise;
        }

結果圖

分析：第一、三個p值為“a”、“a_c”，他們都是以a開頭的值，所以被選中，背景改為粉紅色。第四、六個p值為“b-a-b”、“a-b”，他們都是以b結尾的值，所以被選中，背景改為暗寶石綠色。

E[attr*=“val”]

選取條件：1、標籤內有這個屬性，屬性值只有"val"。 2.標籤內有這個屬性，屬性值包含"val"

    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>

		p{
            width: 100px;
            height: 100px;
            background-color: orange;
            border:1px solid teal;
            float: left;
        }
        p[title*="a"]{
            background-color: pink;
        }

結果圖

分析：除了第二個和第五個p中屬性值不包含a，所以沒被選中。

（學習影片分享：css影片教學）

以上是css3屬性選擇器的用法是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！