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

搜索
博主信息
博文 8
粉絲 1
評(píng)論 0
訪問(wèn)量 14132
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
css中的簡(jiǎn)單選擇器、上下文選擇器和偽類選擇器的介紹和案例
雷斯提亞
原創(chuàng)
1441人瀏覽過(guò)

css 選擇器（分三大類）：

1. 簡(jiǎn)單選擇器（共6種）

序號(hào) 選擇器 描述
1 元素選擇器 根據(jù)元素標(biāo)簽名稱來(lái)進(jìn)行操作
2 群組選擇器 可以同時(shí)選擇不同類型的元素進(jìn)行操作
3 通配符選擇器（通配選擇器） 選擇全部元素，不區(qū)分類型
4 屬性選擇器 根據(jù)元素屬性進(jìn)行操作
5 類選擇器 根據(jù)元素class屬性進(jìn)行操作
6 id選擇器 根據(jù)元素id屬性進(jìn)行操作
例：
元素選擇器：
  1. <head>
  2.  <style>
  3.         div {
  4.             background-color: aquamarine;
  5.             font-size: 30px;
  6.         }
  7.     </style>
  8.     </head>
  9.     <body>
  10.     <div>php中文網(wǎng)</div>
  11.     <p>php中文網(wǎng)</p>
  12.     <h1>php中文網(wǎng)</h1>
  13.     <div>php中文網(wǎng)</div>
  14.     <div>php中文網(wǎng)</div>
  15. </body>

群組選擇器：
  1.     <style>
  2.       div,p,h1{
  3.           font-size: 10px;
  4.           background-color: lightblue;
  5.       }
  6.     </style>

通配選擇器：
  1.     <style>
  2.      *{
  3.          border: 1px solid lightpink;
  4.      }
  5.     </style>

屬性選擇器：
  1. <div style="font-size: 25px; color: lightseagreen;">php中文網(wǎng)</div>

類選擇器：
  1. <head>
  2.  <style>
  3.      .study{
  4.          border: 1px solid lightpink;
  5.          color: lightseagreen;
  6.          background-color: lightgreen;
  7.      }
  8.     </style>
  9. </head>
  10. <body>
  11.     <div class="study">php中文網(wǎng)</div>
  12.     </body>

id選擇器：
  1. <head>
  2.     <style>
  3.    #study{
  4.          border: 1px solid lightpink;
  5.          color: yellow;
  6.          background-color: red;
  7.      }
  8.     </style>
  9. </head>
  10. <body>
  11.     <div id="study">php中文網(wǎng)</div>
  12.     <p>php中文網(wǎng)</p>
  13.     <h1>php中文網(wǎng)</h1>
  14.     <div>php中文網(wǎng)</div>
  15.     <div>php中文網(wǎng)</div>
  17. </body>

2. 上下文選擇器

  • （1）html文檔是有層級(jí)結(jié)構(gòu)的
  • （2）每個(gè)元素，在文檔中，都有自己的位置，即上下文關(guān)系
  • （3）完全可以根據(jù)元素的上下文關(guān)系，來(lái)獲取到他們
    2.1 一個(gè)元素的四種角色（共有四種角色）：
序號(hào) 角色 描述
1 祖先元素 擁有子元素，孫元素等所有層次的后代元素
2 父級(jí)元素 僅擁有子元素層級(jí)的元素
3 后代元素 與其他層級(jí)元素一起擁有共同祖先元素
4 子元素 與其他同級(jí)元素一起共有父級(jí)元素
2.2 上下文選擇器的種類（共4種）
序號(hào) 選擇器 操作符 描述 例子
1 后代選擇器 空格 選擇當(dāng)前元素的所有后代元素 div p, body *
2 父子選擇器 > 選擇當(dāng)前元素的所有子元素 div > h2
3 同級(jí)相鄰選擇器 + 選擇擁有共同父級(jí)且相鄰的元素 li.red + li
4 同級(jí)所有選擇器 ~ 選擇擁有共同父級(jí)的后續(xù)所有元素 li.red ~ li
例：

后代選擇器：

  1. <head>
  2.     <style>
  3.        div p{
  4.            border: 5px solid lightblue;
  5.            color: red;
  6.            background-color: lightpink;
  7.        }
  8.     </style>
  9. </head>
  10. <body>
  11.     <div>
  12.         <p>php中文網(wǎng)</p>
  13.     </div>
  14. </body>

父子選擇器：

  1.     <style>
  2.        div > p{
  3.            border: 5px solid lightblue;
  4.            color: red;
  5.            background-color: lightpink;
  6.        }
  7.     </style>

同級(jí)相鄰選擇器：

  1. <head>
  2.  <style>
  3.         .center.asina + .center {
  4.             background-color: lime;
  5.             color: maroon;
  6.             border: 2px solid yellow;
  7.         }
  8.     </style>
  9. </head>
  10. <body>
  11.     <div>
  12.         <p class="center">php中文網(wǎng)</p>
  13.         <p class="center">php中文網(wǎng)</p>
  14.         <p class="center asina">php中文網(wǎng)</p>
  15.         <p class="center">php中文網(wǎng)</p>
  16.         <p class="center">php中文網(wǎng)</p>
  17.         <p class="center">php中文網(wǎng)</p>
  19.     </div>
  20. </body>

同級(jí)所有選擇器：

  1. <head>
  2.  <style>
  3.         .center.asina + .center {
  4.             background-color: lime;
  5.             color: maroon;
  6.             border: 2px solid yellow;
  7.         }
  8.     </style>
  9. </head>
  10. <body>
  11.     <div>
  12.         <p class="center">php中文網(wǎng)</p>
  13.         <p class="center">php中文網(wǎng)</p>
  14.         <p class="center asina">php中文網(wǎng)</p>
  15.         <p class="center">php中文網(wǎng)</p>
  16.         <p class="center">php中文網(wǎng)</p>
  17.         <p class="center">php中文網(wǎng)</p>
  19.     </div>
  20. </body>

偽類選擇器（重點(diǎn)）

3.1 結(jié)構(gòu)偽類：
# 3.1.1 不分組匹配
序號(hào) 選擇器 描述 舉例
1 :first-child 匹配第一個(gè)子元素 div :first-child
2 :last-child 匹配最后一個(gè)子元素 div :last-child
3 :only-child 選擇元素的唯一子元素 div :only-child
4 :nth-child(n) 匹配任意位置的子元素 div :nth-child(n)
5 :nth-last-child(n) 匹配倒數(shù)任意位置的子元素 div :nth-last-child(n)

例：

  1.     <style>
  2.          .review > :first-child {
  3.         background-color: wheat;
  4.       }
  5.     </style>

  1.  <style>
  2.          .review > :last-child {
  3.         background-color: wheat;
  4.       }
  5.     </style>

  1. <style>
  2.  .review > :nth-child(-n + 3) {
  3.         background-color: lightgreen;
  4.       }
  5.       </style>

3.1.2 分組匹配
序號(hào) 選擇器 描述 舉例
1 :first-of-type 匹配按類型分組后的第一個(gè)子元素 div :first-of-type
2 :last-of-type 匹配按類型分組后的最后一個(gè)子元素 div :last-of-type
3 :only-of-type 匹配按類型分組后的唯一子元素 div :only-of-type
4 :nth-of-type() 匹配按類型分組后的任意位置的子元素 div :nth-of-type(n)
5 :nth-last-of-type() 匹配按類型分組后倒數(shù)任意位置的子元素 div :nth-last-of-type(n)

例：

  1. <head>
  2.     <style>
  3.  .review span:first-of-type {
  4.         background-color: violet;
  5.       }
  6.     </style>
  7. </head>
  8. <body>
  9.     <div class="review">
  10.         <p class="center">php中文網(wǎng)</p>
  11.         <p class="center">php中文網(wǎng)</p>
  12.         <p class="center asina">php中文網(wǎng)</p>
  13.         <span class="center">php中文網(wǎng)</span>
  14.         <span class="center">php中文網(wǎng)</span>
  15.         <span class="center">php中文網(wǎng)</span>
  17.     </div>
  18. </body>

  1.    <style>
  2.  .review span:last-of-type {
  3.         background-color: violet;
  4.       }
  5.     </style>

  1.     <style>
  2.  .review span:nth-of-type(-n + 3) {
  3.         background-color: violet;
  4.       }
  5.     </style>

  1.     <style>
  2.  .review span:nth-last-of-type(-n + 2) {
  3.         background-color: violet;
  4.       }
  5.     </style>

3.2 其它偽類
序號(hào) 選擇器 描述
1 :active 向被激活的元素添加樣式
2 :focus 向擁有鍵盤輸入焦點(diǎn)的元素添加樣式
3 :hover 當(dāng)鼠標(biāo)懸浮在元素上方時(shí)，向元素添加樣式
4 :link 向未被訪問(wèn)的鏈接添加樣式
5 :visited 向已被訪問(wèn)的鏈接添加樣式
5 :root 根元素,通常是html
5 :empty 選擇沒(méi)有任何子元素的元素(含文本節(jié)點(diǎn))
5 :not() 排除與選擇器參數(shù)匹配的元素

總結(jié)：

css選擇器分三種：

  • 簡(jiǎn)單選擇器（其中類選擇器和id選擇器是最常用的）

  • 上下文選擇器

  • 偽類選擇器（重點(diǎn)）：
    結(jié)構(gòu)偽類（又分為分組匹配和不分組匹配）|其他偽類
批改老師：天蓬老師天蓬老師

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

老師批語(yǔ)：課堂 上將常用選擇器進(jìn)行分類, 其實(shí)還有一些沒(méi)有歸入, 可以通過(guò)查閱手冊(cè)
本博文版權(quán)歸博主所有，轉(zhuǎn)載請(qǐng)注明地址！如有侵權(quán)、違法，請(qǐng)聯(lián)系admin@php.cn舉報(bào)處理！
全部評(píng)論 文明上網(wǎng)理性發(fā)言，請(qǐng)遵守新聞評(píng)論服務(wù)協(xié)議
0條評(píng)論
關(guān)于我們 免責(zé)申明 意見(jiàn)反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長(zhǎng)！
關(guān)注服務(wù)號(hào) 技術(shù)交流群
PHP中文網(wǎng)訂閱號(hào)
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時(shí)隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號(hào)
發(fā)現(xiàn)有趣的

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

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