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

搜索
博主信息
博文 9
粉絲 0
評論 0
訪問量 5989
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
偽類選擇器與選擇器權重以及盒子模型的實例演示
靠近你深擁你
原創(chuàng)
608人瀏覽過

1. 偽類選擇器

根據(jù)元素的位置或狀態(tài)來匹配子元素

1.1 結構偽類

與上下文選擇器很相似

后文演示所用 HTML 代碼如下：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>偽類展示</title>
  8.     <link rel="stylesheet" href="rest.css" />
  9.     <style>
  10.       /* 此處填充 演示代碼 */
  11.     </style>
  12.   </head>
  13.   <body>
  14.     <ul class="list">
  15.       <li class="item">item1</li>
  16.       <li class="item">item2</li>
  17.       <li class="item">item3</li>
  18.       <li class="item">item4</li>
  19.       <li class="item">item5</li>
  20.       <li class="item">item6</li>
  21.       <li class="item">item7</li>
  22.       <li class="item">item8</li>
  23.       <li class="item">item9</li>
  24.     </ul>
  25.   </body>
  26. </html>
1. :nth-child(an+b):獲取任意位置的元素
  • 參數(shù)說明
    • a: 系數(shù),[0,1,2,3,…]
    • n: 參數(shù), [0,1,2,3,…]
    • b: 偏移量, 從 0 開始

      規(guī)則: 計算出來的索引,必須是有效的(從 1 開始)

例子 1：匹配父元素中的第 n 個子元素，元素類型沒有限制。n 可以是一個數(shù)字，一個關鍵字，或者一個公式。
  • 代碼如下：
  1. .list > .item:nth-child(5) {
  2.   background-color: red;
  3. }

  • 運行效果

    例子 2：獲取前三個元素

  • 代碼如下：

  1. .list > .item:nth-child(-n + 3) {
  2.   background-color: red;
  3. }

  • 運行效果

    例子 3：獲取最后三個元素

  • 代碼如下：

  1. .list > .item:nth-last-child(-n + 3) {
  2.   background-color: red;
  3. }

  • 運行效果

    例子 4：選擇列表的奇數(shù)項,參數(shù)可設為（2n+1）或者（2n-1）

  • 代碼如下：

  1. .list > .item:nth-child(2n + 1) {
  2.   background-color: red;
  3. }
  1. .list > .item:nth-child(2n - 1) {
  2.   background-color: red;
  3. }

可使用參數(shù)（odd）進行選擇，更加方便快捷明了

  1. .list > .item:nth-child(odd) {
  2.   background-color: red;
  3. }
  • 運行效果
例子 5：選擇列表的偶數(shù)項，可用參數(shù)（even）或（2n）
  • 代碼如下：
  1. .list > .item:nth-child(even) {
  2.   background-color: red;
  3. }
  1. .list > .item:nth-child(2n) {
  2.   background-color: red;
  3. }

  • 運行效果

    例子 6：選擇有固定間隔特征的元素，可用偏侈量進行微調(diào),可正可負

  • 代碼如下：

  1. .list > .item:nth-child(3n + 1) {
  2.   background-color: red;
  3. }
  • 運行效果
  1. :first-child:選中父元素下的第一個子元素
  • 代碼如下：
  1. .list > .item:first-child {
  2.   background-color: red;
  3. }
  • 運行效果
  1. :last-child:選中父元素下的最后一個子元素
  • 代碼如下：
  1. .list > .item:last-child {
  2.   background-color: red;
  3. }

  • 運行效果

    1.2 狀態(tài)偽類

  • 演示所用 html 代碼：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>狀態(tài)偽類</title>
  8.     <link rel="stylesheet" href="form.css" />
  9.     <link rel="stylesheet" href="fake-status.css" />
  10.   </head>
  11.   <body>
  12.     <form action="">
  13.       <fieldset class="login">
  14.         <legend class="title">用戶登錄</legend>
  15.         <label for="uname">呢稱:</label>
  16.         <input type="text" name="uname" autofocus required />
  17.         <label for="email">郵箱:</label>
  18.         <input type="email" name="email" required />
  19.         <label for="tel">電話:</label>
  20.         <input type="tel" name="tel" />
  21.         <div class="remember">
  22.           <input type="checkbox" name="remember" id="rem" />
  23.           <label for="rem">記住我</label>
  24.         </div>
  25.         <button class="submit">提交</button>
  26.       </fieldset>
  27.     </form>
  28.   </body>
  29. </html>
  • 代碼中form.css為樣式代碼，fake-status.css為實例操作代碼，樣式代碼如下：
  1. .login {
  2.   display: inline-grid;
  3.   grid: auto-flow / 3em 1fr;
  4.   gap: 10px 0;
  5.   padding: 1em;
  6. }
  7. .login input {
  8.   border: none;
  9.   border-bottom: thin solid #666;
  10. }
  11. .login .title {
  12.   text-align: center;
  13. }
  15. .login .btn,
  16. .login .remember {
  17.   grid-column: 2;
  18.   height: 2.2em;
  19. }
  20. .btn .submit,
  21. .btn .reset {
  22.   width: 40%;
  23.   height: 2.2em;
  24. }

鏈接,表單

  1. :hover: 鼠標懸停
  • 代碼舉例，鼠標懸停在提交按鈕上，改變按鈕顏色，鼠標變?yōu)樾∈中汀?/li>
  1. .login > .submit:hover {
  2.   cursor: pointer;
  3.   background-color: seagreen;
  4.   color: white;
  5. }
  • 運行效果
  1. :enabled: 有效控件
  • 代碼舉例，改變.login下所有有效控件的邊框
  1. .login :enabled {
  2.   border: solid 5px rebeccapurple;
  3. }
  • 運行效果

    -
  1. :disabled: 禁用控件
  • 代碼舉例，改變.login下禁用控件的樣式。
  1. .login :disabled {
  2.   background-color: aqua;
  3.   color: cadetblue;
  4.   border-color: antiquewhite;
  5. }
  • 運行效果
  1. :checked: 選中控件
  • 代碼舉例，復選框選中時將標簽的文本描紅
  1. .login :checked + label {
  2.   color: red;
  3. }
  • 運行效果
  1. :required: 必選控件
  • 代碼舉例，改變表單中，所有具有必填屬性元素的背景顏色。
  1. .login :required {
  2.   background-color: yellow;
  3. }

-運行效果

  1. :focus: 焦點控件
  • 代碼舉例，輸入框獲取焦點后，邊框變?yōu)榧t色。
  1. .login :focus {
  2.   outline: 1px solid red;
  3.   border-bottom: none;
  4. }
  • 運行效果
  1. :not(): 過濾掉某些元素
  • 代碼舉例，改變.login下非input元素的背景顏色。
  1. .login :not(input) {
  2.   background-color: red;
  3. }
  • 運行效果
  1. :empty: 選擇頁面中為空的元素
  • 代碼舉例，將表單中，沒有內(nèi)容的元素，用紅色標出。
  1. .login :empty {
  2.   background-color: red;
  3. }
  • 運行效果

關于更多偽類知識請查詢 MDN

2. 選擇器優(yōu)先級權重

優(yōu)先級就是分配給指定的 CSS 聲明的一個權重，它由 匹配的選擇器中的 每一種選擇器類型的 數(shù)值 決定。
而當優(yōu)先級與多個 CSS 聲明中任意一個聲明的優(yōu)先級相等的時候，CSS 中最后的那個聲明將會被應用到元素上。
當同一個元素有多個聲明的時候，優(yōu)先級才會有意義。因為每一個直接作用于元素的 CSS 規(guī)則總是會接管/覆蓋（take over）該元素從祖先元素繼承而來的規(guī)則。

  1. 原子選擇器: tag,class,id
  2. 原子選擇器權重: tag(1),class(10),id(100)

可簡單理解為: 標簽是個位, class 是十位, id 是百位

  • 權重示例：
  1. <div class="demo" id="test">
  2.   <span class="text" id="title">愛你直到永遠！</span>
  3. </div>
  1. /* 權重100 */
  2. #title {
  3.   color: green;
  4. }
  6. /* 權重010無法覆蓋綠色值 */
  7. .text {
  8.   color: red;
  9. }
  11. /* 權重110，可以覆蓋綠色值！ */
  12. #title.text {
  13.   color: yellow;
  14. }
  16. /* 權重020無法覆蓋綠色值 */
  17. .demo > .text {
  18.   color: aqua;
  19. }
  21. /* 權重224，為span元素的頂級權重 */
  22. html > body > div#test.demo > span#title.text {
  23.   color: brown;
  24. }

3. 盒模型

3.1 一切皆”盒子”

  1. 盒子是頁面中可見的”矩形區(qū)域”
  2. 一個網(wǎng)站由多個盒子布局構成。

3.2 五大屬性

  1. width: 寬
  2. height: 高
  3. padding: 內(nèi)邊距
  4. border: 邊框
  5. margin: 外邊距

  • border

  1. 可見屬性
  2. 可設置width,style,color
  • 舉例代碼
  1. <div class="test">
  2.   <span>demo</span>
  3. </div>
  1. .test {
  2.   width: 180px;
  3.   height: 100px;
  4.   /* 為每條邊框設置不同的顏色 */
  5.   border-top-width: 2px;
  6.   border-top-style: solid;
  7.   border-top-color: red;
  8.   border-top: 2px solid red;
  9.   border-right: 2px solid blue;
  10.   border-bottom: 2px solid green;
  11.   border-left: 2px solid violet;
  13.   /* 四條邊框相同，可簡寫 */
  14.   /* border: 2px solid red; */
  15. }
  • 運行效果

  • padding,margin

  1. 不可見屬性
  2. 僅可設置: width
  3. 大多數(shù)內(nèi)置元素都有默認padding/margin
  4. 建議全部重置為 0,以方便自定義布局
  • 若為元素設置四個值的外邊距，應當遵循 上、右、下、左，順時針順序原則。例如：
  1. .test {
  2.   width: 180px;
  3.   height: 100px;
  4.   /* 為每條邊框設置不同的顏色 */
  5.   border-top-width: 2px;
  6.   border-top-style: solid;
  7.   border-top-color: red;
  8.   border-top: 2px solid red;
  9.   border-right: 2px solid blue;
  10.   border-bottom: 2px solid green;
  11.   border-left: 2px solid violet;
  13.   /* 四條邊框相同，可簡寫 */
  14.   /* border: 2px solid red; */
  15.   margin: 5px 10px 15px 20px;
  16. }
  • 邊距查看

  • 兩個值的邊距設置，第一個為上下，第二個為左右。例如：margin: 5px 10px;

  • 邊距查看

  • 三個值，順序為 第一個值為上，第二個值為左右，第三個值為下。例如：margin: 5px 10px 30px;
  • 邊距查看

    內(nèi)邊距設置同樣如此，在二值和三值的情況下，左右永遠在第二個位置。

  • width,height

  1. 默認不包含 padding,border
  1. .test {
  2.   width: 180px;
  3.   height: 100px;
  4. }
  • 邊距查看

  • box-sizing

  1. box-sizing: 設置盒模型計算邊界
    • content-box: 默認值,僅包括內(nèi)容區(qū)
    • 測試：
      1. .test {
      2. width: 180px;
      3. height: 100px;
      4. margin: 5px;
      5. padding: 5px;
      6. border: solid 2px red;
      7. }
    • 結論

      此模式下，盒子大小改變，寬高超出范圍不利于計算。

    • border-box: 推薦值,寬高擴展到可視邊框
    • 測試：
      1. .test {
      2. width: 180px;
      3. height: 100px;
      4. margin: 5px;
      5. padding: 5px;
      6. border: solid 2px red;
      7. box-sizing: border-box;
      8. }
    • 結論

      此模式下，邊距往內(nèi)擴展，盒子大小不變。

  • 通用初始化代碼

  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4.   box-sizing: border-box;
  5. }
批改老師：PHPzPHPz

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

老師批語：
本博文版權歸博主所有，轉(zhuǎn)載請注明地址！如有侵權、違法，請聯(lián)系admin@php.cn舉報處理！
全部評論 文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務協(xié)議
0條評論
作者最新博文
關于我們 免責申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓，幫助PHP學習者快速成長！
關注服務號 技術交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時隨地碎片化學習
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學習！
    全站2000+教程免費學