特殊的上下文選擇符

時間 2019-12-26

標籤特殊上下文選擇简体版

原文原文鏈接

本文轉載於:猿2048網站特殊的上下文選擇符php

經過增刪選擇符熟練各個選擇符的用法：(注：筆者FF瀏覽器在源碼上註釋一部份內容後並不能改變運行後的輸出結果，必須刪除要註釋的內容才行)css

<!DOCTYPE html>
<html>
<head>
   <style type="text/css">
    section>h1 {font-style:italic;}
   h1+p {font-variant:small-caps;}
   h1~a {color:purple;}
   * h1 {color:red;}
   * p {color:blue;}
   * a {color:green;}
   p * {color:black;}
   </style>
</head>
<body>
<section>
<h1>An H2 Heading</h1>
<p>This is paragraph 1</p>
<p>Paragraph 2 has <a href="#">a link</a> in it.</p>   嵌套標籤內標籤默認是紫色，且有下劃線
<a href="#">Link</a>
</section>
</body>
</html>html

最終效果：瀏覽器

一、子選擇符>
標籤1 > 標籤2
標籤2必須是標籤1的子元素，或者反過來講，標籤1必須是標籤2的父元素。與常規的上下文選擇符不一樣，這個選擇符中的標籤1不能是標籤2的父元素以外的其餘祖先元素。
section>h1 {font-style:italic;}

二、緊鄰同胞選擇符+
標籤1 + 標籤2
標籤2必須緊跟在其同胞標籤1的後面。
h1 + p {font-variant:small-caps;}

三、通常同胞選擇符~
標籤1 ~ 標籤2
標籤2必須跟（不必定緊跟）在其同胞標籤1後面。
h1 ~ a {color:purple;}

四、通用選擇符*
通用選擇符*（常被稱爲星號選擇符）是一個通配符，它匹配任何元素。網站

* p {color:blue;} 這樣只會把p包含的全部元素的文本變成l藍色；spa

p * {color:black;}會把p標籤下的內嵌標籤a link變成黑色；htm

a *{color:green;}把全部的a標籤變成綠色。blog

這個選擇符有一個很是有意思的用法，即用它構成非子選擇符。好比：
section * a {font-size:1.6em;}ci

任何是section孫子元素，而非子元素的a標籤都會被選中。至於a的父元素是什麼，沒有關係。get

若是文章對你哪怕有一點點的幫助，麻煩點個推薦或者關注，支持一下創做者！萬分感謝！