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

搜索
博主信息
博文 145
粉絲 7
評論 7
訪問量 198507
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
CSS層疊樣式表基礎(chǔ)知識—選擇器
李東亞1??3????12?
原創(chuàng)
1245人瀏覽過

CSS基礎(chǔ)知識之選擇器

一、選擇器類型
1、CSS選擇器類型可分為：簡單選擇器（含屬性選擇器）以及偽類選擇器
2、簡單選擇器見表一：

序號 選擇器 描述 舉例
1 元素選擇器 根據(jù)元素標(biāo)簽名稱進(jìn)行匹配 div {...}
2 群組選擇器 同時(shí)選擇多個(gè)不同類型的元素 h1,h2,h3{...}
3 通配選擇器 選擇全部元素,不區(qū)分類型 * {...}
4 屬性選擇器 根據(jù)元素屬性進(jìn)行匹配 *[...]
5 后代選擇器 選擇當(dāng)前元素的所有后代元素空格 ul li{……}
6 父子選擇器 選擇當(dāng)前元素的所有自帶元素> form>section{……}
8 同級相鄰選擇器 選擇當(dāng)前擁有共同父級且相鄰的元素+ li.item+li{……}
9 同級所有元素 選擇擁有共同父級的后續(xù)所有元素~ li.item~li{………}

3、常有簡單屬性選擇器：

常見屬性選擇器 舉例
類選擇器 .container{………}
id選擇器 #first{……}

4、偽類選擇器：結(jié)構(gòu)偽類選擇器和表單偽類選擇器
5、結(jié)構(gòu)偽類選擇器
a、結(jié)構(gòu)偽類選擇器分為：不分類型匹配（:nth-child(n)）和分類型匹配（:nth-of-type(n)）；
b、結(jié)構(gòu)偽類參考表（n從1開始計(jì)算）

不分類匹配 分類匹配
匹配第一個(gè)元素 :first-child{……} :first-of-type{……}
匹配最后一個(gè)元素 :last-child{……} :last-of-type{……}
匹配任意元素 :nth-child(n){……} :nth-of-type(){……}

備注：匹配任意元素中n可以通過表達(dá)式來表示匹配一組元素，表達(dá)式中的n從0開始，且必須寫在前面；-n表示獲取前面一組元素，正數(shù)表示從指定元素獲取余下元素；
6、表單選擇器：

7、其他偽類選擇器

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

二、代碼實(shí)操練習(xí)

1、代碼部分：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.     <style>
  8.       /* 元素選擇器 */
  9.       body {
  10.         background-color: #e3e3e3;
  11.       }
  12.       /* 類選擇器 */
  13.       .container {
  14.         width: 300px;
  15.         height: 300px;
  16.         display: grid;
  17.         grid-template-columns: repeat(3, 1fr);
  18.         gap: 5px;
  19.       }
  20.       /* 父子選擇器 */
  21.       .container > * {
  22.         background-color: #80ffff;
  23.         display: flex;
  24.         justify-content: center;
  25.         align-items: center;
  26.         font-size: 20px;
  27.       }
  28.       /* 后代選擇器 */
  29.       .container * {
  30.         /* border: 1px solid #ff0000; */
  31.       }
  32.       /* 偽類選擇器 */
  33.       .container > span:first-of-type {
  34.         background-color: lightblue;
  35.       }
  36.       /* ID選擇器 */
  37.       #center {
  38.         background-color: #ff00ff;
  39.       }
  40.       /*偽類選擇器*/
  41.       .container > :first-child {
  42.         background-color: lightblue;
  43.       }
  44.       /*相鄰?fù)夁x擇*/
  45.       #center + .item {
  46.         background-color: red;
  47.       }
  48.       /* 偽類選擇器 */
  49.       .item:nth-child(n + 7) {
  50.         background-color: lightgreen;
  51.       }
  52.         /*元素選擇器*/
  53.       fieldset {
  54.         width: 400px;
  55.         border: none;
  56.         background-color: lightgreen;
  57.         display: grid;
  58.         grid-template-columns: 1fr;
  59.         justify-items: center;
  60.         gap: 15px;
  61.       }
  62.       /*其他偽類選擇器，鼠標(biāo)移動到選中*/
  63.       fieldset:hover {
  64.         box-shadow: 0 0 3px rosybrown;
  65.       }
  66.       fieldset > legend {
  67.         text-align: center;
  68.         width: 400px;
  69.         margin: auto;
  70.         font-size: 20px;
  71.         color: green;
  72.         font-weight: bolder;
  73.       }
  74.       section {
  75.         width: 260px;
  76.         margin: 10px auto;
  77.         display: grid;
  78.         grid-template-columns: 60px 1fr;
  79.       }
  80.       section:last-child {
  81.         display: flex;
  82.         justify-content: space-between;
  83.       }
  84.       /*表單選擇器*/
  85.       input:enabled {
  86.         width: 200px;
  87.         height: 20px;
  88.         background: khaki;
  89.         border-style: none;
  90.       }
  91.       /*表單選擇器：獲取焦點(diǎn)時(shí)選中*/
  92.       input:focus {
  93.         background-color: #fff;
  94.         outline: none;
  95.       }
  96.       .button {
  97.         width: 100px;
  98.         height: 30px;
  99.       }
  100.       .button:hover {
  101.         border: none;
  102.         outline: none;
  103.         background-color: royalblue;
  104.         color: seashell;
  105.       }
  106.     </style>
  107.   </head>
  108.   <body>
  109.     <div class="container">
  110.       <div class="item">1</div>
  111.       <div class="item">2</div>
  112.       <div class="item">3</div>
  113.       <div class="item">4</div>
  115.       <span class="item" id="center">5</span>
  116.       <span class="item">6</span>
  117.       <span class="item">7</span>
  118.       <span class="item">8</span>
  119.       <span class="item">9</span>
  120.     </div>
  121.     <hr />
  122.     <form action="">
  123.       <fieldset>
  124.         <legend>用戶登陸</legend>
  125.         <section>
  126.           <label for="username">賬號:</label>
  127.           <input
  128.             type="text"
  129.             placeholder="explome@qq.com"
  130.             id="username"
  131.             name="username"
  132.             required
  133.             autofocus
  134.           />
  135.         </section>
  136.         <section>
  137.           <label for="pasword">密碼:</label>
  138.           <input
  139.             type="password"
  140.             name="password"
  141.             id="password"
  142.             placeholder="輸入密碼"
  143.             reuqired
  144.           />
  145.         </section>
  146.         <section>
  147.           <button type="submit" class="button">登陸</button>
  148.           <button type="reset" class="button">取消</button>
  149.         </section>
  150.       </fieldset>
  151.     </form>
  152.   </body>
  153. </html>

2、運(yùn)行效果圖：

總結(jié)：

1、css選擇器雖然非常多，但經(jīng)常用的并不多；最常見的由：元素選擇器、類選擇器和id選擇器、偽類選擇器（:nth-child(n) 、:hover、input:focus）等等
2、偽類選擇器重點(diǎn)在：:nth-child(n+2){……}在n表達(dá)式上的理解，偶數(shù)可以用even奇數(shù)可以用odd表示；
3、表單偽類選擇器和鏈接偽類選擇器，需要練習(xí)
4、特殊偽類：:hover{……}和input:focus、:not()不包含選擇器::not(span){……}

批改老師：天蓬老師天蓬老師

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

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

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

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