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 <h1 class="hoopla">Hello</h1>, <h1 class="severe">Serenity</h1>, <h1 class="fancy">Fooling</h1> 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 <a href="http://php.cn/" title="php Home"></a> .
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="http://php.cn/"][title="W3C Home"] {font-size: 200%;} will work on<a href="http://php.cn /" title="php Home"></a>.
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:
<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;}
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
h1[title]{
color:red;
}
</style>
</head>
<body>
<h1 title = "属性选择器">标题<h1>
<p>这是内容</p>
<h1>标题<h1>
<p>这是内容</p>
</body>
</html>[title='hello']: Select the element whose attribute is title and whose value is hello
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
h1[title = "hello"]{
color:red;
}
</style>
</head>
<body>
<h1 title = "属性选择器">标题<h1>
<p>这是内容</p>
<h1 title = "hello">标题<h1>
<p>这是内容</p>
</body>
</html>[title*='hello']: Select the element whose attribute is title and which contains hello
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
h1[title*="hello"]{
color:red;
}
</style>
</head>
<body>
<h1 title = "hellocss">标题<h1>
<p>这是内容</p>
<h1 title = "hello css">标题<h1>
<p>这是内容</p>
</body>
</html>
