通配符选择器用于同时选择多个元素。它选择类名或属性的相似类型并使用CSS属性。 *通配符也称为包含通配符。
[attribute*="str"]选择器: [attribute*="str"]选择器是用于选择元素的属性值包含指定的子字符串str。这个例子展示了如何使用一个通配符选择所有div包含str类。这可能在一开始,结束或中间的类。
【CSS类中的通配符选择器(*,^和$)用法指南】语法如下:
[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 >
输出如下:
文章图片
推荐阅读
- 怎么实现堆排序(详细解析和代码实现)
- jQuery如何使用:first-of-type选择器(用法示例)
- HTML编辑器介绍和用法示例
- Python中的关键字用法解析和代码实例
- 操作系统中的线程简要指南
- PHP如何使用ImagickDraw point()函数(用法示例)
- PHP如何使用SplObjectStorage count()函数(用法示例)
- Veritas面试体验详细分享|S4(校园)
- PHP如何使用checkdate()函数(用法示例)