30个最常用css选择器解析(5)
作者:iiduce 发布时间:2011-06-16 20:36:37
标签:css选择器,css,浏览器
19. X:hover
div:hover {
background: #e3e3e3;
}
:hover伪类设定当鼠标划过时元素的样式。上面代码中设定了div划过时的背景色。
需要注意的是,在ie 6中,:hover只能用于链接元素。
这里分享一个经验,在设定链接划过时出现下滑线时,使用border-bottom会比text-decoration显得更漂亮些。代码如下:
a:hover {
border-bottom: 1px solid black;
}
兼容浏览器:IE6+、Firefox、Chrome、Safari、Opera
20. X:not(selector)
div:not(#container) {
color: blue;
}
否定伪类选择器用来在匹配元素时排除某些元素。在上面的例子中,设定除了id为container的div元素字体颜色为blue。
兼容浏览器:IE9+、Firefox、Chrome、Safari、Opera
21. X::pseudoElement
::伪类用于给元素片段添加样式。比如一个段落的第一个字母或者第一行。需要注意的是,这个::伪类只能用于块状元素。
下面的代码设定了段落中第一个字母的样式:
p::first-letter {
float: left;
font-size: 2em;
font-weight: bold;
font-family: cursive;
padding-right: 2px;
}
下面的代码中设定了段落中第一行的样式:
p::first-line {
font-weight: bold;
font-size: 1.2em;
}
兼容浏览器:IE6+、Firefox、Chrome、Safari、Opera
(IE6竟然支持,有些意外啊。)
22. X:nth-child(n)
li:nth-child(3) {
color: red;
}
这个伪类用于设定一个序列元素(比如li、tr)中的第n个元素(从1开始算起)的样式。在上面例子中,设定第三个列表元素li的字体颜色为红色。
看一个更灵活的用法,在下面例子中设定第偶数个元素的样式,可以用它来实现隔行换色:
tr:nth-child(2n) {
background-color: gray;
}
兼容浏览器:IE9+、Firefox、Chrome、Safari
0
投稿
猜你喜欢
- 技巧1XmlNode.InnerText与.InnerXml的区别是:前者将内容中的<和>分别变成<和>,因此,希望
- 什么是.netMicrosoft® .NET 是 Microsoft XML Web services 平台。XML Web
- 一般上电子商务网站买东西的用户分三种:随便看看,就是不买先看看,买不买再说就是来买东西的这样的需求反应到产品页的购买按钮上,我们一般会看到购
- 利用图标工具(有很多)制作图标文件(favicon.ico)上传到网站所在的服务器的根目录下,这个文件必须是16*16大小的图标文件。当然,
- 在使用ORACLE的过程过,我们会经常遇到一些ORACLE产生的错误,对于初学者而言,这些错误可能有点模糊,而且可能一时不知怎么去处理产生的
- 这个话题是应腾讯ISD同仁之邀在WebReBuild三周年交流会上做的主题分享。由于临场等原因有些问题当时没有讲明白,回来后按原有思路形成了
- 10月9日是国庆中秋黄金周后上班的第一天,当天近8亿人次逛淘宝,即淘宝网每分钟完成43.47万元的交易,创下国内网购单天交易最高纪录。从销售
- 在许多网页中,当鼠标移到一张图片上时,又弹出另一张图片,做这种广告条,要用到Macromedia DreamWeaver中的Lay
- 内容摘要:为什么要什么XML文件:其优势就是处理该XML数据的文档可以是静态文档,比如HTML文件通过Javascript、XMLDOM来解
- 昨天晚上在家里把WM设计好的好台界面做成Html,在家里只用IE8和FF做了测试,感觉还行,除了感觉IE8还不成熟,渲染比较慢且不稳定外,标
- 可以,具体说明和代码见下: <%@ Language=VBScript %><%Option
- 问题一个已经有内容的 textarea 元素,在执行该元素的 .focus() 方法后,不同的浏览器有不同表现。我们的预期是能够出现在内容后
- <base href="http://digi.tech.qq.com/images/ld/2007/1022/
- 这几天刚刚做了这个东西,有网友问到,所以分享一下。ie6、firefox2 通过,麻烦有ie7的网友测试一下,由于有其他代码,剖析出来麻烦,
- 如何阻止别人非法链接你网站的图片,防盗链?getimage.asp<% Option ExplicitDim&nb
- 我想没多少人敢保证写JavaScript能不用调试,那选择用什么方式调试会比较好呢?告别了我最爱的alert("MM")
- 内容摘要:本文介绍了asp使用正则表达式自动解析远程图片地址并下载保存的方法,值得收藏!一、使用正则表达式Regexp匹配取得原页中的图片的
- 现在越来越多的浏览器有拦截弹出窗口的功能。广告弹出来给拦掉了就无所谓,要是客户在付款时给拦掉了可就不能乱算了。Gmail的“哎呀”算是经典,
- 在ASP中,你可通过VBScript和其他方式调用自程序。实例:调用使用VBScript的子程序如何从ASP调用以VBScript编写的子程
- 有使用过VS2005开发工具的朋友或者其他语句如js中都有Try catch 语句块,那么在mysql中是否能有SQLserver的@@er