PHP程序员站--PHP编程开发平台
 当前位置:主页 >> 网页制作 >> CSS >> 

征服高级CSS选择器

征服高级CSS选择器

来源:互联网  作者:  发布时间:2009-08-27
CSS是对网页设计师可用的最强大的工具之一。使用它我们可以在几

或者你可以搞得更加复杂:页面的第一个段落的第一行字母显示为小写字母。

.post h1 + p:first-line {

font-variant: small-caps;

}

因为可能大部分日志/文章的第一个段落都会紧紧的在H1标签的后面。你可以在你的选择器中借助于h1标签。

普通兄弟组合

普通兄弟组合和临近兄弟组合的工作原理很像,不同的是第二个选择其无需紧紧跟随第一个。

如果你需要定位所有的某个特定的div里面并且跟在h1标签后面的p标签的话(你可能想要这些p标签比拟的日志的标题前面的文字大些),你就可以使用这个选择器:

.post h1 ~ p {

font-size: 13px;

}

注:这两个选择器太像了,所有不是很好理解,可以试一试下面的这个例子:

CSS:

p + h2{color:red;

}

p ~ h2{font-weight:700;

}

HTML:

《p》咳咳,内容。《/p》

《h2》标题1《/h2》

《h2》标题2《/h2》

看看第二个h2的颜色就可以理解了吧?临近兄弟组合只能匹配第一个选择器后面的第一个兄弟选择其,普通兄弟组合则能匹配所有。注:该部分英文原文没有,是神飞翻译时自己添加。

浏览器支持

Internet Explorer 6依然不能理解兄弟选择器,但是,另一种情况,如果你的用户中只有一小部分是IE6用户,而且网站的结构不会被破坏或者受到严重影响,这是实现很多很酷的效果而无需在你的HTML代码中添加无用的class或id。

4. 伪类

动态伪类

之所以被称为动态伪类是因为它们并不存在于HTML中——而是只有当用户和网站交互的时候才会呈现。

有两类动态伪类:链接 和用户行为。链接就是:link 和:visited,而用户行为包括:hover、:active 和:focus。

在本文中提到的css选择器中,这几个应该是最常用到的。

:link伪类用于链接尚未被用户访问的时候,而:visited 伪类用于用户访问过的链接,也就是说它们是相反的。

:hover伪类用于用户移动他们的鼠标在元素上,而尚未触发或点击它的时候。:active伪类应用于用户点击元素的情况。最后,:focus伪类用于元素成为焦点的时候——最常用于表单元素。

你可以在你的样式表中使用多种用户行为动态伪类,这样你就可以,比如,根据用户的鼠标只是滑过或悬停的时候,为一个输入框定义不同的背景色:

input:focus {

background: #D2D2D2;

border: 1px solid #5E5E5E;

}

input:focus:hover {

background: #C7C7C7;

}

浏览器兼容性

动态伪类被所有的现代浏览器支持,甚至IE6,但是请注意,对于IE系列浏览器来说,IE6只允许:hover 伪类应用于链接元素(a标签)而且只有IE8接受:active状态。

:first-child

:first-child伪类允许你定位某个元素第一个子元素。比如,如果你想给你的无须列表的第一个li添加一个margin-top,你就可以这样写:

ul > li:first-child {

margin-top: 10px;

}

让我们来看一看另一个例子:比如你想让你的博客的侧栏的H2标签都有个顶部边距,以将标题和它们前面的内容区分开来,但是第一个h2不需要,你就可以使用下面的代码:

#sidebar > h2 {

margin-top: 10px;

}

#sidebar > h2:first-child {

margin-top: 0;

}

浏览器兼容性

IE6 不支持 :first-child 伪类。根据伪类应用到的设计的不同,它或许不会成为关注的主要问题。比如,如果你使用:first-child 选择器来移除标题或段落上的头部或底部的间距,你的布局在IE6中不会坏掉,它只会看起来有些不同。但是如果你使用:first-child选择器从一个,比如浮动元素,移除左边距或右边距,将会让你的设计乱掉。

语言伪类

语言伪类:lang(),允许你匹配一个基于它的语言的元素。

你如,你想让你的网站的某个特定的链接根据页面的语言有不同的背景颜色:

:lang(en) > a#flag {

background-image: url(english.gif);

}

:lang(fr) > a#flag {

background-image: url(french.gif);

}

这个选择器将会匹配相关的链接——如果页面的语言等于“en”或“fr”,或者以“en”或“fr”开头并在后面带个连字符“-”的话。

浏览器兼容性

不幸的是,只有IE浏览器中只有IE8支持该选择器,其它的主要浏览器都支持该伪类选择器。

5. CSS 3 伪类

:target

当你使用锚点(片段标识符 fragment identifier)的时候,比如,http://www.smashingmagazine.com/2009/08/02/bauhaus- ninety-years-of-inspiration/#comments,这“#comments”就是一个片段标识符,你就可以使用: target伪类来控制目标的样式。

举个例子,比如你有一个很长的使用了很多文字和h2标题的页面,然后在页面的头部有一个对这些标题的索引。如果在点击索引内的某个链接时,相应的标题以某种方式高亮,然后滚动到相应的位置,对读者就会很有用。很简单。

h2:target {

background: #F2EBD6;

}

浏览器兼容性

这一次,IE浏览器完全不支持:target伪类,另一个小问题就是Opera 在使用“前进”和后退按钮时不支持该选择器。但是其它的各个主流浏览器都支持该选择器。

UI元素状态伪类

有些HTML元素有enable 或disabled 状态(比如,文本输入框)和 checked 或unchecked 状态(单选按钮和复选框)。这些状态就可以使用:enabled、:disabled 或:checked 伪类来分别定位。

那么你就会想,如果任意一个禁用的(disabled)文本框应该使用浅灰色的背景和虚线边框:

input:disabled {

border:1px dotted #999;

background:#F2F2F2;

}

你也可能会想让所有选中的复选框有个左边距(这样就可以在众多的复选框中很容易认出来):

input[type=”checkbox”]:checked {

margin-left: 15px;

}

浏览器兼容性

所有的主流浏览器,除了我们常常不报希望的IE系列浏览器,都支持UI元素状态伪类。如果你考虑只是添加附加级别的细节和增强网站的可用性,这个仍然是可以采用的。

6. CSS 3 结构伪类

:nth-child

:nth-child()伪类允许你定位某个父级元素的一个或多个特定的子元素。

你可以通过定义它的值为一个整数来定位某个单个子元素:

ul li:nth-child(3) {

color: red;

}

这将会让ul元素的第三个li元素的文字变成红色。注意如果在ul里面有个其它类型的元素(不是li),它也会算作其子元素。

你可以使用表达式来定位子元素。比如,下面的表达式将从第四个开始匹配每第三个元素。

ul li:nth-child(3n+4) {

color: yellow;

}


延伸阅读:
CSS3的新特性介绍
CSS技巧五条
重置默认样式:css reset
30个优秀CSS技术和实例
DIV+CSS网页布局及网站设计常犯错误
百度有啊商城CSS+XHTML实现的圆角
CSS技巧:子元素浮动后父容器的闭合
CSS2样式表中文chm手册
CSS3:文字阴影效果
CSS2.0 Chinese中文手册
css3.0中文手册
css兼容问题总结及常用技巧
CSS教程:清除浮动的方法大全 转
CSS 3 灵活的 Box Model

Tags: css   高级   选择器   css   选择器   css   IE   jQuery   css   div   C  
最新文章
推荐阅读
月点击排行榜
PHP程序员站 Copyright © 2007-2010,PHPERZ.COM All Rights Reserved 粤ICP备07503606号