30个最常用css选择器解析（4）
作者：iiduce 发布时间：2011-06-16 20:36:37
标签：css选择器,css,浏览器
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％;
}
0
投稿猜你喜欢
- 本文实例讲述了python判断字符串是否纯数字的方法。分享给大家供大家参考。具体如下：判断的代码如下,通过异常判断不能区分前面带正负号的区别
- MySQL报错：错误代码： 1293 Incorrect table definition; there can be only one T
获取用户信息调用 wx.getUserProfile 方法获取用户基本信息。页面产生点击事件（例如 button 上 bindtap 的回调- 导语在设计论坛之前的讨论中曾经谈到过“设计师应该抓住这个时代的情感”，这是设计师的设计嗅觉和职业特性的体现，那么在纷纷扰扰中“裂变”的Web
- 什么是模式前阵子准备期末考试，劳神又伤身的，实在闲不得空来更新文章，今天和大家说说javascript中的设计模式。首先呢，我们需要知道的是
- 一、介绍Python：python代码解释器，用于编译.py代码，python可以单独安装，本次环境配置目的用于解决计算机视觉处理，因此选用
- 1、数据库--所有数据库的大小 exec sp_helpdb --所有数据库的状态 sel
- 概述在view函数中，如果需要中断request，可以使用abort(500)或者直接raise exception。当然我们还需要返回一个
- 思路非常简单：<p>创建window，设置窗口大小，创建label1，导入图片，创建label2，导入文字，show，结束！&l
- Selenium中的鼠标和键盘事件被封装在ActionChains类中，使用方法：ActionChains(driver).click(bt
- 如何在一段文字里点一下就可以在里面插入一段文字？ 如题，不要用编辑器之类的来实现。高手们帮忙呀。 <SCRIPT LANG
- 话说网站首页是用.NET语言写的，而二级栏目页却是用ASP写的，然后再配上众多全手工的静态专题页，整个网站形成了一个大杂烩。想要在这大杂烩中
- 疫情数据程序源码// An highlighted blockimport requestsimport jsonclass epidemi
- 很多朋友问过我absolute与relative怎么区分，怎么用？我们都知道absolute是绝对定位，relative是相对定位，但是这个
- 与抓取预定义好的页面集合不同，抓取一个网站的所有内链会带来一个 挑战，即你不知道会获得什么。好在有几种基本的方法可以识别页面类型。通过URL
- 放到公用调用文件（如conn数据库链接文件），对所有GET或POST的数据进行过滤特殊字符串，以实现简单有效的SQL注入过滤Function
- 介绍今天有个不正经的需求，就是要快速做一个restful api的性能测试，要求测试在海量作业数据的情况下客户端分页获取所有作业的性能。因为
- 了兑现我对大家的承诺，我们现在立即就将“借助数据库和ASP程序”编写出来的，可以同时适用于IIS和P
- 一、背景 简单的写个.exe程序，没必要去学习mfc、c++等，可以学习python。python可以轻易的调用windows的api，轻松
- 下面是例子分析表A记录如下： aID aNum
