通配符选择器用于同时选择多个元素。它选择类名或属性的相似类型并使用CSS属性。 *通配符也称为包含通配符。
[attribute*="str"]选择器： [attribute*="str"]选择器是用于选择元素的属性值包含指定的子字符串str。这个例子展示了如何使用一个通配符选择所有div包含str类。这可能在一开始,结束或中间的类。
语法如下：
[attribute*="value"] {
// CSS property
}例子：
<!DOCTYPE html>
< html >
< head >
< style >
/* Define styles of selected items, h1 and
rest of the body */
[class*="str"] { /* WE USE * HERE */
background: green;
color: white;
}
h1 {
color:green;
}
body {
text-align:center;
width:60%;
}
</ style >
</ head >
< body >
< h1 >lsbin</ h1 >
<!-- Since we have used * with str, all items with
str in them are selected -->
< div class = "first_str" >The first div element.</ div >
< div class = "second" >The second div element.</ div >
< div class = "my-strt" >The third div element.</ div >
< p class = "mystr" >Paragraph Text</ p >
</ body >
</ html >输出如下：
[attribute ^ =" str"]选择器：[attribute ^ =" value"]选择器用于选择属性值以指定值开头的那些元素str。本示例说明如何使用通配符选择以开头的类的所有divstr.
语法如下：
[attribute^="str"] {
// CSS property
}例子：
<!DOCTYPE html>
< html >
< head >
< style >
[class^="str"] { /*WE USE ^ HERE */
background: green;
color: white;
}
h1 {
color:green;
}
body {
text-align:center;
width:60%;
}
</ style >
</ head >
< body >
< h1 >lsbin</ h1 >
<!-- All items beginning with str are highlighted -->
< div class = "strfirst" >The first div element.</ div >
< div class = "strsecond" >The second div element.</ div >
< div class = "str-start" >The third div element.</ div >
< div class = "end-str" >The fourth div element.</ div >
< p class = "my" >Paragraph Text</ p >
</ body >
</ html >输出如下：
[attribute $ =" str"]选择器：[attribute $ =" value"]选择器用于选择属性值以指定值结尾的那些元素str。下面的示例选择所有以class属性值结尾的元素str.
语法如下：
[attribute$="str"] {
// CSS property
}例子：
<!DOCTYPE html>
< html >
< head >
< style >
[class$="str"] { /* WE USE $ HERE */
background: green;
color: white;
}
h1 {
color:green;
}
body {
text-align:center;
width:60%;
}
</ style >
</ head >
< body >
< h1 >lsbin</ h1 >
<!-- All items ending with str are highlighted -->
< div class = "firststr" >The first div element.</ div >
< div class = "stsecondstr" >The second div element.</ div >
< div class = "start" >The third div element.</ div >
< p class = "mystr" >This is some text in a paragraph.</ p >
</ body >
</ html >输出如下：
