Attribute Selectors in the tutorial www.bkjia.com. 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,
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 already know that this will act on a element with both the href and title attributes, such as <a href = "http://www.bkjia.com/" title = "bkjia.com"> </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.bkjia.com/"] [title = "W3C Home"] {font-size: 200% ;} will act on <a href = "http://www.bkjia.com/" title = "liehuo webmaster"> </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