CSS类中的通配符选择器（*，^和$）用法指南

通配符选择器用于同时选择多个元素。它选择类名或属性的相似类型并使用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 >

输出如下：