[分享]css中属性选择符

CSS中属性选择符是一种很有用的CSS选择器，它可以根据元素的特定属性来选择对应的元素。属性选择符以方括号 包围一个属性名称和可选值匹配模式组成。p { color: blue; } 上面的代码中，属...

CSS中属性选择符是一种很有用的CSS选择器，它可以根据元素的特定属性来选择对应的元素。属性选择符以方括号 [] 包围一个属性名称和可选值匹配模式组成。

p[title] {
    color: blue;
} 

上面的代码中，属性选择符匹配所有带有title属性的p元素。可以看到，属性选择符在方括号中指定属性的名称，不带值匹配模式。

p[title="example"] {
    color: blue;
} 

上面的代码中，属性选择符匹配所有title属性值为"example"的p元素。可以看到，属性名称和属性的值由一个等号隔开，等号两边分别是属性名称和属性值。

p[title^="ex"] {
    color: blue;
} 

上面的代码中，属性选择符匹配所有title属性值以"ex"开头的p元素。可以看到，属性值匹配模式以脱字符 ^ 开头，表示匹配以指定文本开头的值。

p[class$="ex"] {
    color: blue;
} 

上面的代码中，属性选择符匹配所有class属性值以"ex"结尾的p元素。可以看到，属性值匹配模式以美元符 $ 结尾，表示匹配以指定文本结尾的值。

p[class*="ex"] {
    color: blue;
} 

上面的代码中，属性选择符匹配所有class属性值包含"ex"的p元素。可以看到，属性值匹配模式以星号 * 开头，表示匹配包含指定文本的值。

通过属性选择符，我们可以轻松地选择页面中的元素，并为其添加样式。属性选择符是CSS中非常重要的选择器之一，要尽量熟练掌握。