[分享]css匹配开头一样

CSS中，选择器可以使用匹配开头一样的方式来选择元素。比如说，我们有以下HTML代码： Hello World Hi there 如果我们想选中所有class以“h”开头的元素，可以使用以下CSS代...

CSS中，选择器可以使用匹配开头一样的方式来选择元素。比如说，我们有以下HTML代码：

<div id="test">
  <p class="hello">Hello World!</p>
  <p class="hi">Hi there!</p>
</div> 

如果我们想选中所有class以“h”开头的<p>元素，可以使用以下CSS代码：

p[class^="h"] {
  color: red;
} 

这个选择器意思是“选择所有class属性以‘h’开头的<p>元素”，结果就是会将所有class为“hello”和“hi”的<p>元素变成红色。

同理，我们也可以使用“匹配结尾一样”的方式，比如：

p[class$="o"] {
  text-decoration: underline;
} 

这意味着“选择所有class属性以‘o’结尾的<p>元素”，结果就是会将所有class为“hello”和“demo”的<p>元素添加下划线。

还可以使用类似“包含”的方式，比如：

p[class*="e"] {
  font-weight: bold;
} 

这个选择器意思是“选择所有class属性包含‘e’的<p>元素”，结果就是会将所有class为“hello”和“demo”的<p>元素加粗。

通过使用这些选择器，我们可以快速选择指定开头、结尾或中间的元素，方便我们的CSS样式编写。