[CSS/DIV] Analyze the usage of the four major CSS attribute value selectors

This article will describe it to youCSS property value selectorThe format of the attribute selector is element followed by parentheses, with attributes in parentheses, or attribute expressions (I don't know if the description is correct, self-created words), such as h1[title], h1[title="logo"], etc., I believe you will learn a lot in this article.

CSS Tutorial: CSS Attribute Value Selector

CSS AttributeSelectors, perhaps you should not be unfamiliar with attribute selectors, in essence, id and class selectors are actually attribute value selectors, just select the id or class value.

The format of the attribute selector is element followed by parentheses, with attributes in parentheses, or attribute expressions (I don't know if the description is correct, self-created words), such as h1[title], h1[title="Logo"], etc., you can see 4 specific forms from my discussion below.

1. Simple CSS attribute value selector

Regardless of the name, this is the characteristic of the simple attribute selector.

h1[class]{color:silver; will act on any h1 element with class, regardless of the value of the class. Therefore<h1class="hoopla">Hello</h1>, <h1class="severe">Serenity</h1>, <h1class="fancy"> h1 of Fooling</h1> will be affected by this rule.

Of course, this "property" is not just a class or id, but can be all legitimate properties of the element, such as img's alt, such as img[alt]{cssdeclarationshere; will apply to any img element with the alt attribute. Then a[href][title]{font-weight:bold; What about }? As you know, this works on elements with both href and title attributes, such as <atitle="W3CHome">W3C</a>.

2. Precise CSS attribute value selector

id and class are essentially exact attribute value selectors, yes, h1#logo is equal to h1[id="logo"]. As mentioned earlier, we don't limit ourselves to id or class, we can use any property! For example, a[][title="W3CHome"]{font-size:200%; } will be applied to <atitle="W3CHome">W3C</a>.

3. Some CSS attribute value selectors

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

Any of these can make the font of the p bold.

This selector is very useful, for example, if you want to style an illustration with the string "Figure" in its title, e.g. title="Figure5:xxx description", you can use img[title~="Figure"].

It should be noted that as I emphasized in the first sentence, you need to match the whole word, and img[title~="Figure"] will not match title="Figure5:xxx description".

Also, I did a little test, you change "Figure" to "Illustration" in the example, and change img[title~="Figure"] to img[title~="Illustration"], and it still matches in Firefox, regardless of whether the encoding is GB2312 or UTF-8. It seems that CSS support for Chinese is not bad.

4. Special CSS attribute value selector

Kind of weird, this selector. It works like this, well, it's easier to give an example than to describe it.

*[lang|="en"]{color:white; This rule will select the value of the attribute lang or the element that starts with en-. That is, it can match <h1lang="en">Hello!</h1>, <plang="en-us">Greetings!</p>and <divlang="en-au">G'day!</div>and does not match<plang="fr">Bonjour!</p>and <h3lang="cy-en">Jrooana!</h3>.