上次简单介绍了 :not() selector ,这次说说 CSS3 新增的另一种选择器。那大概能被称作 “模糊匹配” ,符号也应该算是 “通配符” 吧?我对概念和术语掌握得不好,请莫见怪。
在 CSS2 的选择器中,唯一的通配符是星号(*),用于选择所有元素或所有某类子元素;其它符号(用来hack的不算在内)如加号(+)和波浪线(~)都比较少见,用法也不赘述了。CSS3 不但加强了星号的运用,还引入了两个新的符号:
- 星号(*)- 关键字段包含于任意位置
- 脱字符号(^)- 关键字段包含于起始
- 美元符号($)- 关键字段包含于末尾
不懂?对不起。。。表达能力太差了。。希望例子能让您理解多一点:
# 用 "*" 定义所有包含 "google" 的链接文字为粗斜体
a[href*="google"] {font: italic bold;}
效果:
<a href="http://www.google.com/">Google</a><a href="http://labs.google.com">Google Labs</a><a href="http://blah.net/google">blah blah blah</a><a href="http://tieba.baidu.com">baidu tieba</a>
# 用 "^" 定义所有 https(精确以 "https" 开头的)链接文字为粗斜体
a[href^="https"] {font: italic bold;}
效果:
<a href="https://google.co.uk/reader">Google Reader</a><a href="https://www.google.com/mail">Gmail</a><a href="http://www.google.com/mail/">Gmail</a>
# 用 "$" 定义所有精确以 "reader" 结尾的链接文字为粗斜体
a[href$="reader"] {font: italic bold;}
效果:
<a href="http://xianguo.com/reader">XianGuo Reader</a><a href="https://google.com/reader">Google Reader</a><a href="http://google.com/reader/">Google Reader</a>
脱字符号(^)和美元符号($)的用法与正则表达式的差不多,只是在 CSS3 中它们不能被同时用在一头一尾,因为 CSS2 的选择器无须这两个符号已能作精确匹配。
如果还是不懂,请千万别怀疑自己的智商。。来骂我吧,再次对不起。。。。 如果您能看明白,想必也能举一反三,灵活运用这三个选择器。
还没想到都能用到什么地方..
有待继续研究..
有点麻烦,有些新版本中的代码居然很多人不知道~~~
^_^不错的解释,很清晰。
另外,请教你的RSS内容有包括留言条数,是betterfeed实现的么?还是?望指点。
用过 jQuery 的同学应该很容易理解的
@Page: 是 betterfeed。
@Andor: 这个selector对js库都非常有用