Tag Archives: WebDesign

上次简单介绍了 :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 … Continue reading →

参考自 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>则不是斜体了。 # … Continue reading →