p[title] { color: red; }
p[title]
means selecting all elements with specified attributes. <p>
element with title
attribute and set the text color to red. <p>2. Select elements with specified attributes and attribute values: a[href="https://www.example.com"] { text-decoration: none; }
a[href="https://www.example.com"]
Indicates that selecting the <a>
element with the href
attribute value of https://www.example.com
and setting its text decoration to none . <p>3. Select elements starting with the specified attribute value: [class^="btn"] { background-color: orange; }
[class^="btn"]
means selecting all class
Elements whose attribute value starts with btn
and set the background color to orange. <p>2. Selectors containing specific attribute values: [href$=".pdf"] { color: #0f0; }
[href$=". pdf"]
means to select all elements whose href
attribute value ends with .pdf
and set the text color to green. <p>2. Select elements with specified attribute values: [src*="logo"] { width: 100px; height: 100px; }
[src*="logo"]
means selecting all src
Elements containing logo
in their attribute values, and set their width and height to 100 pixels. <p>3. Select elements with empty attribute values: [disabled] { opacity: 0.5; }
[disabled]
means selecting elements with empty disabled
attribute values element and set the transparency to 0.5. <p>4. Select elements with specified attribute values or elements starting with specific attribute values: [href="https://www.example.com"], [href^="https://"] { color: blue; }
[href="https://www.example. com"], [href^="https://"]
means selecting elements with the href
attribute value of https://www.example.com
, and Elements that have an href
attribute value starting with https://
and set the text color to blue.
<p>Summary: The above is the detailed content of In-depth understanding of the usage of CSS attribute selectors. For more information, please follow other related articles on the PHP Chinese website!