Posts Tagged ‘WebDesign’

CSS3中的“模糊匹配”

Friday, August 29th, 2008

上次简单介绍了 :not() selector ,这次说说 CSS3 新增的另一种选择器。那大概能被称作 “模糊匹配” ,符号也应该算是 “通配符” 吧?我对概念和术语掌握得不好,请莫见怪。

CSS2 的选择器中,唯一的通配符是星号(*),用于选择所有元素或所有某类子元素;其它符号(用来hack的不算在内)如加号(+)和波浪线(~)都比较少见,用法也不赘述了。CSS3 不但加强了星号的运用,还引入了两个新的符号:

  • 星号(*)- 关键字段包含于任意位置
  • 脱字符号(^)- 关键字段包含于起始
  • 美元符号($)- 关键字段包含于末尾

不懂?对不起。。。表达能力太差了。。希望例子能让您理解多一点:

# 用 "*" 定义所有包含 "google" 的链接文字为粗斜体

a[href*="google"] {font: italic bold;}

效果:

# 用 "^" 定义所有 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;}

效果:

脱字符号(^)和美元符号($)的用法与正则表达式的差不多,只是在 CSS3 中它们不能被同时用在一头一尾,因为 CSS2 的选择器无须这两个符号已能作精确匹配。

如果还是不懂,请千万别怀疑自己的智商。。来骂我吧,再次对不起。。。。 如果您能看明白,想必也能举一反三,灵活运用这三个选择器。

CSS3的:not()选择器

Monday, August 25th, 2008

参考自 Kilian Valkhof 的文章

你有想过PHP里等号前的那个叹号能用在CSS中吗?CSS3已经实现了。不说废话,看实例:

# 除 .foobar 以外的所有 <div> 的背景为黑色

div:not(.foobar) {background: #000;}

# 除 .foo 和 .bar 以外的所有 <h2> 的文字颜色都为 #ccc

h2:not(.foo, .bar) {color: #ccc;}

# 定义所有在<p>外面、<div>里面的<em>为正体(而非斜体)

div:not(p) em {font-style: normal;}

这样,<div><p><em>Italic</em></p></div> 是斜体,而 <div><strong><em>Normal</em></strong>< /div> 或 <div><em><p>Normal</p></em></div>则不是斜体了。

# 除了上传文件所用的 <input> ,其它 <input> 都隐藏起来

input:not([type="file"]) {display: none;}

# 从第二行开始,所有字母都大写(Firefox3尚未支持)

div:not(p::first-line) {text-transform: uppercase;}

没错,还能用于 pseudo,上面的例子正与 div p::first-line 相反。

:not() 也可以灵活运用在 WordPress 模板设计中,例如用于区分普通 comment 和 trackback/pingback。这个 selector 运用起来需要一点逆向思维,但其实要习惯适应它完全不难,只是CSS3的普及需要IE的市场分额乖乖的持续下降就是了。

关于CSS3,推荐阅读 http://www.css3.info