[分享]css3属性选择器用法

 CSS3 引入了许多新的属性选择器，让 CSS 更加的方便和强大。属性选择器通过匹配元素的属性和属性值来选中元素，从而实现样式的设置。下面介绍一些常用的属性选择器： { fontsize: 16px...

 CSS3 引入了许多新的属性选择器，让 CSS 更加的方便和强大。属性选择器通过匹配元素的属性和属性值来选中元素，从而实现样式的设置。下面介绍一些常用的属性选择器：

[class] {
    font-size: 16px;
    color: red;
} 

对于所有具有 class 属性的元素设置字体大小为 16px，颜色为红色。

[class*=”btn”] {
    background-color: #007bff;
    color: white;
} 

选中 class 属性值中包含 “btn” 子字符串的所有元素，设置背景颜色为 #007bff，字体颜色为白色。

[attribute^=”value”] {
    border: 2px solid black;
} 

选中属性值以 “value” 开始的所有元素，设置边框为 2px 的实线黑色。

[attribute$=”value”] {
    border-radius: 10px;
} 

选中属性值以 “value” 结尾的所有元素，设置边框圆角为 10px。

[attribute|=”value”] {
    border: 1px dashed #ccc;
} 

选中具有属性值为 “value” 或者以 “value-” 开头的所有元素，设置边框为 1px 的虚线灰色。

综上所述，属性选择器提供了更灵活更精细的元素选择方式，可以让我们更加方便地修改和定制网站的样式。