What is the attribute selector of css? Using attribute selectors

What is the attribute selector of css? This article will talk to you about the CSS attribute selector, so that you can understand what the attribute selector does and how to use it. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

What is the css attribute selector? What is the use?

Elements in HTML can have attributes, which are additional values ​​that display or modify their behavior. HTML contains many attributes, but not all attributes are applicable to all HTML elements. Properties unrelated to the element have no effect on it.

Regardless of whether the property is applied correctly, you can still select it via CSS. However, using invalid HTML attributes anywhere on your website is a very bad practice because different browsers interpret invalid HTML differently. You can't blame the browser for making your site look weird, they're just trying to explain your error code by filling in the gaps.

However, the CSS attribute selector allows us to select elements with specific attributes or specific value attributes, that is: we can find the corresponding tag according to the specified attribute name, and then set the attribute. [Related video tutorials recommended: css3 tutorial]

Usage of css attribute selector

Attribute values ​​in html Must be an identifier or a string. The specification is rather vague, as it states that case sensitivity of property names and values ​​in selectors depends on the document language. Due to the fact that browsers behave inconsistently, the safest thing to do is to ensure that the cases you use are consistent between CSS and HTML.

Attribute selectors can be matched in 7 ways (starting from the CSS3 specification):

1, [e8aa4f7ce323535a9b01247c46fe6139]

Position all An element containing the e8aa4f7ce323535a9b01247c46fe6139 attribute, regardless of its value.

Example:

<div data-colour="green"></div>
<div data-colour="blue"></div>
<div data-colour="yellow"></div>

css code selection:

[data-colour] { 
   /* 一些性质，例：color..... */ 
}

2, [e8aa4f7ce323535a9b01247c46fe6139=8487820b627113dd990f63dd2ef215f3]

Locate all elements whose e8aa4f7ce323535a9b01247c46fe6139 attribute value is 8487820b627113dd990f63dd2ef215f3.

<div data-colour="green"></div>

[data-colour="green"] { 
    /* 一些性质 */ 
}

3, [e8aa4f7ce323535a9b01247c46fe6139~=8487820b627113dd990f63dd2ef215f3]

Use the e8aa4f7ce323535a9b01247c46fe6139 attribute to locate the element, its value is a space-separated list of words , one of which must be 8487820b627113dd990f63dd2ef215f3.

8487820b627113dd990f63dd2ef215f3 itself cannot contain spaces or be an empty string.

<div data-colour="green yellow blue"></div>

[data-colour~="green"] { 
    /* 一些性质 */ 
}

4, [e8aa4f7ce323535a9b01247c46fe6139|=8487820b627113dd990f63dd2ef215f3]

Use the e8aa4f7ce323535a9b01247c46fe6139 attribute to locate an element whose value is exactly 8487820b627113dd990f63dd2ef215f3 or Begins with 8487820b627113dd990f63dd2ef215f3, followed by "-".

Note: Mainly used for language subcode matching, such as "en", "en-US" and "en-UK".

<div data-colour="green-table"></div>
<div data-colour="green-chair"></div>
<div data-colour="green-bottle"></div>

[data-colour|="green"] { 
    /* 一些性质 */ 
}

5, [e8aa4f7ce323535a9b01247c46fe6139^=8487820b627113dd990f63dd2ef215f3]

Substring matching selector. Use the e8aa4f7ce323535a9b01247c46fe6139 attribute to locate elements whose values ​​begin with 8487820b627113dd990f63dd2ef215f3.

Note: 8487820b627113dd990f63dd2ef215f3 cannot be an empty string.

<div data-colour="greenish-yellow"></div>
<div data-colour="greengoblin"></div>

[data-colour^="green"] { 
    /* 一些性质 */ 
}

6, [e8aa4f7ce323535a9b01247c46fe6139$=8487820b627113dd990f63dd2ef215f3]

Substring matching selector. Use the e8aa4f7ce323535a9b01247c46fe6139 attribute to locate elements whose values ​​end with 8487820b627113dd990f63dd2ef215f3.

Note: 8487820b627113dd990f63dd2ef215f3 cannot be an empty string.

<div data-colour="yellowish-green"></div>
<div data-colour="seagreen"></div>

[data-colour$="green"] { 
    /* 一些性质 */ 
}

7, [e8aa4f7ce323535a9b01247c46fe6139*=8487820b627113dd990f63dd2ef215f3]

Substring matching selector. Use the e8aa4f7ce323535a9b01247c46fe6139 attribute to locate elements whose value contains an instance of 8487820b627113dd990f63dd2ef215f3.

Note: 8487820b627113dd990f63dd2ef215f3 cannot be an empty string.

<div data-colour="goblingreenish"></div>

[data-colour*="green"]{ 
    /* 一些性质 */ 
}

Combined attribute selectors

Attribute selectors have the same specific level as classes and pseudo-classes; you can combine attribute selectors with Other selectors such as element, class or ID are combined together. Example:

div[data-colour="green"] {
  /* 特异性为11 */
}
.swatch[data-colour="green"] {
  /* 特异性为20 */
}
#tile25[data-colour="green"] {
  /*特异性为110 */
}

You can also combine multiple attribute selectors to match specific patterns. For example, if you only wanted to target 2x images with alt text containing the word "green", your selector would look like this:

img[srcset~="2x"][alt*="green"] { 
    /* 一些性质 */ 
}

Additionally, since the attribute value is read as a string, You don't have to worry about escaping special characters to make them match, unlike with classes or IDs. This means we are free to have the following:

[data-emotion="

The above is the detailed content of What is the attribute selector of css? Using attribute selectors. For more information, please follow other related articles on the PHP Chinese website!