CSS選擇器

CSS學(xué)習(xí)筆記

一、CSS選擇器

0.通配符

通配符是全局的設(shè)定的CSS樣式，也就是設(shè)置了之后整個(gè)界面都會(huì)采用的樣式。

<style>
    *{color: red;}
</sytle>

<body>
    <div>我是div</div>
</body>

1.標(biāo)簽選擇器

標(biāo)簽選擇器就是選擇html對(duì)應(yīng)的標(biāo)簽名字，然后設(shè)定CSS樣式。


<style> 

    div {
        color : red
    }

</style>

<body>

    <div>我是div標(biāo)簽</div>

</body>

這就是一個(gè)典型的標(biāo)簽選擇器，在style中設(shè)置div的標(biāo)簽的CSS樣式。

2.類選擇器

類選擇器就是設(shè)置一個(gè)類名，然后通過(guò).類名來(lái)進(jìn)行設(shè)置。


<style>

  .high {
    color: red;
  }

</style>

<body>

  <div class="high">我是div標(biāo)簽2</div>

</body>

class里面輸入的是類名，使用類選擇器，要使用.跟上類名來(lái)定義這個(gè)類CSS。

3.id選擇器

id選擇器就是使用id=""來(lái)定義，但是設(shè)置CSS那邊，要使用#來(lái)進(jìn)行標(biāo)記。

id選擇器只能有一個(gè)，如果設(shè)置多個(gè)，就會(huì)無(wú)法使用


<style>

  #test {

    color: red;

  }

</style>

<body>

  <div id="test">我是div標(biāo)簽2</div>

</body>

4.并聯(lián)選擇器

并聯(lián)選擇器顧名思義就是或選擇器，中間用，號(hào)進(jìn)行隔開，表示只要滿足相關(guān)的，都采用下面的CSS的樣式。


<style>

  div, .high {

    color: red;

  }

</style>

<body>

  <div>我是div標(biāo)簽1</div>

  <div class="high">我是div標(biāo)簽2</div>

  <p>我是段落標(biāo)簽</p>

</body>

這邊代碼意思是只要是div標(biāo)簽或者是high類的都會(huì)執(zhí)行相應(yīng)的css樣式。

5.復(fù)合選擇器

復(fù)合選擇相當(dāng)于與運(yùn)算，只有同時(shí)滿足這2個(gè)條件，才會(huì)添加CSS樣式。


<style>

  div.high {

    background-color: green

  }

</style>

<body>

  <div>我是div標(biāo)簽1</div>

  <div class="high">我是div標(biāo)簽2</div>

  <p>我是段落標(biāo)簽</p>

</body>

這段代碼意思就是滿足是div標(biāo)簽，同時(shí)滿足class為high才會(huì)添加背景顏色這個(gè)CSS樣式。

6.后臺(tái)選擇器

后代選擇器的意思就是一個(gè)標(biāo)簽里面包含的其他標(biāo)簽就會(huì)采用這種CSS樣式。用空格來(lái)劃分。


<style>

  div p {

    background-color: blue;

  }

</style>

<body>

    <div>

        <p>我是div標(biāo)簽里面的p標(biāo)簽1</p>

        <span>

            <p>我是div標(biāo)簽里面的span標(biāo)簽里面的P標(biāo)簽</p>

        </span>

    </div>

</body>

這段代碼的意思是div標(biāo)簽里面的p標(biāo)簽就要采用CSS的樣式。

7.直接繼承標(biāo)簽

所謂的直接繼承就是父與子的關(guān)系， 比方說(shuō)div標(biāo)簽里面有一個(gè)p標(biāo)簽，那這個(gè)p標(biāo)簽就是div標(biāo)簽的直接繼承標(biāo)簽，如果div標(biāo)簽里面有一個(gè)span標(biāo)簽，span標(biāo)簽里面有一個(gè)p標(biāo)簽，那么就不符合直接繼承的關(guān)系。直接繼承標(biāo)簽用>來(lái)連接

注意：如果div標(biāo)簽里面包含一個(gè)div標(biāo)簽，里面的div標(biāo)簽包含一個(gè)p標(biāo)簽，那么也滿足直接繼承關(guān)系


<style>

  div > p {
    background-color: blue;
  }

</style>

<body>

      <div>
      
        <p>我是div標(biāo)簽里面的p標(biāo)簽1</p>
        
        <span>
            <p>我是div標(biāo)簽里面的span標(biāo)簽里面的P標(biāo)簽</p>
        </span>

        <div>我是div標(biāo)簽2
            <p>我是p標(biāo)簽2</p>
        </div>

    </div>

</body>

8.相鄰兄弟選擇器

所謂的相鄰兄弟選擇器XX+YY，用+號(hào)來(lái)表示,表示與XX相鄰的YY所使用的CSS樣式。

注意點(diǎn)：如果XX里面包含YY則不會(huì)觸發(fā)，YY無(wú)論是在XX上面還是XX下面都是相鄰


<style>

  div + span {
    border: 10px groove red;
  }

</style>

<body>

    <span>我是div的兄弟span</span>

    <div>我是div</div>

    <span>我是div的兄弟span</span>

    <p>我是span的兄弟p</p>

</body>

9.屬性選擇器

所謂的屬性選擇器，就是在標(biāo)簽中添加屬性，通過(guò)屬性來(lái)定位到該標(biāo)簽設(shè)置CSS的樣式。


<style>

  span[name] {
    font-size: 40px;
  }
  
  span[name][age] {
    color: red;
  }

  span [name="YY"] {
    background-color: yellow;
   }

</style>

<body>

    <span name="xx">我是屬性選擇器的span1</span><br>

    <span name="xx" age="20">我是屬性選擇器span2</span>

    <span name="YY">我是屬性選擇span3</span>

</body>

10.偽類和偽元素

偽類和偽元素就是指在特定的事件觸發(fā)的時(shí)候，調(diào)用的CSS的樣式，用:號(hào)來(lái)表示。

偽類.png

偽元素和偽類一樣：

偽元素.png

<style>

  input:focus {

    outline: none;

    width: 500px;

    height: 300px;
    
   }

</style>

<body>
  <input placeholder="請(qǐng)輸入">
</body>

11.importtant

important的在任何選擇器中使用!important進(jìn)行標(biāo)記，然后強(qiáng)制使用該css樣式。

 <style>
    *{
        color: blue !important;
        font-size: 40px;
    }
    
    div{
        color: red;
        font-size: 20px;
    }
</style>

<body>
    <div>你好,世界</div>
</body>

本來(lái)采用的CSS樣式應(yīng)該是div的css，但是因?yàn)樯厦鎐olor被important修飾了，因此顏色是紅色。

二、CSS選擇器的優(yōu)先級(jí)

==選擇器的針對(duì)性越強(qiáng)，優(yōu)先級(jí)越高==

有關(guān)CSS選擇器的優(yōu)先級(jí)，這里需要知道權(quán)值這個(gè)概念，權(quán)值越高，優(yōu)先級(jí)越高。

選擇器權(quán)值.jpeg

==選擇器的權(quán)值進(jìn)行相加，越大的越優(yōu)先，如果權(quán)值相同，則使用就近原則。==

==優(yōu)先級(jí)排序：
important > 行內(nèi)css > id > 類 | 偽類 | 屬性選擇 | 偽元素 > 通配符 > 繼承==

三、HTML標(biāo)簽的類型

HTML的標(biāo)簽分為3種類型：

  1. 塊級(jí)標(biāo)簽：
    • 獨(dú)占一行；
    • 可以改變寬度和高度；
  2. 行內(nèi)標(biāo)簽
    • 多個(gè)標(biāo)簽?zāi)芡瑫r(shí)顯示在同一行，不能改變寬度和高度；
  3. 行內(nèi)-塊級(jí)標(biāo)簽
    • 多個(gè)標(biāo)簽?zāi)芡瑫r(shí)顯示在同一行；
    • 可以改變寬度和高度

為了滿足開發(fā)需要，提供了一個(gè)屬性來(lái)隨時(shí)更改標(biāo)簽的類型->display,這個(gè)屬性有3個(gè)值：block -> 塊級(jí)標(biāo)簽，inline -> 行內(nèi)標(biāo)簽，inline-block -> 行內(nèi)-塊級(jí)標(biāo)簽，none -> 隱藏標(biāo)簽。

通過(guò)設(shè)置display的值，可以隨時(shí)改變標(biāo)簽類型，滿足開發(fā)的需要。

四、CSS屬性

1.CSS屬性可繼承和不可繼承

CSS的屬性分為可以繼承和不可繼承。繼承就是父類標(biāo)簽的屬性傳遞給子類屬性，通常文字控制類的屬性可以傳遞，區(qū)塊控制的屬性不可傳遞。

  • 可繼承屬性：
<style>
    body{
        color: red;
        font-size: 40px;
    }
</style>

<body>
    <div>我是div標(biāo)簽</div>
    <p>  我是p標(biāo)簽</p>
</body>

設(shè)置body的CSS樣式，div和p都是繼承自body，因此顏色和文字大小都得到了改變。

  • 不可繼承屬性：
<style>

    #main{
        background-color: red;
        width: 500px;
        height: 100px
    }
    
    .inline{
        background-color: green;
        width: 100px;
    }
    
</style>

<body>

    <div id="main">
        <div class="inline">我是內(nèi)部的div標(biāo)簽</div>
    </div>
    
</body>

main里面的屬性因?yàn)閷儆趬K控制的屬性，因此沒(méi)法繼承給下面div標(biāo)簽。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案？ 參考答案 (1)瀏覽器兼容問(wèn)題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,154評(píng)論 1贊 92
  • 1.CSS 元素選擇器 最常見(jiàn)的 CSS 選擇器是元素選擇器。換句話說(shuō)，文檔的元素就是最基本的選擇器。如果設(shè)置 H...
    饑人谷_小侯閱讀 946評(píng)論 0贊 1
  • 其實(shí)平時(shí)用得多的選擇器無(wú)非也就是那么幾個(gè)，時(shí)間久了，許多不常用的選擇器就慢慢忘記了。為了不讓自己忘記這些選擇器，今...
    盛夏晚清風(fēng)閱讀 1,955評(píng)論 0贊 5
  • 一、CSS選擇器 關(guān)于CSS選擇器，首先請(qǐng)看這里：CSS 選擇器參考手冊(cè) 通過(guò)以上，我們可以將CSS選擇器分為以下...
    fehysunny閱讀 2,369評(píng)論 0贊 2
  • 1. class 和 id 的使用場(chǎng)景： id：id選擇器，使用#name定義（name為id名，可任意取名），使...
    石林濤閱讀 439評(píng)論 0贊 1

友情鏈接更多精彩內(nèi)容