Four formats of CSS attribute Selector

Attribute selectors, you may not be unfamiliar with the attribute selector. In essence, ID and class selector are actually attribute selectors, only the ID or class value is selected.

The format of the attribute selector is element followed by brackets. The brackets contain attributes or attribute expressions (you do not know whether the description is correct or not, and your own words), such as H1 [title], h1 [Title = "logo"] and so on. You can see four specific forms from my discussion below.

Note that attribute selector IE6 does not support

1. Simple attribute Selector

This is a feature 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, <H1 class = "hoopla"> Hello

Of course, this "attribute" is not only a class or ID, it can be all valid attributes of the element, such as img alt, so IMG [alt] {CSS declarations here ;} it will act on any IMG element with the alt attribute. So what about a [href] [title] {font-weight: bold? You must be wise to know that this will act on elements a with both href and title attributes, such as <a href = "http://www.mb5u.com/" Title = "mb5u home"> </a>.

2. Precise attribute value Selector

IDS and classes are essentially precise attribute value selectors. That's right. H1 # logo is equivalent to H1 [ID = "logo"]. As mentioned above, we should not be limited to ID or class. We can use any attribute! Example A [href = "http://www.mb5u.com/"] [Title = "W3C home"] {font-size: 200% ;} will act on <a href = "http://www.mb5u.com/" Title = "mb5u home"> </a>.

3. Some attribute value selectors

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

<P class = "urgent warning"> when handling plutonium, care must be taken to avoid the formation of a critical mass. </P> P [class ~ = "Warning"] {font-weight: bold;} and P [class ~ = "Urgent"] {font-weight: bold;} can make the P font bold.

This selector is very useful. For example, if you want to style the illustrations, the title contains the string "figure", such as title = "Figure 5: 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 entire word, IMG [Title ~ = "Figure"] does not match Title = "figure5: XXX description ".

In addition, I did a small test. You changed "figure" in the example to "illustration" and changed IMG [Title ~ = "Figure"] changed to IMG [Title ~ = "Illustration"], can still match in Firefox, regardless of the encoding (encoding) is gb2312 or UTF-8. It seems that CSS supports Chinese characters well.

4. Extraordinary attribute Selector

This selector is a bit strange. It works like this. Well, it is easier to give an example than to describe it.

* [Lang | = "en"] {color: White;}, this rule (rule) selects the value en or en-hitting element of the lang attribute. That is to say, it can match <H1 lang = "en"> hello! </H1>, <p lang = "En-us"> greetings! </P> and <Div lang = "En-Au"> g'day! </Div> does not match <p lang = "FR"> Bonjour! </P> and <H3 lang = "Cy-en"> jrooana! </H3>.