CSS高级篇——属性选择器 (attribute selectors)

Posted 2022-10-05 feelang

属性选择器可以定位到拥有某个属性的元素，甚至可以精确到具体的属性值。

属性匹配

选择器后面跟一个方括号，方括号内是属性名：

abbr[title]  
    border-bottom: 1px dotted #ccc;

上述代码的含义是：为有 title 属性的 abbr 标签添加一条灰色的下划线。

属性值匹配

用法与上面类似，只不过还可以进一步指定属性值：

input[type=text]  
    width: 200px; 

上述代码只会作用于 “type” 属性值为 “text” 的 “input” 标签：<input type="text">。

除此之外，还可以同时指定多个属性：

input[type=text][disabled]  
    border: 1px solid #ccc;
 

属性模糊匹配

CSS3 进一步扩展了属性选择器的用法：

• [attribute^=something] - 匹配以 “something” 开头的属性
• [attribute$=something] - 匹配以 “something” 结尾的属性
• [attribute*=something] - 匹配含有 “something” 属性

举个例子，下面代码可以让外部链接（以 “http” 开头）的样式区别于内部链接：

a[href^=http] 
    padding-right: 10px;
    background: url(arrow.png) right no-repeat;