溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
第四代CSS選擇器
第三代選擇器得到了瀏覽器的良好支持，也為我們提供了如nth-child的有用的選擇器。第四代選擇器為我們提供了諸多方法來定位CSS的內容。
否定偽類:not
否定偽類選擇器:not在CSS3中就出現了，但在CSS4中得到了升級。在CSS3中，你可以通過一個否定偽類選擇器來選取不需要運用CSS的元素。如果想給除了.intro類以外的文本加粗，可以使用如下規則：
p:not(.intro) { font-weight: normal; }
在CSS4選擇器中，你可以傳入一個用逗號（,）分割的選擇器列表。
p:not(.intro, blockquote) { font-weight: normal; }
關聯偽類:has
這個偽類選擇器通過一個參數（選擇器列表），去匹配與某一元素對應的任意選擇器。舉個最簡單的例子，在這個例子中任何帶有<img>的<a>元素都會加個黑色的邊框：
a:has( > img ) { border: 1px solid #000; }
在第二個例子中，我會把:has和:not結合，選擇不帶有<p>的<li>元素：
li:not(:has(p)) { padding-bottom: 1em; }
匹配任何偽類:matches
這個偽類選擇器表明我們可以把規則運用在所有的選擇器組中，例如：
p:matches(.alert, .error, .warn) { color: red; }
要測試你的瀏覽器是否支持這些選擇器和其他高級選擇器，你可以在css-selectors.com網站上進行測試。這個網站也給你提供了許多資源，你可以找到要添加的選擇器。
CSS混合模式
如果你熟悉Photoshop中的混合模式，你也許會對CSS的混合模式和規范感興趣。該規范將混合模式適用于背景以及瀏覽器html頁面里的任何元素.
在接下來的CSS中，我們使用了帶有背景圖像的選擇器.box，通過設置background-color為red，background-blend-mode為hue和multiply，我給圖片增添了有趣的效果。
.box {
background-p_w_picpath: url(balloons.jpg);
}
.box2 {
background-color: red;
background-blend-mode: hue;
}
.box3 {
background-color: blue;
background-blend-mode: multiply;
}
使用background-blend-mode
mix-blend-mode屬性可以設置混合文字置于圖片頂部。在下面的例子中，我添加了h2，然后在.box2中設置了mix-blend-mode的屬性值為screen.
.box {
background-p_w_picpath: url(balloons-large.jpg);
}
.box h2 {
font-size: 140px;
color: green;
}
.box2 h2 {
mix-blend-mode: screen;
}
使用mix-blend-mode
令人驚奇的是，IE瀏覽器支持CSS混合模式，Safari和Firefox緊追其后，而Opera和Chrome尚在實驗階段。只要在那些暫時不支持這項規范的瀏覽器中有向后兼容方案，不至于留下一堆亂七八糟的東西，我們就可以小心地使用這一規范，它絕對能將你的設計提升一個層次。
如果你想要全面支持舊版本瀏覽器，那么就不能在產品中運用混合模式。別忘記，這些效果都可以在Photoshop中實現。你在Photoshop中完成了圖片的制作，然后將其替代CSS的效果。
更多混合模式運用方法參見“如何使用CSS的混合模式”，“Adobe網站資源”和“Dev Opera網站”.
CALC()函數
CALC()函數出現在CSS值和單位模塊3中，這表明你可以在CSS中編寫數學函數。
如果你想把背景圖放在一個元素的右下角，你就可以使用CALC()函數。要將一個元素定在左上角30px的位置，你可以使用下面代碼:
.box {
background-p_w_picpath: url(check.png);
background-position: 30px 30px;
}
然而，當你不知道容器的尺寸時，你無法將背景圖定位在右下角30px處，calc()函數可以從100%的寬度或高度減去30px來實現：
.box {
background-p_w_picpath: url(check.png);
background-position: calc(100% – 30px) calc(100% – 30px);
}
Calc()得到了現代瀏覽器的支持，不過據Can I Use報道，在IE9中設置背景的位置數值會導致瀏覽器崩潰。
文章CSS Trickery and Cal Function有趣地描述了如何使用calc()函數來解決CSS問題。在巧用CSS技巧中有一些簡單運用的案例。
CSS變量
CSS預處理器很強大，比如Sass，它支持我們在CSS中使用變量。首先，我們可以通過聲明顏色和字體變量，節省大量時間，然后當要使用某一特定顏色或字體的時候就使用這一變量。如果要調整字體或顏色調色板，只要在一個地方做改動就可以了。
CSS屬性和變量模塊對CSS變量進行了描述，并將這一功能運用在CSS中：
:root {
–color-main: #333333;
–color-alert: #ffecef;
}
.error { color: var(–color-alert); }
遺憾的是，目前只有Firefox瀏覽器支持CSS變量。
在Mozilla開發群中可以看到更多的例子。
CSS的exclusion選擇器
我們都熟悉CSS中的浮動，舉個例子，圖像周圍的文本流會圍繞圖像浮動，然而，浮動的局限性很大。因為浮動項總會升到頂部，因此，當我們設置圖片向左浮動時文字就會浮動到圖像的右側和底部，卻沒有辦法使文字在圖像四周浮動，或是在圖像頂部和邊緣浮動。
Exclusion使文字環繞在定位對象的四周，它并沒有定義一個給自己定位的新方法，這樣一來就要和其他方法結合使用。下面的例子中，我將一個元素定位在了文字塊的頂部，然后用.exclusion選擇器設置該元素的wrap-flow的屬性值為both，因此文字會在該元素的四周浮動。
.main {
position:relative;
}
.exclusion {
position: absolute;
top: 14em;
left: 14em;
width: 320px;
wrap-flow: both;
}
IE瀏覽器中的Exclusions選擇器
當前只有IE10+支持wrap-flow:both，而且需要加上前綴-ms。注意，近來exclusion與CSS Shapes規范相似，因此網上有些人會將兩者進行比較。
Shape選擇器
Exclusion選擇器使得文字圍繞在矩形對象四周，而Shape選擇器可將文字排列在非矩形對象周圍，比如曲線。
CSS的Shape規范中定義了shape-outside屬性，該屬性可運用于浮動的元素。下面的例子中，我使用該屬性設置文字圍繞浮動的圖像排成一個曲線。
.shape {
width: 300px;
float: left;
shape-outside: circle(50%);
}
Shapes選擇器可以將文字圍繞圓形圖像進行排列
支持Shapes的瀏覽器（第1版）包括Chrome和Safari，這就表示你也可以使用這個屬性來設計IOS設備。第2版的規范中，通過shape-inside屬性可設置文字嵌入在元素中，未來新的突破將會更多。
更多關于Shapes的的信息可參見Sara Soueidan在A List Apart上發表的文章，你還可以在這里獲取相關資源。
CSS網格布局
最好的留到最后，在IE10出現之前，我對網格布局規范很感興趣。CSS的網格布局為CSS創建了合適的網格結構，可以將我們的設計放置在該網格內。
網格布局為我們創建了類似于表格布局的結構，然而，我們可以使用CSS而非HTML中所描述的選擇器來創建布局，通過媒體查詢來重定義布局以適應不同的上下文內容。這樣我們就可以正確區分視覺和源碼的元素順序。作為一個設計師，你可以自由地改變頁面元素的位置來適應不同斷點下的布局，而不必為你響應式設計去調整結構。與HTML中基于表格的布局不同，網格布局允許你堆疊元素。因此，在需要的情況下，一個元素可以重疊另一元素。
下面的例子中，我用.wrap類給元素創建了一個網格，該網格有三行三列，列寬100px，列間距和行間距均為10px。我們在網格中放置盒子，通過網格線來定義該區域中要顯示的元素。
<!DOCTYPE html>
<html>
<head>
<title>Grid Example</title>
<meta charset=”utf-8″>
<style>
body {
margin: 40px;
}
.wrapper {
display: grid;
grid-template-columns: 100px 10px 100px 10px 100px;
grid-template-rows: auto 10px auto;
background-color: #fff;
color: #444;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
}
.a {
grid-column: 1 / 2;
grid-row: 1 / 2;
}
.b {
grid-column: 3 / 4;
grid-row: 1 / 2;
}
.c {
grid-column: 5 / 6;
grid-row: 1 / 2;
}
.d {
grid-column: 1 / 2;
grid-row: 3 / 4;
}
.e {
grid-column: 3 / 4;
grid-row: 3 / 4;
}
.f {
grid-column: 5 / 6;
grid-row: 3 / 4;
}
</style>
</head>
<body>
<div class=”wrapper”>
<div class=”box a”>A</div>
<div class=”box b”>B</div>
<div class=”box c”>C</div>
<div class=”box d”>D</div>
<div class=”box e”>E</div>
<div class=”box f”>F</div>
</div>
</body>
</html>
Chrome瀏覽器的網格例子
目前支持網格的瀏覽器只有Chrome瀏覽器，Chrome瀏覽器需要啟用“experimental Web Platform features”。有一個版本的規范可實現網格布局，即IE10+。
更多網格布局參考Grid by Example網站，在這里你會發現在開啟了實驗網絡平臺的Chrome瀏覽器出現了網格布局例子。我去年也在CSS Conf EU的網格上說過，點擊此處你會看到相關視頻。
有你喜歡的新規范沒被提到嗎？
我希望你能喜歡本文所提到的CSS新規范，你可以通過鏈接中提供的資源來找到更多有趣的東西。如果你有感興趣的CSS新規范，可以在評論中與我們分享，也可以提供任何有關CSS新規范的實例。
特×××像，在Shutterstock里使用了氣球圖像。
作者：Rachel Andrew
Rachel Andrew是來自英國的網絡開發人員、作家以及演講家。她從1996年開始就在網上工作，是 Perch CMS.的聯合創始人。她在個人網站rachelandrew.co.uk 上寫了許多關于商業和科技的文章，這些文章都可以在Twitter上看到@rachelandrew. More articles 。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
