1. What is an attribute selector?

Attribute selector refers to using the attribute tag of html as a selector. Its function is to select the Attributes set styles for HTML elements.

Attribute selectors can set styles for HTML elements with specified attributes, not just class and id attributes.

Warm reminder: If you are using IE browser, attribute selection is not supported in IE6 or lower versions. IE7 only supports the use of attribute selectors when !DOCTYPE is specified.

2. Syntax of attribute selector

Attribute selector is displayed with []. The following example is set for all elements with title attribute. Style:

[title]

　{

　color:red;

　}

Simple attribute selector

It is the characteristic of the simple attribute selector to only care about its name and not its value.

h1[class] {color: silver;} will apply to any h1 element with class, regardless of the value of class. So the h1 of

Hello

,

Serenity

,

Fooling

will be affected by this rule.

Of course, this "attribute" is not just class or id, it can be all legal attributes of the element, such as img's alt, so img[alt]{css declarations here;} will act on any content with img element with alt attribute. What about a[href][title] {font-weight: bold;}? If you are smart, you must already know that this will affect the a element with both href and title attributes, such as .

Precise attribute value selector

id and class are essentially precise attribute value selectors. Yes, h1#logo is equal to h1[id="logo"] . As mentioned before, we are not limited to id or class, we can use any attribute! For example, a[href="//m.sbmmt.com/"][title="W3C Home"] {font-size: 200%;} will work on.

Partial attribute value selector

As the name suggests, as long as the attribute value partially matches (the part here actually matches the entire word) it will act on the element. Let's look at an example:

When handling plutonium, care must be taken to avoid the formation of a critical mass.p[class~="warning"] {font-weight: bold;}

##and

p[class~="urgent"] {font-weight: bold;}
Any of

can make the font of this p thicker.

This selector is very useful. For example, if you want to style an illustration, and the title contains the string "Figure", for example, title = "Figure 5: xxx description", you can Use img[title~="Figure"].

[title]: Select an element with the title attribute

      
  
标题
 
这是内容
 
标题
 
这是内容
  

[title='hello']: Select the element whose attribute is title and whose value is hello

      
  
标题
 
这是内容
 
标题
 
这是内容
  

[title*='hello']: Select the element whose attribute is title and which contains hello

      
  
标题
 
这是内容
 
标题
 
这是内容