×

CSS【屬性選擇器】

元智汇电子 元智汇电子 发表于2023-09-26 12:48:38 浏览101 评论0

抢沙发发表评论

属性选择器.png



属性选择器(Attribute Selector)是 CSS 中的一种选择器,允许您选择具有特定属性的元素。属性选择器以方括号 `[]` 包围属性名和属性值组合。以下是一些常见的属性选择器示例:


1. 属性存在选择器:选择具有指定属性的元素,不考虑属性值。


   image.png


   上述规则将选择所有具有 `data-toggle` 属性的元素,无论其值是什么。


2. 属性值精确匹配选择器:选择具有指定属性和精确属性值的元素。


  image.png


   上述规则将选择具有 `data-color` 属性且其值为 "red" 的元素。


3. 属性值前缀选择器:选择具有以指定字符串开头的属性值的元素。


  image.png


   上述规则将选择具有 `class` 属性且其值以 "btn" 开头的元素。


4. 属性值包含选择器:选择具有包含指定字符串的属性值的元素。


 image.png


   上述规则将选择具有 `href` 属性且其值包含 "example.com" 的元素。


5. 属性值后缀选择器:选择具有以指定字符串结尾的属性值的元素。


   image.png


   上述规则将选择具有 `src` 属性且其值以 ".jpg" 结尾的元素。


6. 属性值包括空格分隔的选择器:选择具有包括指定值的属性值的元素,其中属性值是以空格分隔的一系列值。


  image.png


   上述规则将选择具有 `class` 属性,其中包括 "active" 作为一个独立词的元素。


这些属性选择器允许您根据元素的属性及其属性值选择元素,从而实现更精确的样式定位。属性选择器对于处理特定数据属性、类名或其他属性相关的元素非常有用。


群贤毕至

访客