亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

偽類

CSS 偽類是添加到選擇器的關(guān)鍵字，根據(jù)元素的位置和狀態(tài)來(lái)選擇匹配的子元素。

• 1，結(jié)構(gòu)偽類，與關(guān)系選擇器類似但不一樣。用來(lái)選擇一組兄弟元素中的特定元素，查詢?nèi)肟诳梢允歉讣?jí)元素，也可以是其中一個(gè)兄弟元素。

  HTML 示例代碼結(jié)構(gòu)：

  <ul class="list">
      <li class="item">item1</li>
      <li class="item">item2</li>
      <li class="item">item3</li>
      <li class="item">item4</li>
      <li class="item">item5</li>
      <li class="item">item6</li>
      <li class="item">item7</li>
      <li class="item">item8</li>
      <li class="item">item9</li>
  </ul>

  • :first-child，第一個(gè)元素

    /* 查詢?nèi)肟跒楦冈?*/
    .list>.item:first-child{ background: pink; }
    /* item1 被選中 */

  • :last-child，最后一個(gè)元素

    /* 查詢?nèi)肟跒樾值茉?*/
    .item:last-child{ background: pink; }
    /* item9 被選中 */

  • :nth-child(an+b)

    首先找到所有當(dāng)前元素的兄弟元素，然后按照位置先后順序從 1 開(kāi)始排序，選擇的結(jié)果（an+b）匹配到的對(duì)應(yīng)序號(hào)的元素集合。

    注意：n=0，1，2，3…，a 和 b 都必須為整數(shù)，an 必須寫在 b 前面。

    .list>.item:nth-child(0n+3){ background: pink; }
    /* item3 被選中 */
    /* 可以簡(jiǎn)寫為：nth-child(3) */
    .list>.item:nth-child(n)    /* (1n+0)，全選中 */
    .list>.item:nth-child(n+3)    /* (1n+0)，item3（含）以后全選中 */
    .list>.item:nth-child(-n+3)    /*  (-1n+3)，前三個(gè)被選中 */
    .list>.item:nth-child(2n)    /* (2n+0)，偶數(shù)項(xiàng) */
    .list>.item:nth-child(even)    /* (even)=(2n+0)，偶數(shù)項(xiàng)*/
    .list>.item:nth-child(2n+1)    /* (2n+1)，奇數(shù)項(xiàng) */
    .list>.item:nth-child(odd)    /* (odd)=(2n+1)，奇數(shù)項(xiàng)*/
    .list>.item:nth-child(3n)    /* (3n+0)，第3、6、9...項(xiàng)*/
    .list>.item:nth-child(3n+1)    /* (3n+1)，第1、4、7...項(xiàng)*/

  • :nth-last-child(an+b)

    用法和 :nth-child(an+b) 相似，只是元素排序是從后向前排（最后一個(gè)序號(hào)為1）

    .list>.item:nth-last-child(-n+3){ background: pink; }
    /* 最后三個(gè)被選中 */

• 2，狀態(tài)偽類（用戶行為偽類），這些偽類需要用戶進(jìn)行一些交互才能夠應(yīng)用，例如將鼠標(biāo)指針懸停在元素上。

  HTML 示例代碼結(jié)構(gòu)：

  <form action="#">
      <fieldset class="login">
          <legend>用戶登錄</legend>
          <label for="userName">
              用戶名：
              <input type="text" name="userName" id="userName" required>
          </label><br />
          <label for="password">
              密碼：
              <input type="password" name="password" id="password" required>
          </label><br />
          <label for="email">
              郵箱：
              <input type="email" name="email" id="email">
          </label><br />
          <label for="rem">
              <input type="checkbox" name="rem" id="rem">
              記住我
          </label><br />
          <button type="submit">點(diǎn)擊登錄</button>
      </fieldset>
  </form>

  初始頁(yè)面顯示：
  

  • :focus 表示獲得焦點(diǎn)的元素（如表單輸入）。當(dāng)用戶點(diǎn)擊或觸摸元素或通過(guò)鍵盤的“tab”鍵選擇它時(shí)會(huì)被觸發(fā)。

    .login :focus{
        outline: 2px solid red;
    }
    /* 獲取焦點(diǎn)的元素加上紅色邊框 */

    頁(yè)面顯示效果：
    

  • :required 表示任意設(shè)置了required屬性的<input>，<select>, 或 <textarea>元素。這個(gè)偽類對(duì)于高亮顯示在提交表單之前必須具有有效數(shù)據(jù)的字段非常有用。

    .login :required{
        background-color: lightyellow;
    }
    /* 設(shè)置了必填（required）的元素高亮顯示 */

    頁(yè)面顯示效果：
    

  • checked 表示任意被勾選/選中的 radio(單選按鈕)，checkbox(復(fù)選框)，或者 option(select 中的一項(xiàng))。

    .login input[type="checkbox"]:checked + label{
        color: red;
    }
    /* 復(fù)選框選中時(shí)，其后的<label>元素的文字為紅色 */

    頁(yè)面顯示效果：
    

  • :hover 在光標(biāo)（鼠標(biāo)指針）懸停在元素上時(shí)提供關(guān)聯(lián)的樣式。

    .login>button:hover{
        background-color: blue;
        color: white;
    }
    /* 鼠標(biāo)懸停在提交按鈕上時(shí)，按鈕變成藍(lán)底白字 */

    頁(yè)面顯示效果：
    

  更多狀態(tài)偽類查詢：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes。

選擇器權(quán)重（CSS 特異性）

如果有兩條或兩條以上指向同一元素的沖突 CSS 樣式聲明，則瀏覽器將根據(jù)權(quán)重（優(yōu)先級(jí)）來(lái)確定使用哪一條聲明。

以下定義了四種選擇器的特異性級(jí)別：

• 行內(nèi)樣式 - 行內(nèi)（內(nèi)聯(lián)）樣式直接附加到要設(shè)置樣式的元素。實(shí)例：<h1 style="color: #fff;">。

• ID - ID 是頁(yè)面元素的唯一標(biāo)識(shí)符，例如 #navbar。

• 類、屬性和偽類 - 此類別包括 .classes、[attributes] 和偽類，例如：:hover、:focus 等。

• 元素和偽元素 - 此類別包括元素名稱和偽元素，比如 h1、div、:before 和 :after。

特異性計(jì)算方法：

• 行內(nèi)樣式（style 屬性）為1000
• 每個(gè) ID 添加 100
• 每個(gè)屬性、類或偽類添加 10
• 每個(gè)元素名稱或偽元素添加 1

示例：

A: h1{ color="red"; }
B: #content h1{ color="blue"; }
C: <div id="content"><h1 style="color: green">Heading</h1></div>

其中：

• A 的特異性為 1（一個(gè)元素）
• B 的特異性為 101（一個(gè) ID 引用以及一個(gè)元素）
• C 的特異性為 1000（行內(nèi)樣式）

由于 1 < 101 < 1000，因此第三條規(guī)則（C）具有更高的特異性，所以將被應(yīng)用。

注意：

• 可以通過(guò)增加選擇器數(shù)量來(lái)增加特異性，例如：div>article>h1{} 的特異性大于 article>h1{}。

• 可以通過(guò)重復(fù) ID 或 類選擇器來(lái)增加特異性，例如：#login#login{} 大于 #login{}，.user.user{} 大于 .user{}。

• 數(shù)量再多的元素名稱或偽元素（例如：11個(gè)），其特異性也不會(huì)超過(guò)一個(gè)屬性、類或偽類。同樣，數(shù)量再多的屬性、類或偽類不會(huì)超過(guò)一個(gè) ID，數(shù)量再多的 ID 不會(huì)超過(guò)行內(nèi)樣式。

• 通配選擇符*，關(guān)系選擇符+ > ` ~`，對(duì)特異性沒(méi)有影響。

• 在特異性相同的情況下，前面寫的樣式會(huì)被后面寫的樣式覆蓋。

• !important例外：當(dāng)在一個(gè)樣式聲明中使用一個(gè) !important 規(guī)則時(shí)，此聲明將覆蓋任何其他聲明。應(yīng)盡量避免使用!important規(guī)則，優(yōu)先考慮樣式權(quán)重來(lái)解決問(wèn)題。

• :is() 和 :not() 本身不會(huì)參與特異性計(jì)算，但它們括號(hào)內(nèi)部的選擇器會(huì)參與特異性計(jì)算。

盒子模型

（1）基本概念

當(dāng)對(duì)一個(gè)文檔進(jìn)行布局（lay out）的時(shí)候，瀏覽器的渲染引擎會(huì)根據(jù)標(biāo)準(zhǔn)之一的 CSS 基礎(chǔ)框盒模型（CSS basic box model），將所有元素表示為一個(gè)個(gè)矩形的盒子（box）。CSS 決定這些盒子的大小、位置以及屬性（例如顏色、背景、邊框尺寸…）。

每個(gè)盒子由四個(gè)部分（或稱區(qū)域）組成。如下面示例：

其中：

• element（元素），即content（內(nèi)容）：為元素的真是內(nèi)容，包括文本、圖像、視頻等。
• padding（內(nèi)邊距），清除內(nèi)容周圍的區(qū)域。內(nèi)邊距是透明的。
• border（邊框），圍繞內(nèi)邊距和內(nèi)容的邊框。
• margin（外邊距），清除邊界外的區(qū)域。外邊距是透明的。
• width（寬度），圖示指的是content（內(nèi)容）的寬度，此時(shí)也叫 content-box 寬度
• height（高度），圖示指的是content（內(nèi)容）的高度，此時(shí)也叫 content-box 高度

（2）box-sizing 屬性

box-sizing 屬性決定盒子大小的計(jì)算方式：

• box-sizing=”content-box”
  默認(rèn)值，此時(shí) width、weight 指內(nèi)容的寬度、高度。盒子的總寬度 = width + padding + border + margin，盒子的總高度 = height+ padding + border + margin
• box-sizing=”padding-box”
  此時(shí) width、weight 包含內(nèi)容和 padding。盒子的總寬度 = width + border + margin，盒子的總高度 = height + border + margin
• box-sizing=”padding-box”
  此時(shí) width、weight 包含內(nèi)容和 padding、border。盒子的總寬度 = width + margin，盒子的總高度 = height + margin

批改老師：PHPz

批改狀態(tài)：合格

老師批語(yǔ)：總結(jié)的很詳細(xì)，繼續(xù)加油