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

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

属性匹配

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

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;
}

CSS高级篇——属性选择器 (attribute selectors)相关推荐

HTML与CSS基础之属性选择器(二)
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>属性选 ...
CSS高级篇——圆角
圆角会让生硬的背景图变得更圆润,可以起到很好的修饰作用. 边框半径 border-radius 属性可以让盒子(box)的四个角变成圆角,这个属性名有误导性,其实没有边框依然可以变圆角. #maril ...
CSS高级篇——过渡动画
CSS Transitions 让我们不写一行 JavaScript 代码也能实现过渡动画. 举一个最简单的例子: a:link {color: hsl(36,50%,50%); } a:hover ...
CSS高级篇——渐变 (gradient)
配合 background 和 background-image 可以实现线性(linear)和辐射(radial)渐变. 线性渐变 linear-gradient 可以实现线性渐变. backgro ...
css里面有哪些选择器
css中选择器有:1.简单选择器:2.属性选择器:3.组合选择器:4.伪类选择器:5.伪元素选择器:6.多重选择器. 本文操作环境:windows7系统.CSS3版.Dell G3电脑. CSS选择器 ...
深入学习jQuery选择器系列第四篇——过滤选择器之属性选择器
前面的话属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素,对应于CSS中的属性选择器.属性过滤选择器可分为简单属性选择器.具体属性选择器和条件属性选择器三种.本文将详细该部分内容简单属性选 ...
css 属性选择器笔记
1.基本选择器: eg: *{margin:0;padding:0}p{color:black}.content{background:red;}#intro{padding-left:2em;} 2 ...
HTML5+CSS笔记教程（CSS教程篇）
我所看的B站教程:最新最全HTML5-CSS3教程_哔哩哔哩_bilibili 官方文档:Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Spe ...
jQuery对象，jQuery查找标签，层级选择器，属性选择器，表单筛选器，操作节点标签事件...
目录 jQuery jQuery介绍 jQuery的优势 jQuery版本 jQuery内容: jQuery对象 jQuery基础语法查找标签基本选择器层级选择器: 基本筛选器: 属性选择器表 ...

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

属性匹配

属性值匹配

属性模糊匹配

CSS高级篇——属性选择器 (attribute selectors)相关推荐

最新文章

热门文章