CSS屬性選取器的用法有哪些？css屬性選取器的用法介紹（代碼）

最後更新：2018-09-05 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

本篇文章給大家帶來的內容是關於CSS屬性選取器的用法有哪些？css屬性選取器的用法介紹（代碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所協助。

一、存在和值屬性選取器

1、存在和值屬性選取器

        /*存在和值屬性選取器*/           [attr]：該選取器選擇包含 attr 屬性的所有元素，不論 attr 的值為何。        [attr=val]：該選取器僅選擇 attr 屬性被賦值為 val 的所有元素。        [attr~=val]：表示帶有以 attr 命名的屬性的元素，並且該屬性是一個以空格作為分隔的值列表，其中至少一個值為val。

2、代碼執行個體：
01_存在和值屬性選取器.html

<head>        <meta charset="UTF-8">        <title>存在和值屬性選取器</title>        <style type="text/css">            /*             [attr]：該選取器選擇包含 attr 屬性的所有元素，不論 attr 的值為何。            */            [name]{                background: pink;            }        </style>    </head>    <body>        <div name="atguigu_llc">李立超</div>        <div name="atguigu_xfz">曉飛張</div>        <div name="atguigu_bhj">白浩傑</div>        <div name="atguigu_sym">腿長1米8</div>        <div>佟剛</div>        <div>陳雷</div>        <div>李賀飛</div>    </body>

02_存在和值屬性選取器.html

<head>        <meta charset="UTF-8">        <title>存在和值屬性選取器</title>        <style type="text/css">            /*             [attr=val]：該選取器僅選擇 attr 屬性被賦值為 val 的所有元素。            */            [name="atguigu_llc"]{                background: pink;            }        </style>    </head>    <body>        <div name="atguigu_llc">李立超</div>        <div name="atguigu_xfz">曉飛張</div>        <div name="atguigu_bhj">白浩傑</div>        <div name="atguigu_sym">腿長1米8</div>        <div>佟剛</div>        <div>陳雷</div>        <div>李賀飛</div>    </body>

03_存在和值屬性選取器.html

<head>        <meta charset="UTF-8">        <title>存在和值屬性選取器</title>        <style type="text/css">            /*             [attr~=val]：該選取器僅選擇 attr 屬性的值（以空格間隔出多個值）中有包含 val 值的所有元素，                比如位於被空格分隔的多個類（class）中的一個類。            */            [name~="atguigu"]{                background: pink;            }        </style>    </head>    <body>        <div name="atguigu_llc atguigu">李立超</div>        <div name="atguigu_xfz">曉飛張</div>        <div name="atguigu_bhj atguigu">白浩傑</div>        <div name="atguigu_sym">腿長1米8</div>        <div>佟剛</div>        <div>陳雷</div>        <div>李賀飛</div>    </body>

二、子串值屬性選取器

1、子串值屬性選取器

        /*子串值屬性選取器*/        [attr|=val] : 選擇attr屬性的值是val（包括val）或以val-開頭的元素。        [attr^=val] : 選擇attr屬性的值以val開頭（包括val）的元素。        [attr$=val] : 選擇attr屬性的值以val結尾（包括val）的元素。        [attr*=val] : 選擇attr屬性的值中包含字串val的元素。

2、代碼執行個體：

<head>        <meta charset="UTF-8">        <title>存在和值屬性選取器</title>        <style type="text/css">            /*             [attr|=val] : 選擇attr屬性的值以val（包括val）或val-開頭的元素             [attr^=val] : 選擇attr屬性的值以val開頭（包括val）的元素。             [attr$=val] : 選擇attr屬性的值以val結尾（包括val）的元素。             [attr*=val] : 選擇attr屬性的值中包含字串val的元素。            */            [name^="atguigu"]{                background: pink;            }        </style>    </head>    <body>        <div name="atguigu-llc atguigu">李立超</div>        <div name="atguigu-xfz">曉飛張</div>        <div name="atguigu-bhj atguigu">白浩傑</div>        <div name="atguigu_sym">腿長1米8</div>        <div>佟剛</div>        <div>陳雷</div>        <div>李賀飛</div>    </body>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More