【CSS3】---結構性僞類選擇器-root+not+empty+target

時間 2019-11-10

標籤 CSS3 結構性選擇器 root+not+empty+target root target 欄目 CSS 简体版

原文原文鏈接

結構性僞類選擇器—root

:root選擇器，從字面上咱們就能夠很清楚的理解是根選擇器，他的意思就是匹配元素E所在文檔的根元素。在HTML文檔中，根元素始終是<html>。css

示例演示：html

經過「:root」選擇器設置背景顏色url

HTML代碼：spa

<div>:root選擇器的演示</div>

CSS代碼：3d

:root {
  background:orange;
}

演示結果：code

「:root」選擇器等同於<html>元素，簡單點說：orm

:root{background:orange}htm

html {background:orange;}對象

獲得的效果等同。blog

建議使用:root方法。

另外在IE９如下還能夠藉助「:root」實現hack功能。

結構性僞類選擇器—not

:not選擇器稱爲否認選擇器，和jQuery中的:not選擇器如出一轍，能夠選擇除某個元素以外的全部元素。就拿form元素來講，好比說你想給表單中除submit按鈕以外的input元素添加紅色邊框，CSS代碼能夠寫成：

form {
  width: 200px;
  margin: 20px auto;
}
div {
  margin-bottom: 20px;
}
input:not([type="submit"]){
  border:1px solid red;
}

相關HTML代碼：

<form action="#">
  <div>
    <label for="name">Text Input:</label>
    <input type="text" name="name" id="name" placeholder="John Smith" />
  </div>
  <div>
    <label for="name">Password Input:</label>
    <input type="text" name="name" id="name" placeholder="John Smith" />
  </div>
  <div>
    <input type="submit" value="Submit" />
  </div>
</form>

演示結果：

結構性僞類選擇器—empty

:empty選擇器表示的就是空。用來選擇沒有任何內容的元素，這裏沒有內容指的是一點內容都沒有，哪怕是一個空格。

示例顯示：

好比說，你的文檔中有三個段落p元素，你想把沒有任何內容的P元素隱藏起來。咱們就能夠使用「:empty」選擇器來控制。

HTML代碼：

<p>我是一個段落</p>
<p> </p>
<p></p>

CSS代碼：

p{
 background: orange;
 min-height: 30px;
}
p:empty {
  display: none;
}

演示結果：

結構性僞類選擇器—target

:target選擇器稱爲目標選擇器，用來匹配文檔(頁面)的url的某個標誌符的目標元素。咱們先來上個例子，而後再作分析。

示例展現

點擊連接顯示隱藏的段落。

HTML代碼：

<h2><a href="#brand">Brand</a></h2>
<div class="menuSection" id="brand">
    content for Brand
</div>

CSS代碼：

.menuSection{
  display: none;
}
:target{/*這裏的:target就是指id="brand"的div對象*/
  display:block;
}

演示結果：

分析：

一、具體來講，觸發元素的URL中的標誌符一般會包含一個#號，後面帶有一個標誌符名稱，上面代碼中是：#brand

二、：target就是用來匹配id爲「brand」的元素（id="brand"的元素）,上面代碼中是那個div元素。

多個url（多個target）處理：

就像上面的例子，#brand與後面的id="brand"是對應的，當同一個頁面上有不少的url的時候你能夠取不一樣的名字，只要#號後對的名稱與id=""中的名稱對應就能夠了。
以下面例子：
html代碼：

<h2><a href="#brand">Brand</a></h2>
<div class="menuSection" id="brand">
  content for Brand
</div>
<h2><a href="#jake">Brand</a></h2>
<div class="menuSection" id="jake">
 content for jake
</div>
<h2><a href="#aron">Brand</a></h2>
<div class="menuSection" id="aron">
    content for aron
</div>

css代碼：

#brand:target {
  background: orange;
  color: #fff;
}
#jake:target {
  background: blue;
  color: #fff;
}
#aron:target {
  background: red;
  color: #fff;
}