30个最常用css选择器解析(4)
作者:iiduce 时间:2011-06-16 20:36:37
14. X[data-*="foo"]
在上一个选择器中提到如何匹配所有图片链接。如果使用X[href$=".jpg"]实现,需要这样做:
a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
color: red;
}
看上去比较麻烦。另一个解决办法是为所有的图片链接加一个特定的属性,例如‘data-file’
html代码
<a href="path/to/image.jpg" data-filetype="image"> 图片链接 </a>
css代码如下:
a[data-filetype="image"] {
color: red;
}
这样所有链接到图片的链接字体颜色为红色。
兼容浏览器:IE7+、Firefox、Chrome、Safari、Opera
15. X[foo~="bar"]
属性选择器。属性选择器中的波浪线符号可以让我们匹配属性值中用空格分隔的多个值中的一个。看下面例子:
html代码
<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>
css代码
a[data-info~="external"] {
color: red;
}
a[data-info~="image"] {
border: 1px solid black;
}
在上面例子中,匹配data-info属性中包含“external”链接的字体颜色为红色。匹配data-info属性中包含“image”的链接设置黑色边框。
兼容浏览器:IE7+、Firefox、Chrome、Safari、Opera
17. X:checked
checked伪类用来匹配处于选定状态的界面元素,如radio、checkbox。
input[type=radio]:checked {
border: 1px solid black;
}
上面代码中匹配的是所有处于选定状态的单选radio,设置1px的黑色边框。
兼容浏览器:IE9+、Firefox、Chrome、Safari、Opera
18. X:after和X:before
这两个伪类与content结合用于在元素的前面或者后面追加内容,看一个简单的例子:
h1:after {content:url(/i/logo.gif)}
上面的代码实现了在h1标题的后面显示一张图片。
我们也经常用它来实现清除浮动,写法如下:
.clearfix:after {
content: "";
display: block;
clear: both;
visibility: hidden;
font-size: 0;
height: 0;
}
.clearfix {
*display: inline-block;
_height: 1%;
}
标签:css选择器,css,浏览器
0
投稿
猜你喜欢
Vue.js 的过滤器你了解多少
2024-04-28 09:26:37
CentOS6.9 Python环境配置(python2.7、pip、virtualenv)
2022-04-30 14:37:08
python实现简单聊天应用 python群聊和点对点均实现
2023-01-16 08:35:55
Sql语句优化注意
2009-10-31 13:15:00
了解不常见但是实用的Python技巧
2022-10-12 09:07:35
SQLServer数据库从高版本降级到低版本实例详解
2024-01-22 17:25:54
python 爬取国内小说网站
2022-11-30 16:02:04
一次mysql迁移的方案与踩坑实战记录
2024-01-13 03:34:42
PHP CURL CURLOPT参数说明(curl_setopt)
2023-11-14 19:06:44
Go到底能不能实现安全的双检锁(推荐)
2024-04-26 17:36:49
Java读取数据库表的示例代码
2024-01-15 05:41:08
Python实现根据Excel生成Model和数据导入脚本
2022-01-10 09:58:12
TP3.2批量上传文件或图片 同名冲突问题的解决方法
2024-05-03 15:29:55
在go语言中安装与使用protobuf的方法详解
2024-04-25 15:27:32
python3字符串操作总结
2023-08-23 22:31:23
ASP.NET(AJAX+JSON)实现对象调用
2023-07-19 12:29:33
10个python爬虫入门实例(小结)
2021-04-21 01:08:57
asp如何在网站上提供音乐下载?
2010-06-22 21:14:00
如何将自己写的模块上传到pypi
2022-06-19 10:47:06
python3爬虫之入门基础和正则表达式
2023-04-11 12:48:02