任務(wù)8－CSS選擇器

1.CSS選擇器常見(jiàn)的有幾種?

id選擇器：
<head>
    <meta charset="UTF-8">
    <title>task-8</title>
    <style media="screen">
        #header {
            /*ID選擇器前面用＃號(hào)表示*/
            border: 1px solid red;
            width: 140px;
        }
    </style>
</head>

<body>
    <div id="header">
        <!--我有id屬性哦。-->
        我的id是header。

    </div>
</body>
類選擇器：
<head>
    <meta charset="UTF-8">
    <title>task-8</title>
    <style media="screen">
        .nav {
            /*類選擇器前面用.表示*/
            border: 1px solid blue;
            border-radius: 3px;
            width: 120px;
            margin-top: 30px;
            color: pink;
            background-color: #eee;
        }
    </style>
</head>

<body>
    <div class="nav">
        <!--我有class屬性-->
        我的class是nav


    </div>
</body>
屬性選擇器：
<head>
    <meta charset="UTF-8">
    <title>task-8</title>
    <style media="screen">
        input[type="submit"] {   /*屬性選擇器記得[type=""]*/
            font-size: 18px;
            color: pink;
        }
    </style>
</head>

<body>
    <form class="login" action="#" method="post"> <!--認(rèn)真看我的type屬性-->
        <input type="text" name="name" value="" placeholder="請(qǐng)輸入用戶名" maxlength="10">
        <br>
        <input type="password" name="psd" value="">
        <br>
        <input type="submit" name="login" value="登入">

    </form>


    </div>
</body>
分組選擇器：
  <style media="screen">
        .A,
        .D {
            /*類選擇器的分組，兩個(gè)類選擇器之間要用逗號(hào)隔開(kāi)。*/
            color: red;
        }
        
        .B,
        .C {
            color: blue;
        }
    </style>
<body>
    <div class="A">
        我是A組的同學(xué)，我想變成紅色
        <p class="B">
            我是B組的同學(xué)，我想變成藍(lán)色。
        </p>

    </div>
    <div class="C">
        我是C組的同學(xué)，我也想變成藍(lán)色。
        <p class="D">
            我是D組的同學(xué)，我也想變成紅色。
        </p>

    </div>
    </div>
</body>
派生選擇器：
<head>
    <meta charset="UTF-8">
    <title>task-8</title>
    <style media="screen">
        .A,
        .D {
            /*類選擇器的分組，兩個(gè)類選擇器之間要用逗號(hào)隔開(kāi)。*/
            color: red;
        }

        .B,
        .C {
            color: blue;
        }
        .A h3{ /*派生選擇器，類選擇器后要有一個(gè)空格，緊跟著是class="A"的所有子元素H3。*/
          border: 1px solid pink;
          border-radius: 3px;
          width: 60px;
        }
    </style>
</head>

<body>
    <div class="A">
        我是A組的同學(xué)，我想變成紅色
        <h3>理科班</h3>  <!--.A h3定位的是這里-->
                    <!--當(dāng)然如果這個(gè)div下還有h3都會(huì)生效-->
        <p class="B">
            我是B組的同學(xué)，我想變成藍(lán)色。
        </p>
  </p>
    </div>
    <div class="C">
      <h3>文科班</h3>    <!--雖然你也是h3但是你的祖先元素不是A.所以不會(huì)生效。-->
        我是C組的同學(xué)，我也想變成藍(lán)色。
        <p class="D">
            我是D組的同學(xué)，我也想變成紅色。
        </p>

    </div>
    </div>
</body>
標(biāo)簽選擇器：
<head>
    <meta charset="UTF-8">
    <title>task-8</title>
    <style>
    p {  /*標(biāo)簽選擇器，所有p標(biāo)簽都會(huì)被選中，不管它的父元素是誰(shuí)，或者在哪里。*/
      border: 1px solid red;
      border-radius: 3px;
      color: pink;
      width: 110px;
    }
    </style>
</head>

<body>

 <div class="first">
   我是div.
   <p class="p1"> 
     我是段落p。
   </p>

 </div>
 <p class="p2">
   我也是段落p。
 </p>

</body>
通配選擇器：（因要匹配網(wǎng)頁(yè)所有元素，會(huì)影響渲染時(shí)間，網(wǎng)頁(yè)復(fù)雜的情況慎用。）
    <style>
    * {  /*通配選擇器,匹配所有元素。*/
      border: 1px solid red;
      border-radius: 3px;
      color: pink;
      width: 110px;
    }
    </style>
</head>

<body>

 <div class="first">
   我是div.
   <p class="p1">
     我是段落p。
   </p>

 </div>
 <p class="p2">
   我也是段落p。
 </p>

</body>
偽類選擇器：:active、:hover、:link等
<head>
    <meta charset="UTF-8">
    <title>task-8</title>
    <style>
  .button a{
    border: 1px solid;
    border-radius: 3px;
    display: block;
margin: 100px;
text-decoration: none;
    width: 60px;
    text-align: center;
  }
    .button a:hover{ /*偽類選擇器，格式別錯(cuò)了，就是 :屬性*/
      color: pink;
      transition: 0.5s; 
    }
    </style>
</head>

<body>
<div class="button">
  <a href="#">刷新</a>

</div>
</body>
組合選擇器和一些css3的偽類選擇器：

Paste_Image.png

Paste_Image.png

圖片來(lái)至饑人谷-婷樓沐熙 .

2.選擇器的優(yōu)先級(jí)是怎樣的?

1 . !important 優(yōu)先級(jí)最高!
2 . selector 越精確，則優(yōu)先級(jí)越高.
3 .下面的比上面的優(yōu)先級(jí)高。（渲染方式下面的樣式會(huì)覆蓋上面的樣式，在權(quán)重一樣的時(shí)候。）
具體如下：

Paste_Image.png

3.class 和 id 的使用場(chǎng)景?

這不是上一任務(wù)的題目嗎？哈哈哈。

ID具有唯一性，Class具有普遍性。
ID是唯一的，所以盡量在結(jié)構(gòu)外圍使用，通常用于頁(yè)面布局。
Class是可重復(fù)的，所以盡量在結(jié)構(gòu)內(nèi)部使用，通常用于樣式定義。
ID的樣式優(yōu)先級(jí)高于Class。

以下代碼在JS BIN
意境是否正確請(qǐng)老師指正。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <title>task-8</title>
    <style media="screen">
        #header,
        #content,
        #footer {
            margin: 100px;
            padding: 50px;
            border: 1px solid #ccc;
        }
        
        .nav {
            border: 2px solid pink;
            border-radius: 3px;
            background-color: #eee;
        }
        
        .nav> ul li {
            list-style-type: none;
            display: inline-block;
            transition: 0.3s;
        }
        
        .nav> ul li:hover {
            cursor: pointer;
            color: pink;
        }
        
        .content {
            border: 1px solid blue;
        }
        
        .content p {
            font-size: 70px;
        }
        
        .footer {
            border: 1px solid red;
        }
        
        .footer p {
            font-size: 50px;
        }
    </style>

</head>

<body>
    <div id="header">
        <div class="nav">
            <ul>
                <li>視頻</li>
                <li>導(dǎo)師</li>
                <li>課件</li>
                <li>社區(qū)</li>
            </ul>

        </div>
        <p>
            我是Nav。
        </p>

    </div>
    <div id="content">
        <div class="content">

            <p>
                我是內(nèi)容?。。?！
            </p>
        </div>

    </div>

    <div id="footer">
        <div class="footer">
            <p>
                我是頁(yè)腳！！
            </p>
        </div>

    </div>

</body>

</html>

4.使用CSS選擇器時(shí)為什么要?jiǎng)澏ㄟm當(dāng)?shù)拿臻g？

  • 便于開(kāi)發(fā)時(shí)對(duì)樣式布局。
  • 便于語(yǔ)義化和后期維護(hù)以及團(tuán)隊(duì)協(xié)作。

5.以下選擇器分別是什么意思?

#header{}    /*id選擇器，對(duì)應(yīng)id="header"的元素*/
.header{}    /*類選擇器，對(duì)應(yīng)所有class="header"的元素*/
.header .logo{}  /*派生選擇器（后代選擇器），對(duì)應(yīng)class="header"下所有class="logo"的元素*/
.header.mobile{}  /*類選擇器，對(duì)應(yīng)class="header mobile"的元素*/
.header p, .header h3{}  /*組合選擇器，對(duì)應(yīng)class="header"下的所有p標(biāo)簽，注意:祖先元素是class="header"*/
#header .nav>li{}  /*組合選擇器，對(duì)應(yīng)id="header"下的所有class="nav"且直接子元素為li標(biāo)簽的元素。*/
#header a:hover{}  /*組合選擇器，對(duì)應(yīng)id="header"下的所有a標(biāo)簽，hover狀態(tài)下。*/

6.列出你知道的偽類選擇器:

偽類選擇器 描述 support
active 向被激活的元素添加樣式。 css1
:hover 當(dāng)鼠標(biāo)懸浮在元素上方時(shí)，向元素添加樣式。 css1
:link 向未被訪問(wèn)的鏈接添加樣式。 css1
:focus 向擁有鍵盤(pán)輸入焦點(diǎn)的元素添加樣式。 css2
:visited 向已被訪問(wèn)的鏈接添加樣式。 css1
:first-child 向元素的第一個(gè)子元素添加樣式。 css2
:nth-child(n) 選擇器匹配屬于其父元素的第 N 個(gè)子元素，不論元素的類型。 css3

7.:first-child和:first-of-type的作用和區(qū)別?

如下代碼：

<head>
    <meta charset="UTF-8">
    <title>task-8</title>
    <style media="screen">
        .A p:first-child {   /*class="A"下第一個(gè)子元素為p則生效。*/
            color: red;
        }

        div h3:first-of-type {  /*父元素為div的第一個(gè)h3*/
            color: blue;
        }
    </style>
</head>

<body>
    <div class="A">
        <p>
            我是A組的同學(xué)，我想變成紅色。
        </p>
        <h3>理科班</h3>
        <h3>搗蛋鬼</h3>

        <p class="B">
            我是B組的同學(xué)，我想變成藍(lán)色。
        </p>
        </p>
        <h3>搗蛋鬼</h3>
    </div>
    <div class="C">
        <h3>文科班</h3>
        <p>
            我是C組的同學(xué)，我也想變成藍(lán)色。
        </p>
        <h3>搗蛋鬼</h3>
        <p class="D">
            我是D組的同學(xué)，我也想變成紅色。
        </p>

    </div>
    </div>
</body>
Paste_Image.png

8.運(yùn)行如下代碼，解析下輸出樣式的原因。

<style>
.item1:first-child{ color: red;}
.item1:first-of-type{ background: blue;}
</style> 
<div class="ct"> 
<p class="item1">aa</p>  <!--red--> <!--background-color:blue;-->
 <h3 class="item1">bb</h3>   <!--background-color:blue;-->
<h3 class="item1">ccc</h3>
 </div>
  • <P>aa</p>是.item1的第一個(gè)子元素。所以p為red。
  • 所有.item1中的第一個(gè)子元素，p沒(méi)有兄弟，它是第一個(gè)，h3有兩個(gè)，這里選擇的是哥哥<h3>bb</h3>。

9.text-align: center的作用是什么，作用在什么元素上？能讓什么元素水平居中?

  • text-align: center ：文本水平居中。
  • 作用在塊元素上。
  • 讓塊元素中的內(nèi)聯(lián)元素水平居中。

10.如果遇到一個(gè)屬性想知道兼容性，在哪查看?

重要的問(wèn)題都要回答三遍。
caniuse

最后編輯于 ：
?著作權(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)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

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

  • 1 . 常見(jiàn)的CSS選擇器 基礎(chǔ)選擇器：通用元素選擇器，匹配頁(yè)面所有元素。#idid選擇器，匹配特定id的元素。....
    osborne閱讀 405評(píng)論 0贊 0
  • 2016/05/15 問(wèn)答CSS選擇器常見(jiàn)的有幾種? 1.id選擇器選擇設(shè)置id的元素，如 #header{}2....
    嘿菠蘿閱讀 354評(píng)論 0贊 0
  • 一、CSS選擇器常見(jiàn)的有幾種? 1.元素選擇器 h1{color:red;},p{color:blue;};2.分...
    咩咩咩1024閱讀 503評(píng)論 0贊 0
  • 課程目標(biāo) 掌握常見(jiàn) CSS 選擇器的用法 對(duì)選擇器優(yōu)先級(jí)有一定認(rèn)識(shí) 學(xué)習(xí)建議 從學(xué) CSS 開(kāi)始，課程視頻里的代碼...
    饑人谷_江君閱讀 445評(píng)論 0贊 0
  • 呂梁山上有個(gè)寧鄉(xiāng)城，城中有個(gè)真武巷，巷子深處有個(gè)大院就是我的家，從這個(gè)院里走出來(lái)的人，個(gè)個(gè)有知識(shí)有文化，鄰居們羨慕...
    寂靜的草閱讀 551評(píng)論 2贊 1

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