本節咱們來看一下 Sass 中的選擇器函數，選擇器函數用於查看與處理選擇器。css
Sass 中經常使用的選擇器函數：html
| 函數 | 描述 |
|---|---|
| is-superselector() | 比較兩個選擇器匹配的範圍，匹配則返回 true，不然返回 false |
| selector-append() | 將一個（或多個）選擇器添加到第一個選擇器的後面 |
| selector-nest() | 返回一個新的選擇器，該選擇器經過提供的列表選擇器生成一個嵌套的列表 |
| selector-parse() | 將字符串的選擇符 selector 轉換成選擇器隊列 |
| selector-replace() | 給定一個選擇器，用 replacement 替換 original 後返回一個新的選擇器隊列。 |
| selector-unify() | 將兩組選擇器合成一個複合選擇器。如兩個選擇器沒法合成，則返回 null 值 |
| simple-selectors() | 將合成選擇器拆爲單個選擇器 |
下面是本節要用到的 HTML 代碼：編程
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sass學習(9xkd.com)</title>
<link rel="styleSheet" type="text/css" href="./style.css">
</head>
<body>
<div class="con">
<h3>你好，俠課島！</h3>
<p class="con_p"><span class="con_span">編程語言</span>學習</p>
<ul>
<li>Python</li>
<li>Java</li>
<li>HTML</li>
</ul>
</div>
</body>
</html>
is-superselector()函數
is-superselector() 函數用於比較兩個選擇器匹配的範圍。判斷第一個選擇器是否包含了第二個選擇器。app
語法以下所示：編程語言
is-superselector(super, sub)
示例：
.one{
content: is-superselector("div", "div.con_p");
}
.two{
content: is-superselector("h3", "span");
}
編譯成 CSS 代碼：函數
.one {
content: true;
}
.two {
content: false;
}
從輸出結果能夠看出，由於 div 選擇器中包含了 div.con_p 選擇器所匹配的範圍，因此輸出結果返回 true。而 h3 選擇器不包括 span 選擇器匹配範圍，因此輸出結果返回 false。學習
selector-append函數
selector-append() 函數用於將一個或多個選擇器添加到第一個選擇器的後面。url
示例：
例如咱們將 con_p 選擇器添加到 .con 選擇器後面：spa
.one{
content: selector-append(".con", ".con_p");
}
編譯成 CSS 代碼：.net
.one {
content: .con.con_p;
}
selector-nest()函數
selector-nest() 函數返回一個新的選擇器，該選擇器經過提供的列表選擇器生成一個嵌套的列表。
示例：
.one{
content: selector-nest("ul", "li");
}
編譯成 CSS 代碼：
.one {
content: ul li;
}
selector-parse()函數
selector-parse() 函數將字符串的選擇符 selector 轉換成選擇器隊列。
示例：
.one{
content: selector-nest(".con .con_p span");
}
編譯成 CSS 代碼：
.one {
content: .con .con_p span;
}
selector-replace()函數
selector-replace() 函數給定一個選擇器，用replacement 替換 original 後返回一個新的選擇器隊列。
語法以下所示：
selector-replace(selector, original, replacement)
示例：
.one{
content: selector-replace("div.con_span", "div", ".con");
}
編譯成 CSS 代碼：
.one {
content: .con_span.con;
}
selector-unify() 函數
selector-unify() 函數將兩組選擇器合成一個複合選擇器。如兩個選擇器沒法合成，則返回 null 值。
示例：
.one{
content: selector-unify("p", ".con_span");
}
.two{
content: selector-unify("h3", "p");
}
編譯成 CSS 代碼：
.one {
content: p.con_span;
}
simple-selectors() 函數
simple-selectors() 函數將合成選擇器拆爲單個選擇器。
示例：
例以下面這段代碼：
.one{
content: simple-selectors("div.con_p");
}
.two{
content: simple-selectors("div.con_p.con_span");
}
編譯成 CSS 代碼：
.one {
content: div, .con_p;
}
.two {
content: div, .con_p, .con_span;
}