CSS Attribute Selectors is an important selector of CSS. Starting from CSS 2.1, designers can use the attributes of web elements to select them. The advantage is that they can also be selected without additional ID or Class for these web elements. CSS Attribute Selectors can use a variety of different syntaxes, such as using the name of the attribute or including the attribute value at the same time, and even selecting elements with certain characters in the attribute value, which is quite flexible.
Common CSS Attribute Selectors syntax is [attribute], [attribute=value], [attribute~=value], [attribute|=value], [attribute^=value], [attribute$=value] and [attribute*=value] ], it seems a bit complicated, but don’t worry, we will use the example to show you.
[attribute]
img[title] {
border: 1px gray solid;
}
This means to select the image element ( img ) in the webpage and the image element must have a title attribute. If the image without the title attribute will not be selected, on the contrary, the image with the title attribute will be added with a gray border. The border in the example is used to design the border.border: 1px gray solid;
}
[attribute=value]
img[title="photo"] {
border: 1px gray solid;
}
Continuing the previous example, here we have added the syntax of "=photo" to the CSS Attribute Selector, which means that the image on the webpage has a title attribute and the attribute value is photo. The image without the photo attribute value will not Will be selected.border: 1px gray solid;
}
[attribute~=value]
<!DOCTYPE html>
<html>
<head>
<style>
img[title~="photo1"] {
border: 1px gray solid;
}
</style>
</head>
<body>
<img src="sample picture" title="photo1 good">
<img src="sample picture" title="photo2 good">
</body>
</html>
In this example, the (~) symbol is added in front of the equal sign of the attribute value, which means that the image in the webpage to be selected has a title attribute, and the attribute value must be a string separated by spaces, and one of them must be photo1, so It will be selected. Like the second image in the example, if the title attribute value does not contain photo1, it will not be selected.<html>
<head>
<style>
img[title~="photo1"] {
border: 1px gray solid;
}
</style>
</head>
<body>
<img src="sample picture" title="photo1 good">
<img src="sample picture" title="photo2 good">
</body>
</html>
[attribute|=value]
<!DOCTYPE html>
<html>
<head>
<style>
span[title|="T1"] {
color:blue;
}
</style>
</head>
<body>
<span title="T1">This paragraph The text will become blue</span><br>
<span title="T1-22">This text will become blue</span><br>
<span title="T2">This paragraph The text will remain the original black</span>
</body>
</html>
The actual effect of the example<html>
<head>
<style>
span[title|="T1"] {
color:blue;
}
</style>
</head>
<body>
<span title="T1">This paragraph The text will become blue</span><br>
<span title="T1-22">This text will become blue</span><br>
<span title="T2">This paragraph The text will remain the original black</span>
</body>
</html>
This text will turn blue.
This text will turn blue.
This text will remain black.
This writing means that the CSS Attribute Selector will only select the title attribute in the span element, and the title attribute value must contain at least one T1 or T1 followed by a horizontal line symbol (-), so the first span and the first span of the example Both spans will be selected, and the third span will not be selected.This text will turn blue.
This text will remain black.
[attribute^=value]
<!DOCTYPE html>
<html>
<head>
<style>
span[title^="T1"] {
color:red;
}
</style>
</head>
<body>
<span title="T1">This paragraph The text will turn red</span><br>
<span title="T12">This text will turn red</span><br>
<span title="T2">This text will remain The original black</span>
</body>
</html>
The actual effect of the example<html>
<head>
<style>
span[title^="T1"] {
color:red;
}
</style>
</head>
<body>
<span title="T1">This paragraph The text will turn red</span><br>
<span title="T12">This text will turn red</span><br>
<span title="T2">This text will remain The original black</span>
</body>
</html>
This text will turn red.
This text will turn red.
This text will remain black.
In this example, the CSS Attribute Selector will only select the span element that contains T1 at the beginning of the string in the title attribute value . No matter whether there are other characters after T1, it will be selected, but if it does not contain T1 or T1 is not in the string The beginning will not be selected.This text will turn red.
This text will remain black.
[attribute$=value]
<!DOCTYPE html>
<html>
<head>
<style>
span[title$="T1"] {
color:green;
}
</style>
</head>
<body>
<span title="ABC-T1"> This text will become green</span><br>
<span title="DEF-T1">This text will become green</span><br>
<span title="DEF-T2"> This text will remain the original black</span>
</body>
</html>
The actual effect of the example<html>
<head>
<style>
span[title$="T1"] {
color:green;
}
</style>
</head>
<body>
<span title="ABC-T1"> This text will become green</span><br>
<span title="DEF-T1">This text will become green</span><br>
<span title="DEF-T2"> This text will remain the original black</span>
</body>
</html>
This text will turn green
This text will turn green
This text will remain the original black
In this example, adding a $ sign before the equal sign will make the CSS Attribute Selector select the span element with T1 at the end of the title attribute value. For example , the title attribute value of the first span and the second span have T1 at the end. So it will be selected, and the title attribute value of the third span does not have T1 at the end, so it will not be selected.This text will turn green
This text will remain the original black
[attribute*=value]
<!DOCTYPE html>
<html>
<head>
<style>
span[title$="T1"] {
color:orange;
}
</style>
</head>
<body>
<span title="ABC-T1-23 ">This text will turn orange</span><br>
<span title="DEF-T122">This text will turn orange</span><br>
<span title="DEF-T2 ">This text will remain the original black</span>
</body>
</html>
The actual effect of the example<html>
<head>
<style>
span[title$="T1"] {
color:orange;
}
</style>
</head>
<body>
<span title="ABC-T1-23 ">This text will turn orange</span><br>
<span title="DEF-T122">This text will turn orange</span><br>
<span title="DEF-T2 ">This text will remain the original black</span>
</body>
</html>
This text will turn orange.
This text will turn orange.
This text will remain black.
This way of writing will make the CSS Attribute Selector select the span element that contains the T1 character in the title attribute value, no matter which part of the T1 is in the title attribute value, so the first span and the second span in the example will be selected, and The title attribute value of the third span does not contain T1, so it will not be selected.This text will turn orange.
This text will remain black.
Post a Comment
0 Comments