CSS selector

  • CSS選擇器常見的有幾種?
    • 元素選擇器，p {}
    • 后代選擇器，p a {}
    • id選擇器，#header {}
    • 類選擇器，.clearfix {}
    • 子選擇器，p>a {}
    • 同胞選擇器
      • 相鄰同胞選擇器，p+p {}
      • 一般同胞選擇器，p~p {}
        .p1+p {
        color: red;
        }
        .p2~p {
        color: blue;
        }
        同胞選擇器
    • 通配符選擇器，* {}
    • 屬性選擇器
      • [attr]，屬性名attr的元素
      • [attr=value]，屬性名為attr，屬性值為"value"的元素
      • [attr~=value]，以空格做分隔符，其中一個值為"value"的元素
      • [attr|=value]，以"value"-開頭的元素("-"為連字符)，常用于zh-CN,zh-TW
      • [attr^=value]，以"value"開頭的元素
      • [attr$=value]，以"value"結尾的元素
      • [attr*=value]，含有"value"的元素
      • [attr operator value i]，忽略屬性值大小寫
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        [lang~="en-us"] {
            color: red;
        }
        [lang|="zh"] {
            color: blue;
        }
    </style>
</head>
<body>
        <a href="#">English:</a>
        <span lang="en-us en-gb en-au en-nz">Hello World!</span><br>
        <a href="#">Portuguese:</a>
        <span lang="pt">Olá Mundo!</span><br>
        <a href="#">Chinese (Simplified):</a>
        <span lang="zh-CN">世界您好！</span><br>
        <a href="#">Chinese (Traditional):</a>
        <span lang="zh-TW">世界您好！</span><br>
</body>
</html>
屬性選擇器
- 偽類選擇器，`a:hover {}`
  偽類選擇器表示的是原本存在的元素，相當于給這些元素加上一個類，在CSS3中用":"和 "::"區分偽類和偽元素，但是一般瀏覽器兩種方式都兼容
- 偽元素選擇器，`p::first-letter {}`
  偽元素選擇器表示的是原本不存在的元素，相當于加上一個元素，注意：`::after`和`::before`中的content的屬性，該屬性的值有：
    - <string>，文本內容
    - <uri> url()，外部資源（比如圖片），如果該資源不能顯示，它就會被忽略或顯示一些占位
    - attr(x)，將元素的X屬性以字符串形式返回
    - open-quote|close-quote，引號

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .bd::before {
           content: "（我是前面的字符串）";
        }

        .bd::after {
            content: "(" attr(href) ")";
        }

        .jrg::before {
            content: url(http://upload-images.jianshu.io/upload_images/2348761-f10b477e82e5ac19.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240);
        }
        
        q::before {
            content: open-quote;
        }

        q::after {
            content: close-quote;
        }
    </style>
</head>
<body>
    <a  class="bd">百度</a><br>
    <a href="http//jirengu.com" class="jrg">饑人谷</a><br>
    <q>我是引用</q>
</body>
</html>
content屬性
  • 選擇器的優先級是怎樣的?
    • 整體遵循下列三條規則
      • 選擇器越精確，優先級越高
      • 優先級相同的情況下，后面的樣式會覆蓋前面的樣式
      • !important的優先級最高
    • 選擇器權重
      選擇器權重

      理解起來就是一個內聯元素的權重是1000，一個id選擇器的權重是100，類選擇器、偽類選擇器和屬性選擇器是10，元素選擇器和偽元素選擇器是1，最后通配符選擇器是0，所以最后一樣選擇器權重的值就是按照這個公式計算value=a*1000+b*100+c*10+d*1
      參考：Specificity Calculator
  • class 和 id 的使用場景?
    id表示的是頁面上獨一無二的，是不可重復的，而class表示的是一類。
    • 當我們需要為一類元素指定樣式時就使用class
    • 當我們需要為元素做出單獨的標記的時候就是用id
  • 使用CSS選擇器時為什么要劃定適當的命名空間？
    • 為了代碼的可讀性
    • 為了代碼的易維護性
  • 以下選擇器分別是什么意思?
    /id為header的元素/
    #header{
    }
    /class為header的元素/
    .header{
    }
    /class為header后代中的class為logo的元素/
    .header .logo{
    }
    /class為header和mobile的元素/
    .header.mobile{
    }
    /class為header后代中的p元素和class為header后代的h3元素
    .header p, .header h3{
    }
    /    id為header后代中class為nav子代中的li元素
    #header .nav>li{
    }
    /*id為header后代中的a元素的偽類hover
    #header a:hover{
    }
  • 列出你知道的偽類選擇器
    • :link，默認狀態下的鏈接
    • :visited，點擊過的鏈接
    • :hover，鼠標懸浮上去的鏈接
    • :focus，tab焦距上去的鏈接
    • :active，鼠標按下去的鏈接
    • :first-child，first-child代表了某個元素，這個元素是它父元素的的第一個子元素.
    • :first-of-type，匹配元素的所有子元素類型中第一個出現的元素
  • :first-child和:first-of-type的作用和區別
    • 兩種用法
      • 第一種和后代選擇器組合起來，div :first-child或div :first-of-stype,注意父元素和偽類之間加了空格，表示的是父元素的后代中的第一個子元素或者子元素中某個類型的第一個第一個
      • 第二種和元素選擇器一起使用，p:first-child和p:first-of-stype，分別表示的是p元素而且他父元素下的第一個的那個元素和所有p類型的第一個
    • 區別是，如果只和元素選擇器配合起來用，p:first-child必須是父元素下的第一個，而p:first-ot-type則不需要，只要是p標簽中的第一個就可以
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div :first-of-type {
            background-color: lime;
        }
    </style>
</head>
<body>
    <div>
        <span>This span is first!</span>
        <span>This span is not. :(</span>
        <span>what about this <em>nested element</em>?</span>
        <strike>This is another type</strike>
        <span>Sadly, this one is not...</span>
    </body>
</html>
:first-of-type
  • 運行如下代碼，解析下輸出樣式的原因。
<style>
.item1:first-child{ color: red;}
.item1:first-of-type{ background: blue;}
</style> 
<div class="ct"> 
<p class="item1">aa</p>
<h3 class="item1">bb</h3> 
<h3 class="item1">ccc</h3> 
</div>

1. `<p class="item1">aa</p>`是其父元素下的第一個子元素，所以`.item1:first-child{ color: red;}`生效了。
2. `.item1:first-child{ color: red;}`和`<h3 class="item1">bb</h3> `分別是父元素下其類型元素的第一個，所以`.item1:first-of-type{ background: blue;}`生效了。
  • text-align: center的作用是什么，作用在什么元素上？能讓什么元素水平居中

The text-align CSS property describes how inline content like text is aligned in its parent block element. text-align does not control the alignment of block elements, only their inline content.---MDN

text-align: center的作用在塊級元素上，他的作用是讓行內元素相對與他的父元素居中顯示

  • 如果遇到一個屬性想知道兼容性，在哪查看?
    caniuse或者MDN
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具（例如配置管理，服務發現，斷路器，智...
    卡卡羅2017閱讀 134,923評論 18贊 139
  • 1.CSS選擇器常見的有幾種? 詳情請見teren的技術博客:CSS選擇器與優先級淺析 2.選擇器的優先級是怎樣的...
    犯迷糊的小羊閱讀 472評論 1贊 1
  • 1.CSS選擇器常見的有幾種？選擇器的優先級怎樣？ 詳情請點擊Peter的web前端技術博客 2.class和Id...
    Sheldon_Yee閱讀 633評論 0贊 0
  • 一、CSS選擇器常見的有幾種? 基本選擇器 通配選擇器~選擇文檔中所有的html元素，用一個*表示 元素選擇器~選...
    dengpan閱讀 977評論 0贊 3
  • 其實平時用得多的選擇器無非也就是那么幾個，時間久了，許多不常用的選擇器就慢慢忘記了。為了不讓自己忘記這些選擇器，今...
    盛夏晚清風閱讀 1,874評論 0贊 5