【11】css 基本功：引入方式及選擇器相關

2020 年 1 月 14 日
筆記

vue 組件開發，必須熟悉基本的 css 知識及技巧。

目錄    1、原生 css 的三種引用方式  2、組件開發中的選擇器      2.1、深度作用選擇器      2.2、不使用類型選擇器  3、css 選擇器

1、原生 css 的三種引用方式

內聯

將 css 樣式程式碼直接嵌入在style屬性中。

<p style='color:red;'>文字顏色為紅色</p>

嵌入

將style程式碼塊嵌入在head或body內。

<head>      <style type='text/css'>          span{              font-size:18px;              color: red;          }      </style>  </head>

外部

將css樣式定義在單獨的css文件中，然後使用link標籤在頁面內引入。

<link rel="stylesheet" href="common.css" type="text/css">

這是原生的方式。在工程化組件開發中，樣式有另外的規則和技巧。

2、組件開發中的選擇器

2.1、深度作用選擇器

在啟用了scoped的樣式內，可以使用>>>跨越選擇更深的子孫組件。

例如：

<style scoped>  .a >>> .b { /* ... */ }  </style>

會編譯成：

.a[data-v-f3f3eg9] .b { /* ... */ }

有些像 Sass 之類的預處理器無法正確解析 >>>。這種情況下可用 /deep/ 或 ::v-deep 操作符取而代之。

2.2、不使用類型選擇器

當在元素選擇器在scoped style樣式塊之內時，例如：

p { color: red }

執行效率會慢很多倍。如果使用類選擇器或者 id選擇器取而代之，比如：

.example { color: red }

性能影響就會消除。

3、css 選擇器

1、元素選擇器

p{   color: #00CCFF;  }

2、id選擇器

#red {   color:red;  }  <li id="red">香蕉</li>

3、類選擇器

應用最多的一類選擇器。

.fo{     color: #00AA88;  }  <ul class="fo">  </ul>

4、元素+類選擇器

p.important {color:red;}  <p class="important"> 這個字體顏色為紅色</p>

5、多個類選擇器

.important {font-weight:bold;}  .warning {font-style:italic;}  .important.warning {background:silver;}  <p class="important warning">  該字體顯示為加粗、斜體以及背景色為銀色的效果  </p>

顯示為所有類的樣式效果。

6、屬性選擇器

h2[title]  {  color:red;  }  <h2 title="Hello world">Hello world</h2>

為擁有指定屬性的元素設置樣式。scoped css 模組化即是通過添加隨機屬性名稱實現的。

還可以精準查找屬性與屬性值：

p[class="important warning"] {color:red}  <p class="important warning">字體顏色為紅色</p>

須同時滿足條件，具有class屬性，且屬性值為xx。

7、後代選擇器

依據元素的上下文位置關係確定：

li strong {      font-style: italic;      font-weight: normal;    }  <li><strong>蘋果</strong></li>

strong在li之後，strong為li的後代。

8、子元素選擇器

h1 > strong {color:red;}  <h1>This is <strong>very</strong>  <strong>very</strong> important.</h1>

兩個very均為紅色。該選擇器選擇作為子元素的元素。

9、兄弟選擇器

選擇相鄰的另一元素，二者有相同父元素。

h1 + p {margin-top:50px;}  <h1>This is a heading.</h1>  <p>和h1有距離</p>  <p>This is paragraph.</p>

效果：

緊隨的第一個p有樣式效果。

10、:last-child 選擇器

指定屬於其父元素的最後一個子元素的樣式。

p:last-child{   background:#ff0000;  }

p:last-child 等同於 p:nth-last-child(1)。

11、:first-child 選擇器

指定屬於其父元素的首個子元素的樣式。

p:first-child{   background-color:yellow;  }

例如：

p:first-child i {  background:yellow;  }

選擇每個 <p> 中的每個 <i> 元素並設置其樣式，其中的 <p> 元素是其父元素的第一個子元素。

參考鏈接

https://cloud.tencent.com/developer/article/1514516
https://vue-loader.vuejs.org/zh/guide/scoped-css.html
https://www.jianshu.com/p/e56f07f8da62
http://w3school.com.cn/cssref/selector_last-child.asp

專欄列表

基於 vue+go 如何快速進行業務迭代？