Web前端，認識css，css規(guī)格，偽類和偽元素的用

Web前端，認識css，css規(guī)格，偽類和偽元素的用法，代碼詳解！

識 CSS — Cascading Style Sheets

CSS的世界是神奇的。隨著瀏覽器WEB標準的日趨統(tǒng)一，CSS在WEB世界中的扮演的角色也越來越重要。

我們從HTML開始，因為CSS的用途就是為了給HTML標記添樣式，所以我們要先知道怎么去寫HTML標簽

什么是CSS

HTML標記內(nèi)容是為了給網(wǎng)頁賦予純粹的語義。換而言之就是為了讓用戶可以去理解里邊的含義。每一個標簽都是對所包含的內(nèi)容的一種詮釋，描述。所以請記住HTML 就是文本+標記的一個文檔結(jié)構(gòu)（請不要參雜CSS）。當我們給內(nèi)容都打上標記，就可以使用CSS給標記添加樣式了。添加樣式的過程根據(jù)標簽名、標簽屬性、標簽等等的一些關(guān)系來給相對應(yīng)的標簽添加樣式，so！先有結(jié)構(gòu)后有樣式。

簡單的來說CSS相當于一個神奇的化妝師，它可以去操作文檔的整體表現(xiàn)形式，針對布局、文字、顏色、背景、動畫效果等等實現(xiàn)精確的控制，讓文檔的表現(xiàn)更加的美觀好看，它的組成是由一系列有含義的單詞和數(shù)值所構(gòu)成。
CSS樣式可以直接存儲于HTML網(wǎng)頁或者單獨的樣式單文件。無論哪一種方式，樣式單包含將樣式應(yīng)用到指定類型的元素的規(guī)則。外部使用時，樣式單規(guī)則被放置在一個帶有文件擴展名.css的外部樣式單文檔中。簡單的了解這個概念之后我們來學習一些基礎(chǔ)知識。

添加樣式的三種方式

有三種方法可以把CSS樣式添加到網(wǎng)頁中，分別是行內(nèi)樣式、嵌入樣式、鏈接樣式

<p style="font-size:12px;font-weight:bold;color:red;background:yellow">Hello world</p>

<!-- 嵌入樣式 -->
<head>
 <style>
 p{font-size:12px;color:red;background:yellow}
</style>
</head>

<!-- 鏈接樣式 -->
<link href="style.css" rel="stylesheet" type="text/css">
<!-- 要注意的是@import指令必須出現(xiàn)在樣式表其它樣式之前，否則不會被加載 -->
<style>
 @import url(style.css); /* 注意看這里有一個分號 */
</style>

注：網(wǎng)頁的解析是從上到下，從左至右。當瀏覽器遇到開標簽<style>時，就會有解析HTML代碼切換成為解析CSS樣式代碼。再次遇到 </style>時，瀏覽器會再次切換成為解析HTML代碼

CSS規(guī)則

構(gòu)成CSS規(guī)則有很多，主要就是選擇器。這里我們只需要掌握常用的選擇器，碰到特殊的再去查詢。

命名慣例

選擇符 {屬性：值；}

p { color : red; }

選擇器的分類

上下文選擇器
子選擇器 >
緊鄰同胞 +
一般同胞 ~
一般上下文選擇器
特殊上下文選擇器
id和class選擇器
#id{屬性：值；}
.class{屬性：值；}
tag.class{屬性：值；}
屬性選擇器
tag[屬性名]
tag[屬性名=”屬性值”]

什么時候使用id、class、屬性選擇器？

id 的用途是在頁面標記中唯一地標識一個特定的元素。
類是可以應(yīng)用給任意多個頁面中的任意多個 HTML 元素的公共標識符。簡單來說具有相同的特征的元素
基于屬性名和屬性的其它特征選擇元素，區(qū)別對待相同標簽，通過不同的標記找到適合的元素。

CSS選擇器圖解

我們可以通過圖形來理解一下

一般選擇器

<style>
 /* 選擇以p為祖先的 所有 span元素 */
 p span{color: red;}
</style>
<body>
 <h1><b>一般選擇器</b></h1>
 <p>
 <span>this is span</span>
 <a><span>this is a</span></a>
 <span>this is anthor span</span>
 </p>
</body>

2、特殊選擇器

子選擇器 >

<style>
 /* 標簽1 > 標簽2 也就是說1必須是2的父元素 */
 p > span{color: red;}
</style>
<body>
 <h1><b>一般選擇器</b></h1>
 <p>
 <span>this is span</span>
 <a><span>this is a</span></a>
 <span>this is anthor span</span>
 </p>
</body>

緊鄰同胞

<style>
 /* 標簽1 + 標簽2 標簽2必須緊跟在標簽1后邊 */
 h1 + p{color: red;}
</style>
<body>
 <h1>緊鄰同胞</h1>
 <p>1</p>
 <p>2</p>
 <p>3</p>
</body>

一般同胞

<style>
 /* 標簽1 ~ 標簽2 標簽2必須跟( 不一定緊跟 )在標簽1后邊 */
 h1 ~ p{color: red;}
</style>
<body>
 <h1>緊鄰同胞</h1>
 <p>1</p>
 <p>2</p>
 <p>3</p>
</body>

id、class選擇器相當于警察叔叔直接查你的身份證（唯一性）、和查你的學生證（你有很多張從小學到大學做為一個特征，你是一個學生）

ps:

只不過有一個標簽帶類選擇器更加精確的定位特定的標簽元素 (同理id選擇器也具有同樣的功能)
多類選擇 eg: <p class=”a b”></p> 可以這樣子去寫 .a.b{color: red}

偽類

偽類會基于特定的HTML元素的狀態(tài)應(yīng)用樣式。我們在chrome、firfox開發(fā)者工具中任意右鍵點擊一個元素會看到一個菜單。接下來我們介紹一下偽類。Are you ready ?

鏈接偽類

在瀏覽器中樣式的時候它們可以幫助我們快速的進行變換。首先介紹一下鏈接偽類，因為任何一個鏈接始終都會處于下邊四個狀態(tài)之一

link 鏈接等著用戶點擊
visited 用戶點擊過這個鏈接
hover 鼠標懸停在鏈接上
active 鏈接正在被點擊

12345678910

<!-- example 使用a標簽舉例 --><style> a:link {color: blue;} a:visited {color: green;} a:hover {color: red;} a:active {font-weight: bold;font-size: 20px;}</style><body> <a href="#">click me</a></body>

偽類的寫法（：）一個冒號代表偽類，請務(wù)必區(qū)分和偽元素（：：）的寫法，稍后看這個。看到上面的例子，可以看到a標簽也就是鏈接在初始的狀態(tài)的時候是blue ，當鼠標懸停在上方狀態(tài)為 red，當鼠標點擊鏈接其中的字體變大并且加粗了（為了效果而已），最后呈現(xiàn)的狀態(tài)visited 。

不過在這里地方可能會碰到一個很奇怪的問題link當你第一次設(shè)置的時候是有效果的第二次在看這個頁面的時候樣式不對了，請你清除一下瀏覽器的緩存，并更換一下href

實際中不會寫這么多只需要定義你所需要的，比如用戶懸停的時候給一個鮮艷的顏色，為了告訴用戶快tm點我（畢竟是一個妖艷賤貨?乛?乛?）。如果這個鏈接目錄很長，那么就應(yīng)該使用visited狀態(tài)給一個淺的顏色，對于用戶的提示作用有很大的幫助，當然也要看地方。

其它偽類、結(jié)構(gòu)偽類

focus

獲取焦點，表單中使用

target（不常用）

當用戶點擊一個指向頁面中其它元素（target）的鏈接時，可以通過此偽類選擇

first-child、last-child

代表同胞組的第一個、最后一個

nth-child(n)

n代表一個數(shù)值，或者是odd奇數(shù)，even偶數(shù)
可以增強一切列表的可讀性，展現(xiàn)不同的效果

<!-- e:target -->
<a href="#info">更多信息</a>
<div id="info">
 <h2>More information</h2>
</div>

偽元素

顧名思義，偽元素是在你的文檔上時有時無的元素。介紹幾個常用的，并且區(qū)分一下偽類與偽元素的區(qū)別，一些小技巧。

請記得和偽類（：）的寫法區(qū)分，偽元素的寫法（：：），雖然瀏覽器對于一個：也是支持的但是為了避免大家混亂，請遵守規(guī)則。

::first-letter

選擇首字符

::first-line

選擇文本段落第一行

::before

在特定元素前邊添加內(nèi)容

::after

在特定元素后邊添加內(nèi)容(用來清除浮動)

<!-- 看到效果了記得告訴我?乛?乛? -->
<style type="text/css">
 p::first-letter{font-size: 200%;color: red;}
</style>
<body>
 <p>如果你喜歡我，你可以來找我呀！</p>
</body>

<!-- first-line會隨著屏幕大小改變 -->
<style type="text/css">
 p::first-line{color: red;font-variant:small-caps;/* 以小型大寫字母展示 */}
</style>
<body>
 <p>
 I have a dream that one day this nation will rise up and live out the true meaning of its creed: "We hold these truths to be self-evident, that all men are created equal."
 I have a dream that one day on the red hills of Georgia, the sons of former slaves and the sons of former slave owners will be able to sit down together at the table of brotherhood
	</p>
</body>

<!-- before、after -->
<style type="text/css">
 p::before{content: '小可愛們，'}
 p::after{content: '小祺'}
</style>
<body>
 <p>晚上好我是</p>
</body>

ps：偽元素的能做的東西還很多以后我們在去了解。接下來我們來區(qū)分一下偽類與偽元素。

區(qū)分偽類與偽元素

偽類與偽元素是同學們最容易混淆的兩個知識點。最直觀的請大家通過寫法初步區(qū)分。1和2的區(qū)別

example

<!--
	1. 通過偽類選擇第一個標簽并且添加紅色
	2. 同樣我們可以使用一個類名給第一個標簽添加紅色
-->
<style>
	.first{color: red;}
	/*p span:first-child{color: red;}*/
</style>
<body>
 <p>
 <span class="first">HTML</span>
 <span>Javascript</span>
 </p>
</body>

<!--
	1. 通過偽元素選擇第一個字符并且添加紅色
	2. 同樣我們可以使用一個類名給第一個字符添加紅色
-->
<style>
	.first{color: red;}
	/*p::first-letter{color: red;}*/
</style>
<body>
 <p>
 <span class="first">C</span>ss偽元素
 </p>
</body>

到此我相信大家對CSS 的人是已經(jīng)有了一定的了解了。

好了，今日就分享到這了，css還沒有講完，明日在分享！

言

CSS大家肯定都是會的但是每個人所撐握地情況都不一樣，特別是已經(jīng)工作幾年的前輩(這里指的是我司)很多CSS玩法都不知道，可能他們已經(jīng)習慣了用組件，但是面試的時候又不可避免問，所以我整理了下CSS比較晦澀難懂的點總結(jié)寫了這篇文章，在最后也會有些面試中常問的CSS相關(guān)面試題，看完全文面試就不用慌了。

對了，在這里說一下，我目前是在職web前端開發(fā)，如果你現(xiàn)在正在學習前端，了解前端，渴望成為一名合格的web前端開發(fā)工程師，在入門學習前端的過程當中有遇見任何關(guān)于學習方法，學習路線，學習效率等方面的問題，都可以隨時關(guān)注并私信我：前端，我都會根據(jù)大家的問題給出針對性的建議，缺乏基礎(chǔ)入門的視頻教程也可以直接來找我，我這邊有最新的web前端基礎(chǔ)精講視頻教程，還有我做web前端技術(shù)這段時間整理的一些學習手冊，面試題，開發(fā)工具，PDF文檔書籍教程，都可以直接分享給大家。

在線卑微，如果覺得這篇文章對你有幫助的話歡迎大家點個贊

三大特性

css大三特性是css最重要的部分，可以說如果了解了這三大特性就對css撐握了一半，對于屬性只不過是記不記得住的事，而這個是重在理解。

層疊性：css樣式?jīng)_突采取的原則（后者覆蓋前者)
繼承性：對于部分屬性樣式會有天生的繼承
優(yōu)先級：選擇器優(yōu)先級算法

選擇器

在講這三個特性之前我們需要來全面了解下選擇器。

種類

下面我將選擇進行劃分為三大部分，對于基本選擇器我就不說了，主要講下偽類選擇器，組合選擇器及它們各自的使用場景。

基本選擇器

類名：.box
標簽: div
屬性: input[type="eamil"] | a[href*="http://www.beige.world"]
ID: #box
偽類選擇器
結(jié)構(gòu)偽類: :nth-child(n) | :nth-of-type(n) | :hover
偽元素: ::before | ::after
組合選擇器
相鄰兄弟 A + B
普通兄弟 A ~ B
子選擇器 A > B
后代選擇器 A B

基本選擇器

算了還是講下屬性選擇器吧，這個選擇器我在項目開發(fā)中還是用到過的

直接看例子：

/* 匹配包含title屬性的a標簽=> <a title> */
a[title] {color: purple;}  


/* 存在href屬性并且屬性值為"http://beige.world"的<a>標簽*/
/*  <a href="http://beige.world"> */ 
a[href="http://beige.world"] {color: green;}


/* 存在href屬性并且屬性值包含"baidu"的<a>標簽*/
 /*  
  <a href="https://baidu.com/we"> 
  <a href="https://fanyi.baidu.com/we"> 
  <a href="https://pan.baidu.com/we"> 
 */ 
a[href*="baidu"] {font-size: 20px;}


/* 存在id屬性并且屬性值結(jié)尾是"-wrapper"的<div>標簽 */
 /*  
  <div id="btn-wrapper">
  <div id="menu-wrapper">
  <div id="pic-wrapper">
 */ 
div[id$="-wrapper"] {display: flex;}


/* 存在class屬性并且屬性值包含以空格分隔的"logo"的<div>元素 */
 /*  
  <div id="aaa logo">
  <div id="bbb logo">
 */ 
 div[class~="logo"] { padding: 2px; }

偽類選擇器

結(jié)構(gòu)偽類

先講這兩比較作用類似的：nth-child(n) | nth-of-type(n)

結(jié)構(gòu)

<ul>
  <li>1</li>
  <li>
    <p>a1</p>
    <div>b1</div>
    <p>a2</p>
    <div>b2</div>
  </li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

CSS

// 第一個li=>  <li>1</li>
ul li:first-child { background-color: lightseagreen;} 
 // 最后一個li=>  <li>5</li>
ul li:last-child { background-color: lightcoral;}
// 第三個li=> <li>3</li>
ul li:nth-child(3) { background-color: aqua; } 
// 第二個li下的第一個div(不是div標簽的都不算)=> <div>b1</div>
ul li:nth-child(2) > div:nth-of-type(1) {background-color: red}

它倆的區(qū)別

nth-child 選擇父元素里面的第幾個子元素，不管是第幾個類型
nt-of-type 選擇指定類型的元素

下面講講nth-child()括號中的公式，這個算是這個選擇器的亮點了。

注意?：本質(zhì)上就是選中第幾個子元素

n 可以是數(shù)字、關(guān)鍵字、公式
n 如果是數(shù)字，就是選中第幾個
常見的關(guān)鍵字有 even 偶數(shù)、odd 奇數(shù)
常見的公式如下(如果 n 是公式，則從 0 開始計算)
但是第 0 個元素或者超出了元素的個數(shù)會被忽略

對于這里面的公式平常也用不到太復雜的，我說下我的技巧：nth-child(3n + 3); 這里的n可以看做幾個為一組，3可以看做選這組的第幾個。

例： nth-child(5n + 3) ：5個為一組，選一組中的第三個。對于"-"號就表示選擇的是前面的。

組合選擇器

組合選擇器本質(zhì)上就是通過連接符來對兩個選擇器進行組合

子選擇器 A > B
后代選擇器 A B

上面這兩我就不說了，相信大家都用爛了。主要說說下面這兩個。

相鄰兄弟 A + B
普通兄弟 A ~ B

結(jié)構(gòu)

<div class="box1">
    <div>One</div>
    <div>Two!</div>
    <div>Three</div>
    <p>pppp</p>
  </div>
  <div class="box2">
    <div>One2</div>
    <p>pppp1</p>
    <div>Two2!</div>
    <p>pppp2</p>
  </div>

選擇器解析

<style>
    /*
      (+標識)符介于兩個選擇器之間，當?shù)诙€選擇器匹配的元素緊跟著第一個元素后面并且它們都是同一個父親
      .box1 div:first-of-type(A元素)
      div(B元素) 
      匹配緊跟著A的B
    */
    .box1 div:first-of-type+div { color: red; }

    .box1 div:first-of-type+p { color: red;}  篩選不到的


    /*
      (~標識)符介于兩個選擇器之間，匹配第一個選擇器元素后面所有匹配第二個選擇器的同層級元素
      .box2 div(A元素)
      p(B元素)
      匹配所有A后面的B
    */
    .box2 div~p { color: seagreen; }
  </style>

好了，在講完這些選擇器之后我們來看看它們的使用場景。

組合選擇器可以用于：hover偽類操縱自己包含的子元素及以外的元素。舉個例子

<div id='a'>元素1
  <div id='b'>元素2</div>
</div>
<div id='c'>元素3
  <div id='b'>元素2</div>
</div>
<div>同級元素1</div>
<div>同級元素2</div>
<div>同級元素3</div>
</body>

#a:hover > #b{....}    
#a:hover ~ div{....} // 鼠標停留在a元素的時候讓所有同層級元素有某某樣式
// 防止選擇器層級替換了下面的樣式
#a:hover + #c{....} // 鼠標停留在a元素的時候讓同層級中的c元素有某某樣式
#a:hover + #c > #b{....} //  鼠標停留在a元素的時候讓同層級中的c元素下的b元素有某某樣式

上面這兩選擇器在做一些特效頁的時候應(yīng)該是會用到的。

綜合例子

效果

結(jié)構(gòu)

<body>
  <div class="img-box enter-box"> <!-- 懸浮在這個盒子的時候動態(tài)添加enter-box類名 -->
    <img src="http://resource.beige.world/imgs/beige.jpg" alt="">
    <div class="cover">
      <h3>標題名稱</h3>
      <p class="con">Bei Ge</p>
      <p class="brier">這里放內(nèi)容簡介，內(nèi)容簡介,這里放內(nèi)容簡介，內(nèi)容簡介,這里放內(nèi)容簡介，內(nèi)容簡介</p>
      <div class="handle"><span>.</span><span>.</span><span>.</span></div>
    </div>
  </div>
  <!-- 其他盒子 -->
  <div class="img-box">2</div> 
  <div class="img-box">3</div>
  <div class="img-box">4</div>
  <div class="img-box">5</div>
</body>

樣式

布局樣式

<style>
     .img-box {
      position: relative;
      top: 100px;
      left: 200px;
      z-index: 1;
      display: inline-block;
      overflow: hidden;
      background: #70adc4;
      cursor: pointer;
      transition: transform .5s, box-shadow .3s;
    }

    .img-box img {
      width: 200px;
      height: 200px;
      opacity: 1;
      float: left;
    }
	
	.img-box .cover {
      width: 200px;
      height: 200px;
      padding: 15px;
      position: absolute;
      box-sizing: border-box;
      color: hotpink;
    }

    .img-box .cover h3 {
      margin-top: 10%;
      font-size: 24px;
      font-weight: bold;
      text-shadow: 0 0 2px #ccc;
      opacity: 0;
      transition: opacity .5s;
    }

    .img-box .cover .con {
      margin: 20px 0;
      font-style: italic;
      font-weight: bold;
      transform: translateX(-150%);
    }

    .img-box .cover .brier {
      font-size: 12px;
      transform: translateX(150%);
    }

    .img-box .cover .handle {
      position: absolute;
      right: 10px;
      bottom: -50px;
      font-size: 25px;
      transition: bottom 1s;
      /* 對于position的過渡動畫, 不能用position, 直接用位置屬性: left right top bottom */
    }
  </style>

定義了一個animation動畫

@keyframes textAnimation {
      /* 0% {
        transform: translateX(150%);
      } */
      100% {
        transform: translateX(0);
      }
}

懸浮在盒子設(shè)置樣式

.img-box:hover {
	transform: scale(1.1);
	box-shadow: 2px 2px 13px 3px #ccc;
}

.img-box:hover img {
	opacity: .5;
}

.img-box:hover .cover h3 {
 	opacity: 1;
}

.img-box:hover p {
	animation: textAnimation .6s ease-out forwards;
	/* forwards讓動畫停留在最后一幀 */
}

.img-box:hover .cover .handle {
  	bottom: 5px;
}

.enter-box:hover ~ .img-box {
  background-color: transparent;
  color: wheat;
}
.enter-box:hover + .img-box {
  color: red;
}

上面這個例子有些還沒有講，但是相信大家之前也都學過，后文中也會說。主要會說些細節(jié)方面的東西

flex(彈性布局）
transform: translate3D rodate3D
animation(設(shè)定動畫)
3D or 透視(perspective)

這里需要注意在使用偽類Hover的注意點，在使用他影響子級元素的時候盡量將選擇器寫全。例：

先看下效果

上面的效果相信大家都能寫出來，所以我要講的肯定不是怎么去實現(xiàn)這個效果，我要說下使用Hover時的一些細節(jié)。

結(jié)構(gòu)比較簡單

flex類名用于布局實現(xiàn)重置和水平居中，box: 綠色盒子；center: 紫色盒子 inner: 橙黃色盒子

<div class="box flex">
    <div class="center flex">
      <div class="inner"></div>
    </div>
</div>

我們用了一個:hover讓鼠標虛浮的時候讓盒子變紅

.box:hover div {
	background-color: red;
}

這里有一個問題不知道大家想過沒有，為什么我這段代碼只讓center盒子變紅了，inner為什么沒有變紅呢？？？

展開查看

 因為CSS選擇器的優(yōu)先級！

我們在實現(xiàn)的時候一般都會像下面這樣寫吧，這個時候使用偽類選擇器改變元素樣式的時候就要注意選擇器優(yōu)先級的問題了。

.box .center {
      width: 150px;
      height: 150px;
      background-color: blueviolet;
}
.box .center .inner {
      width: 100px;
      height: 100px;
      background-color: coral;
}

這段代碼的優(yōu)先級比.box .center高，所以他也就只能覆蓋它了。

.box:hover div { 
      background-color: red;
}

相信我們很多人如果在寫鼠標懸浮大盒子讓最里面的inner盒子變色的時候，都會這么寫吧：

.box:hover .inner { 
      background-color: red;
}

有用嗎？沒用！

注意?: 優(yōu)先級還是沒有.box .center .inner高。

層疊性

所謂層疊性是指多種CSS樣式的疊加。是瀏覽器處理沖突的一個能力,如果一個屬性通過兩個相同選擇器設(shè)置到同一個元素上，那么這個時候一個屬性就會將另一個屬性層疊掉

原則：

樣式?jīng)_突，遵循的原則是就近原則。 那個樣式離著結(jié)構(gòu)近，就執(zhí)行那個樣式。
樣式不沖突，不會層疊

CSS層疊性最后的執(zhí)行口訣：  長江后浪推前浪，前浪死在沙灘上。

繼承性

子標簽會繼承父標簽的某些樣式，如文本顏色和字號。想要設(shè)置一個可繼承的屬性，只需將它應(yīng)用于父元素即可。簡單的理解就是：子承父業(yè)

CSS繼承性口訣：龍生龍，鳳生鳳，老鼠生的孩子會打洞

我們恰當?shù)厥褂美^承可以簡化代碼，降低CSS樣式的復雜性。比如有很多后代元素都需要某個樣式，可以給父級指定一個，這些孩子繼承過來就好了。

注意點：在CSS的繼承中不僅僅是兒子可以繼承, 只要是后代都可以繼承

可繼承的屬性

控制繼承

注意點: 對于天生自帶的繼承屬性我們可以控制它是否需要繼承

四個屬性

inherit: 被應(yīng)用屬性繼承父級的該屬性（默認就是該值）
initial初始化，把應(yīng)用屬性初始為它默認的樣式，并且排除繼承的干擾（默認會繼承的屬性也不再默認繼承，而是表現(xiàn)出沒有任何設(shè)置時候的默認樣式）
unset：意思是恢復其原本的繼承方式。對color屬性而言，就相當于inherit；而對于諸如border這樣默認不繼承的屬性，就相當于initial。
revert: 效果等同于unset且瀏覽器支持有限，這里不做演示

效果圖

演示

<ul style="color: green;">
    <li class="default">Default <a href="#">link</a> color</li>
    <li class="inherit">Inherit the <a style="color: inherit;" href="#">link</a> color</li>
    <li class="initial">Reset the <a style="color: initial;" href="#">link</a> color</li>
    <li class="unset">Unset the <a style="color: unset;" href="#">link</a> color</li>
</ul>

default中的a標簽沒有寫默認為inherit屬性，但是使用了瀏覽器預設(shè)樣式表：可以理解為瀏覽器幫我們?yōu)?span style="background-color: #F6F6F6; --tt-darkmode-bgcolor: #1B1B1B;"><a>寫了個style，其優(yōu)先級自然就高于其父元素了。
inherit中的a標簽在行內(nèi)寫了inherit，于是使用其父（或祖父，etc）元素的顏色值，在這里是綠色；
initial中的a標簽使用color屬性初始值（黑色), 注意不要混淆屬性初始值和瀏覽器樣式表指定值，樣式預設(shè)表是瀏覽器事先寫好的樣式，但是我color默認值就是黑色啊。
unset，意思是恢復其原本的繼承方式。對color屬性而言，就相當于inherit；而對于諸如border這樣默認不繼承的屬性，就相當于initial。

如果我們需要控制元素所有屬性的繼承使用all屬性

.inherit a {
	all: initial; 
	/* 將所有的屬性都恢復成默認值(天生繼承也不再繼承) */
    /* 行內(nèi)設(shè)置過的除外：你的層級干不過人家 */
}

繼承的權(quán)重是0

這個不難，但是忽略很容易繞暈。其實，我們修改樣式，一定要看該標簽有沒有被選中。

（1）如果選中了，那么以上面的公式來計權(quán)重。誰大聽誰的。（2）如果沒有選中，那么權(quán)重是0，因為繼承的權(quán)重為0.

控制繼承在我們封裝自己的組件的時候是會用到的，我們在封裝組件需要沿用樣式，有些默認情況下不可繼承父元素的屬性：box-sizing，這個其實用的就很多。

優(yōu)先級

要想了解優(yōu)先級，肯定得了解選擇器；但是選擇器非常多的，前面列舉的是日常開發(fā)用的比較多，其他的你可能一輩子都用不到，這里貼出C1~C4的選擇器，感興趣的同學可以看看。

定義CSS樣式時，經(jīng)常出現(xiàn)兩個或更多選擇器應(yīng)用在同一元素上，此時，

選擇器相同，則執(zhí)行層疊性（后者覆蓋前者)
選擇器不同，就會出現(xiàn)優(yōu)先級的問題。

權(quán)重計算公式

關(guān)于CSS權(quán)重，我們需要一套計算公式來去計算，這個就是 CSS Specificity（特殊性）

值從左到右，左面的最大，一級大于一級，數(shù)位之間沒有進制，級別之間不可超越。
常用的選擇器記法：

行內(nèi): 1,0,0,0
#id: 0,1,0,0
.class | :hover | :nth-child(): 0,0,1,0 (:hover這種一個冒號叫結(jié)構(gòu)偽類)
::after | ::before | ::first-line: 0,0,0,1 (這種兩冒號的叫偽元素，在書寫的時候雖然你可以寫一個冒號但是瀏覽器還是給你補上去了，本質(zhì)上就是兩冒號)

權(quán)重疊加

我們經(jīng)常用組合選擇器，是有多個基礎(chǔ)選擇器組合而成，那么此時，就會出現(xiàn)權(quán)重疊加。

就是一個簡單的加法計算

div ul li ------> 0,0,0,3
.nav ul li ------> 0,0,1,2
a:hover -----—> 0,0,1,1
.nav a ------> 0,0,1,1

注意?: 數(shù)位之間沒有進制比如說： 0,0,0,5 + 0,0,0,5=0,0,0,10 而不是 0,0, 1, 0，所以不會存在10個div能趕上一個類選擇器的情況。

important適用優(yōu)先級

#id .box div {
    color: red !important;
}

#id div.box div {
    color: green !important; // 使用這個選擇器中的顏色
}

通關(guān)答題

下面來幾道題，全對才算通過了噢

<style type="text/css">
  .c1 .c2 div{  
    color: blue;
  }
  div #box3 {  
    color:green;
  }
  #box1 div { 
    color:yellow;
  }
</style>
</head>
<body>
<div id="box1" class="c1">
  <div id="box2" class="c2">
    <div id="box3" class="c3">
      文字
    </div>
  </div>
</div>
</body>

什么顏色??

yellow 上面兩選擇器的層級都是一樣的, 后者覆蓋前者

<style type="text/css">
  #father #son{ 
    color:blue;
  }
  #father p.c2{ 
    color:black;
  }
  div.c1 p.c2{  
    color:red;
  }
  #father{
    color:green !important;
  }
</style>
</head>
<body>
<div id="father" class="c1">
  <p id="son" class="c2">
    試問這行字體是什么顏色的？
  </p>
</div>
</body>

blue

<body>
  <style>
    div.parent {
      width: 300px;
      height: 300px;
      border: 10px solid #000;
      font-size: 46px;
      text-shadow: 3px 13px 4px green;
      box-sizing: border-box
    }
    div.child {
      width: 200px;
      height: 200px;
      background-color: brown;
      border: 5px solid #000;
      width: inherit;
      box-sizing: inherit;
      font-size: 80px;
    }
  </style>
</head>
  <div class="parent">
    <div id="child" class="child">123</div>
  </div>

  <!-- 
    child: 字體多大? 有沒有文字陰影? 真實內(nèi)容的寬高是多少?
   -->
</body>

字體：80，有文字陰影，真實內(nèi)容的寬：290px 高190px

講下這最后一題

文字陰影有：因為從父元素中繼承到了,字體: 80px;

真實內(nèi)容寬290px, 高190px

常問的屬性

flex(彈性布局）
transform: translate3D rodate3D
animation(設(shè)定動畫)
3D or 透視(perspective)

flex

flex布局相信大家也都用爛了，用來讓盒子垂直和水平居中好用的一批

父項常用屬性

flex-direction：設(shè)置主軸的方向
justify-content：設(shè)置主軸上的子元素排列方式
flex-wrap：設(shè)置子元素是否換行
align-content：設(shè)置側(cè)軸上的子元素的排列方式（多行）
align-items：設(shè)置側(cè)軸上的子元素排列方式（單行）
flex-flow：復合屬性，相當于同時設(shè)置了 flex-direction 和 flex-wrap

flex-direction

在 flex 布局中，是分為主軸和側(cè)軸兩個方向，同樣的叫法有：行和列、x 軸和y 軸

默認主軸方向就是 x 軸方向，水平向右
默認側(cè)軸方向就是 y 軸方向，水平向下

主軸和側(cè)軸是會變化的，就看 flex-direction 設(shè)置誰為主軸，剩下的就是側(cè)軸。而我們的子元素是跟著主軸來排列的

flex-wrap設(shè)置是否換行

默認情況下，項目都排在一條線（又稱”軸線”）上。flex-wrap屬性定義，flex布局中默認是不換行的。
nowrap 不換行
wrap 換行

justify-content 設(shè)置主軸上的子元素排列方式

效果圖

這里講下space-around和space-evenly

space-around：項目之間的間距為左右兩側(cè)項目到容器間距的2倍

space-evenly：項目兩側(cè)之間的間距與項目與容器兩側(cè)的間距相等，相當于除去項目寬度和容器和項目的兩側(cè)間距，剩下的平均分配了剩余寬度作為項目左右margin。

**設(shè)置側(cè)軸上的子元素排列方式：align-items(單行)/align-content(多行) **

上圖寫能設(shè)置多行只能用于子項出現(xiàn) 換行的情況（多行），在單行下是沒有效果的。

效果跟上面是一樣的只不過是方向換了，上面是元素在主軸上排列，這個是在側(cè)軸上，至于側(cè)軸是不是Y軸就看你的flex-direciton怎么設(shè)置的了

子項常見屬性

flex(復合屬性): 默認: flex: 0 1 auto;

flex-grow
flex-shrink
flex-basis

align-self：控制子項自己在側(cè)軸的排列方式
order：定義子項的排列順序(前后順序), 0是第一個

flex-grow

默認0，用于決定項目在有剩余空間的情況下是否放大，默認不放大；注意，即便設(shè)置了固定寬度，也會放大。

假設(shè)第一個項目默認為0，第二個項目為flex-grow:2，最后一個項目為1，則第二個項目在放大時所占空間是最后項目的兩倍。

可以這么理解:

flex: 1=> 在剩余的空間里我就占一份
flex: 2=> 在剩余的空間里我就占兩份
flex: 3=> 在剩余的空間里我就占三份

假設(shè)三個盒子分別都設(shè)置了上面的屬性: 那就將剩余空間分成6份, 各占自己的份數(shù)

假設(shè)前兩個沒有設(shè)置, 就最后一個設(shè)置了flex: 3===flex: 1, 那就將剩余空間都給它

flex-shrink

默認1，用于決定項目在空間不足時是否縮小，默認項目都是1，即空間不足時大家一起等比縮小；注意，即便設(shè)置了固定寬度，也會縮小。但如果某個項目flex-shrink設(shè)置為0，則即便空間不夠，自身也不縮小。

上圖中第二個項目flex-shrink為0，所以自身不會縮小。

flex-basis

默認auto，用于設(shè)置項目寬度，默認auto時，項目會保持默認寬度，或者以width為自身的寬度，但如果設(shè)置了flex-basis，權(quán)重會width屬性高，因此會覆蓋widtn屬性。

上圖中先設(shè)置了flex-basis屬性，后設(shè)置了width屬性，但寬度依舊以flex-basis屬性為準。

注意?: 如果當容器中有多個盒子并且還寬度100%, flex-basis會被影響, 如下圖

解決辦法就是在我們設(shè)置flex-basis寬度時, 最好給他設(shè)置flex-shrink為0不縮放

transform

2D的屬性相信大家都會用了, 本文主要深究transform的3D屬性

透視：perspctive
3D呈現(xiàn)：transfrom-style
3D 位移：translate3d(x, y, z)
3D旋轉(zhuǎn)：rotate3d(x, y, z)

透視(perspective)
在講3D之間先來了解一下透視(視距)，只有了解了透視我們才能理解3D的物體投影在2D平面上

透視也稱為視距，所謂的視距就是人的眼睛到屏幕的距離
實際上模仿人類的視覺位置，可視為安排一直眼睛去看
距離透視點越近的在電腦平面成像越大，越遠成像越小
透視的單位是像素

注意: 透視需要寫在被視察元素的父盒子上面

拿圖說話

d：就是視距，視距就是指人的眼睛到屏幕的距離
z：就是 z 軸，z 軸越大(正值)，我們看到的物體就越大

來個例子

給實例的父元素設(shè)置: perspective: 200px;

上面我們在div的父盒子上設(shè)置了perspective，也就是說從3D成像的角度來講我們?nèi)搜劬嚯x屏幕div是200的視距，translate3D設(shè)置Z軸讓div往前挪了100，視距變小距離我們?nèi)搜劬嚯x也就越小，所以看到的div也就變大了。（可以想像成在500米遠看見的人，和5米看見的人。）
translate3d(x, y, z)

3D的特點

近大遠小
物體和面遮擋不可見

三維坐標系

x 軸：水平向右 -- 注意：x 軸右邊是正值，左邊是負值
y 軸：垂直向下 -- 注意：y 軸下面是正值，上面是負值
z 軸：垂直屏幕 -- 注意：往外邊的是正值，往里面的是負值

3D 呈現(xiàn) transform-style
transform-style：控制子元素是否開啟三維立體環(huán)境，代碼寫給父級，但是影響的是子盒子

transform-style: flat 代表子元素不開啟 3D 立體空間，默認的
transform-style: preserve-3d 子元素開啟立體空間

效果圖

body {
  perspective: 500px;
}

.box {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 100px auto;
  transition: all 2s;
  /* 讓子元素保持3d立體空間環(huán)境 */
  transform-style: preserve-3d;
}

.box:hover {
  transform: rotateY(60deg);
}

.box div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: pink;
}

.box div:last-child {
  background-color: purple;
  transform: rotateX(60deg);
}

rotate3d(x, y, z)

3D 旋轉(zhuǎn)指可以讓元素在三維平面內(nèi)沿著 x 軸、y 軸、z 軸或者自定義軸進行旋轉(zhuǎn)

transform: rotate3d(x, y, z, 45deg)` -- 沿著自定義軸旋轉(zhuǎn) 45 deg 為角度

例子：

<ul>
	<li>
		<div class="box">
		<div class="front">公眾號:</div>
		<div class="bottom">前端留學生</div>
		</div>
	</li>
</ul>

ul li {
	float: left;
	margin: 0 5px;
	width: 120px;
	height: 35px;
	list-style: none;
	/* 一會我們需要給box 旋轉(zhuǎn) 也需要透視 干脆給li加 里面的子盒子都有透視效果 */
	perspective: 500px;
}

.box {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transition: all .4s;
}

.box:hover {
	transform: rotateX(90deg);
}

.front,
.bottom {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

.front {
	background-color: pink;
	z-index: 1;
	transform: translateZ(17.5px);
}

.bottom {
	background-color: purple;
	/* 這個x軸一定是負值 */
	/* 我們?nèi)绻幸苿?或者其他樣式，必須先寫我們的移動 */
	transform: translateY(17.5px) rotateX(-90deg);
}

animation

動畫(animation)是 CSS3 中最具顛覆性的特征之一，可通過設(shè)置多個節(jié)點來精確的控制一個或者一組動畫，從而實現(xiàn)復雜的動畫效果, 先定義動畫再調(diào)用定義好的動畫

動畫序列

0% 是動畫的開始，100 % 是動畫的完成，這樣的規(guī)則就是動畫序列

在 @keyframs 中規(guī)定某項 CSS 樣式，就由創(chuàng)建當前樣式逐漸改為新樣式的動畫效果
動畫是使元素從一個樣式逐漸變化為另一個樣式的效果，可以改變?nèi)我舛嗟臉邮饺我舛嗟拇螖?shù)
用百分比來規(guī)定變化發(fā)生的時間，或用 from 和 to，等同于 0% 和 100%

@keyframes move{
	0% {
		transform: translate(0px)
	}
	form {
		transform: translate(0px)
	}
	
	100% {
		transform: translate(500px, 0)
	}
	to {
		transform: translate(500px, 0)
	}
}

動畫常見屬性

動畫簡寫方式

/* animation: 動畫名稱 持續(xù)時間 運動曲線 何時開始 播放次數(shù) 是否反方向 起始與結(jié)束狀態(tài) */
animation: name duration timing-function delay iteration-count direction fill-mode

除了名字，持續(xù)時間，何時開始有嚴格順序要求其它隨意

CSS實現(xiàn)掃描二維碼

效果

面試常問題

BFC相關(guān)

BFC(Block formatting context)直譯為"塊級格式化上下文"。

在講BFC之前得先說下display的屬性值，只有它符合成為條件才資格觸發(fā)BFC機制

那些屬性值會具有BFC的條件

不是所有的元素模式都能產(chǎn)生BFC，w3c 規(guī)范： display 屬性為 block, list-item, table 的元素，會產(chǎn)生BFC.

大家有沒有發(fā)現(xiàn)這個三個都是用來布局最為合理的元素，因為他們就是用來可視化布局。注意其他的，display屬性，比如 line 等等，他們創(chuàng)建的是 IFC ，我們下面研究。

這個BFC 有著具體的布局特性：

有寬度和高度，有外邊距margin 有內(nèi)邊距padding 有邊框 border。就好比，你有了練習武術(shù)的體格了。有潛力，有資質(zhì)。

什么情況下可以讓元素產(chǎn)生BFC

以上盒子具有BFC條件了，就是說有資質(zhì)了，但是怎樣觸發(fā)才會產(chǎn)生BFC，從而創(chuàng)造這個封閉的環(huán)境呢？

就好比，你光有資質(zhì)還不行，你需要一定額外效果才能觸發(fā)的武學潛力，要么你掉到懸崖下面，撿到了一本九陰真經(jīng)，要么你學習葵花寶典，欲練此功必先....

同樣，要給這些元素添加如下屬性就可以觸發(fā)BFC。

float屬性不為none
position為absolute或fixed
display為inline-block, table-cell, table-caption, flex, inline-flex
overflow不為visible。
BFC元素所具有的特性
BFC布局規(guī)則特性：
在BFC中，盒子從頂端開始垂直地一個接一個地排列
盒子垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰盒子的margin會發(fā)生重疊
在BFC中，每一個盒子的左外邊緣（margin-left）會觸碰到容器的左邊緣(border-left)（對于從右到左的格式來說，則觸碰到右邊緣）。

BFC的區(qū)域不會與浮動盒子產(chǎn)生交集，而是緊貼浮動邊緣。
計算BFC的高度時，自然也會檢測浮動或者定位的盒子高度

它是一個獨立的渲染區(qū)域，只有Block-level box參與，它規(guī)定了內(nèi)部的Block-level Box如何布局，并且與這個區(qū)域外部毫不相干。

白話文： 孩子在家里愿意怎么折騰都行，但是出了家門口，你就的乖乖的，不能影響外面的任何人。

BFC的主要用途

(1) 清除元素內(nèi)部浮動

只要把父元素設(shè)為BFC就可以清理子元素的浮動了，最常見的用法就是在父元素上設(shè)置overflow: hidden樣式

主要用到

計算BFC的高度時，自然也會檢測浮動或者定位的盒子高度。

(2) 解決外邊距合并(塌陷)問題

主要用到

盒子垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰盒子的margin會發(fā)生重疊

屬于同一個sBFC的兩個相鄰盒子的margin會發(fā)生重疊，那么我們創(chuàng)建不屬于同一個BFC，就不會發(fā)生margin重疊了。

(3) 制作右側(cè)自適應(yīng)的盒子問題

主要用到

普通流體元素BFC后，為了和浮動元素不產(chǎn)生任何交集，順著浮動邊緣形成自己的封閉上下文

BFC 總結(jié)

BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。包括浮動，和外邊距合并等等，因此，有了這個特性，我們布局的時候就不會出現(xiàn)意外情況了。

IFC相關(guān)

IFC（inline Formatting Context）叫做“行級格式化上下”相對BFC比較簡單且問的也不是很多，這里大概做個了解

布局規(guī)則如下：

內(nèi)部的盒子會在水平方向，一個個地放置(默認就是IFC)；
IFC的高度，由里面最高盒子的高度決定(里面的內(nèi)容會撐開父盒子）；
當一行不夠放置的時候會自動切換到下一行；

哪些屬性開啟了性能加速

何為硬件加速：就是將瀏覽器的渲染過程交給GPU(Graphics Processing Unit)處理，而不是使用自帶的比較慢的渲染器。這樣就可以使得animation與transition更加順暢
我們可以在瀏覽器中用CSS開啟硬件加速，使GPU發(fā)揮功能，從而提升性能
所謂GPU，就是圖形處理器的縮寫，相當于PC中的顯卡。手機中的GPU也是為了對圖形、圖像處理而存在的，所謂強制渲染，就是hwa（hardware acceleration硬件加載）的一種，其存在的意義就是為了分擔cpu的負擔，其原理是通過GPU對軟件圖形的處理來減輕CPU的負擔。從而使應(yīng)用軟件能夠以更快的速度被處理，以達到提速的目的。
硬件加速的原理

瀏覽器接收到頁面文檔后，會將文檔中的標記語言解析為DOM樹。DOM樹和CSS結(jié)合后形成瀏覽器構(gòu)建頁面的渲染樹。渲染樹中包含大量的渲染元素，每個渲染元素會被分到一個圖層中，每個圖層又會被加載到GPU形成渲染紋理，而圖層在GPU中transform是不會觸發(fā)repaint的，最終這些使用transform的圖層都會由獨立的合成器進程進行處理, CSS transform會創(chuàng)建了一個新的復合圖層，可以被GPU直接用來執(zhí)行transform操作。

瀏覽器什么時候會創(chuàng)建一個獨立的復合圖層呢？事實上一般是在以下幾種情況下：

3D或者CSS transform
<video>和<canvas>標簽
css filters(濾鏡效果)
元素覆蓋時，比如使用了z-index屬性

為什么硬件加速會使頁面流暢

因為transform屬性不會觸發(fā)瀏覽器的repaint（重繪），而絕對定位absolute中的left和top則會一直觸發(fā)repaint（重繪）。

為什么transform沒有觸發(fā)repaint呢？

簡而言之，transform動畫由GPU控制，支持硬件加載，并不需要軟件方面的渲染。并不是所有的CSS屬性都能觸發(fā)GPU的硬件加載，事實上只有少數(shù)的屬性可以，比如transform、opacity、filter

如何用CSS開啟硬件加速

CSS animation、transform以及transition不會自動開啟GPU加速，而是由瀏覽器的緩慢的軟件渲染引擎來執(zhí)行，那我們怎樣才可以切換到GPU模式呢，很多瀏覽器提供了某些觸發(fā)的CSS規(guī)則。

當瀏覽器檢測到頁面中某個DOM元素應(yīng)用了某些CSS規(guī)則時就會開啟，最顯著的特征的元素是3D變化。

.cube{
    translate3d(250px,250px,250px);
    rotate3d(250px,250px,250px,-120deg)
    scale3d(0.5,0.5,0.5);
}

可能在一些情況下，我們并不需要對元素應(yīng)用3D變幻的效果，那怎么辦呢?這時候我們可以使用“欺騙”瀏覽器來開啟硬件加速。雖然我們可能不想對元素應(yīng)用3D變換，可我們一樣可以開啟3D引擎。例如我們可以用transform:translateZ(0);來開啟硬件加速

.cube{
   transform: translateZ(0);
}

寫在最后

如果文章中有那塊寫得不太好或有問題歡迎大家指出，我也會在后面的文章不停修改。也希望自己進步的同時能跟你們一起成長。喜歡我文章的朋友們也可以關(guān)注一下

此時，年輕的我和你，輕裝上陣；而后，富裕的你和我，滿載而歸。

作者：前端自學驛站
鏈接：https://juejin.im/post/6888102016007176200
來源：掘金

源：眾成翻譯譯者：myvin

幽靈般詭異的CSS選擇器

讓我們用萬圣節(jié)主題帖來盡情慶祝萬圣節(jié)吧。我會使用一些來自CSS選擇器王室墳墓的CSS選擇器來拉開序幕，這些東西可是會讓你害怕到骨子里的喲。額，也許沒有那么恐怖，但是至少它們是有些詭異的。

遲鈍的貓頭鷹選擇器

兩年前，Heydon Pickering將它發(fā)揚光大，它看起來是這個樣子的:

* + * {

margin-top: 1.5em;

}

無圖無真相，看看這遲鈍的貓頭鷹吧。這回記住了吧？！

插圖來自Ping Zhu，摘自A List Apart。

這里想要實現(xiàn)的是給所有擁有前一個同胞節(jié)點的元素設(shè)置margin-top值。你沒必要像下面這樣做：

.the-last-one-so-don't-put-margin-on-me {

margin-bottom: 0;

}

使用貓頭鷹選擇器，你將會得到均勻的間隔：

CodePen 代碼

你也可以看看其他的小伙伴是如何玩轉(zhuǎn)這個選擇器的。

幽靈選擇器

這個小家伙太詭異了，以至于我的WordPress網(wǎng)站都保存不了，所以讓我們使用CodePen來看下效果（嵌入頁面的CodePen看起來可能也會有些詭異，所以請嘗試直接在CodePen上查看）：

說到那些不同尋常的角色，當然也不能少了emoji表情！

怪物選擇器

說到那些不同尋常的角色，再來看看這些顏文字吧：

顏文字

上面列出的都是可以作為選擇器的喲！但是在這種情況下，一些字符需要用工具或者其他的方式來轉(zhuǎn)義。幸運的是，Mathias Bynens已經(jīng)提供了轉(zhuǎn)義的工具。

這就意味著我們可以像這樣做：

呆瓜選擇器

the-brain:empty {

color: green;

}

哪種選擇器可以作為大腦呢？我們可以通過瘋狂的科學來創(chuàng)建一個像弗蘭肯斯坦一樣的怪物。或者只是創(chuàng)建一個普通的元素，也或者是其他什么元素。

<template>The brain!</template>

（據(jù)說現(xiàn)在已經(jīng)支持使用customElements.define()來實現(xiàn)了？不管你知道不知道，反正我是不知道~.~）。

所以現(xiàn)在如果我們像下面這樣寫的話我們的選擇器就會被匹配到：

<the-brain></the-brain>

但是正如選擇器所示的那樣，如果我們這樣寫的話是不會被匹配到的：

<the-brain>Fallback content inside.</the-brain>

這樣寫也匹配不到：

<the-brain> </the-brain>

除非我們可以使用the-brain:blank {}，但是:blank還沒有被真正地支持。

麻木不仁的選擇器

比呆瓜更可怕的是什么？不管是什么，當然不可能是個泛泛之輩。好吧，它是一個看起來仍然很詭異的選擇器，對吧？

a[href$=".zip" i] { }

末尾的"i"表示：屬性值".zip"不管是大寫還是小寫都是會被匹配到的。

該段代碼來自Wes Bos：

CSS4 is getting case insensitive matching on attribute selectors! pic.twitter.com/7LQBi2VUcL
— Wes Bos (@wesbos) December 2, 2015

堅強不屈的選擇器

實現(xiàn)僵尸斑馬紋很簡單對吧？

tr:nth-child(odd) {

background: WhiteSmoke;

}

但是如果我們使用JavaScript的神奇魔法，通過在某些行上添加一個類使該行在視覺上消失遁形，結(jié)果會怎么樣呢：

...

...

.BANISHED {display: none;}

現(xiàn)在我們的斑馬紋已經(jīng)一團糟了，就像在施法召喚的時候一堆蠑螈掉進了藥鍋（哦，對不起）。

CSS4對此有相應(yīng)的解決之道:

tr:nth-child(odd of li:not(.BANISHED)) {background: WhiteSmoke;}

上面的寫法表示的是，在可見的行上計算奇偶，如此一來，斑馬紋依然堅強不屈地保持完好無損。

然而該選擇器還沒有被完全支持，所以讓我們像女鬼一樣嚎叫吧，嚎叫到天荒地老，嚎叫到該選擇器被完全支持。

穿腸而過的匕首選擇器

還記得我們之前創(chuàng)建的那個特定元素<the-brain>嗎？假如元素的模板內(nèi)部有一些實實在在的HTML標簽，就像這個樣子：

<div class="braaaain">The brain!</div>

</template>

正如我們所見，你給元素添加了樣式，然后期望這個元素會乖乖地帶著樣式展現(xiàn)出來。但是，你血淋淋的雙手是沒有辦法直接將其穿腸而過的。

/* works fine */

the-brain {

color: pink;

}

/* But you can't reach inside like this */

.braaaain {

color: red;

}

這其實就是封裝，是web組件化的關(guān)鍵所在，但是你可以用一把匕首刺穿這個幽靈的SHADOW DOM，就像這個樣子：

html /deep/ .braaaain {

color: red;

}

但是現(xiàn)在只有Blink內(nèi)核支持，我無法確定這會不會成為標準。Word的天啊，跨瀏覽器兼容之痛啊。

ID選擇器

#container {

}

這個就太具體了，哈哈哈~~

在線咨詢

上一篇：Rabbitmq實戰(zhàn)golang實現(xiàn)
下一篇：天底下竟有這樣的好事：每天報道打卡展示書法作品，還能

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

Web前端，認識css，css規(guī)格，偽類和偽元素的用

三大特性

選擇器

種類

基本選擇器

偽類選擇器

組合選擇器

綜合例子

層疊性

繼承的權(quán)重是0

權(quán)重計算公式

通關(guān)答題

常問的屬性

flex

animation

面試常問題

BFC相關(guān)

BFC的主要用途

IFC相關(guān)

為什么硬件加速會使頁面流暢

如何用CSS開啟硬件加速

寫在最后

幽靈般詭異的CSS選擇器

您的項目需求