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

搜索
博主信息
博文 70
粉絲 4
評論 5
訪問量 122228
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
選擇器優(yōu)先級/前端組件樣式模塊化原理與實現(xiàn)/常用偽類選擇器的使用方式（模塊化元素組件）
JiaJieChen
原創(chuàng)
1184人瀏覽過

一.選擇器優(yōu)先級

選擇器 語法
id選擇器 語法是 #+di名稱{} id選擇器與元素屬性選擇器不同的是，id選擇器選擇id的時候需要在前面加上#號
class選擇器 語法是 .+類名稱{} class選擇器的前綴名是英文句號.可以給不同的屬性改變樣式只要是類名一致就行
標簽/元素選擇器 語法是 元素名稱+{}元素選擇器是找到或選擇到相同類型的元素去改變內(nèi)部樣式，如果不是同類元素則不會改變基本樣式

1.標簽/元素選擇器

元素標簽優(yōu)先級: 標簽選擇器在style出現(xiàn)多個同名稱元素屬性也一樣，樣式則按照從上到下順序進行變化

2.class和id選擇器

由此可以看出class和id選擇器權(quán)重大于標簽選擇器,那么class和id選擇器誰大誰小呢？請看下圖

由此可以看出id選擇器權(quán)重比class選擇器還要大,因此我們可以得出一個結(jié)論：id選擇器>class選擇器>標簽/元素選擇器

3.代碼塊

  1. <!DOCTYPE html>
  2. <html lang="en">
  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>選擇器優(yōu)先級</title>
  8.     <style type="text/css">
  9.       * {
  10.         padding: 0;
  11.         margin: 0;
  12.       }
  13.       /* 1.標簽/元素選擇器
  14.       標簽選擇器在style出現(xiàn)多個同名稱元素屬性也一樣，樣式則按照從上到下順序進行變化 */
  15.       /* div {
  16.         border: 1px solid;
  17.         background: cyan;
  18.       }
  19.       div {
  20.         border: 1px solid;
  21.         background: lightpink;
  22.       }
  23.       div {
  24.         border: 1px solid;
  25.         background: limegreen;
  26.       } */
  27.       /* 2.class和id選擇器 */
  28.       /* 由此可以看出class和id選擇器權(quán)重大于標簽選擇器 */
  29.       /* #box1 {
  30.         border: 1px solid;
  31.         background: cyan;
  32.       }
  33.       .box {
  34.         border: 1px solid;
  35.         background: lightpink;
  36.       }
  37.       div {
  38.         border: 1px solid;
  39.         background: limegreen;
  40.       } */
  41.       /* 3.class和id選擇器權(quán)重比較 */
  42.       /* 由此可以看出id選擇器權(quán)重比class選擇器還要大  */
  43.       #box1 {
  44.         border: 1px solid;
  45.         background: cyan;
  46.       }
  47.       .box {
  48.         border: 1px solid;
  49.         background: lightpink;
  50.       }
  51.       div {
  52.         border: 1px solid;
  53.         background: limegreen;
  54.       }
  55.     </style>
  56.   </head>
  57.   <body>
  58.     <div id="box1" class="box">box1</div>
  59.     <div>box2</div>
  60.     <div>box3</div>
  61.     <div>box4</div>
  62.     <div>box5</div>
  63.   </body>
  64. </html>

二.前端組件樣式模塊化原理與實現(xiàn)

樣式表 語法
link外部樣式表 外部樣式表link是標簽是在head內(nèi)部使用，引入css樣式 rel是必須要輸入的屬性 內(nèi)容是stylesheet表示引入的是一個css樣式表文件,type填text/css說明是標準固定的css文件,href屬性表示的是css文件路徑 引入html外部的css文件
@impord外部樣式表 url()內(nèi)部輸入css文件路徑
style=””內(nèi)部樣式表 內(nèi)部樣式表 style type=”text/css”是寫在 head中
style=””行內(nèi)樣式表 行內(nèi)樣式表 style 不同的是是寫在body 行元素中

1.行內(nèi)樣式表

行內(nèi)樣式表我們把style寫在body標簽中去改變每一行的樣式

  1. <body>
  2.     <!-- 行內(nèi)樣式表我們把style寫在body標簽元素中去改變每一行的樣式 -->
  3.     <div style="background: plum">box1</div>
  4.     <div style="background: lightpink">box2</div>
  5.     <div style="background: lightsalmon">box3</div>
  6.     <div style="color: rgb(250, 250, 250); background: rgb(98, 212, 31)">
  7.       box4
  8.     </div>
  9.     <div style="background: lightskyblue">box5</div>
  10.   </body>

2.內(nèi)部樣式表

內(nèi)部樣式表是把style寫在head里面，可以定義元素的樣式，可以用選擇器選擇屬性去改變樣式,我用了元素選擇器，id選擇器，class選擇器

  1. <head>
  2.     <meta charset="UTF-8" />
  3.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  5.     <title>內(nèi)部樣式表</title>
  6.     <style type="text/css">
  7.       /* 內(nèi)部樣式表是把style寫在head里面，可以定義元素的樣式，可以用選擇器選擇屬性去改變樣式 */
  8.       div {
  9.         border: 1px solid;
  10.         width: 300px;
  11.         height: 2em;
  12.         text-align: center;
  13.         background: lightpink;
  14.       }
  15.       .box {
  16.         background: limegreen;
  17.       }
  18.       #box1 {
  19.         background: red;
  20.       }
  21.     </style>
  22.   </head>

3.外部樣式表（模塊化）

這里采用的是內(nèi)部樣式表，可以看到在一段文字中，加入了太多樣式會覺得看起代碼來很復雜，接下來我們用外部樣式表看看如何去簡化我們的代碼

①創(chuàng)建一個css文件

②把寫好的樣式放到css文件中

③html引入外部css文件

這里我們用@import url()引入外部的css文件，就可以把我們的樣式給引入進去啦，這樣代碼看起來會更簡潔！?。?/p>

3.代碼塊

  1. <!DOCTYPE html>
  2. <html lang="en">
  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.     <style type="text/css">
  9.      /* @imoprt url 引入外部css文件 */
  10.       @import url(外部樣式表.css);
  11.     </style>
  12.   </head>
  13.   <body>
  14.     <div>
  15.       <p>“有規(guī)劃的人生叫藍圖，沒有規(guī)劃的人生叫拼圖?！?/span></p>
  16.     </div>
  17.   </body>
  18. </html>

三.常用偽類選擇器的使用方式（模塊化元素組件）

偽類 含義
:nth-of-type(n) 選擇任何一個元素
:first-of-type 選擇第一個元素
:last-of-type 選擇最后一個元素
:nth-last-of-type() 選擇倒數(shù)某一個元素
:only-of-type 唯一子元素的元素

1.:nth-of-type(n)，選擇任何一個元素

只要拿到了元素的入口，就可以用 偽類選擇器：nth-of-type（n）元素里面的任何一個元素

2.:first-of-type，選擇第一個元素

:first-of-type 選擇第一個元素

3.:last-of-type，選擇第最后一個元素

:last-of-type 選擇最后一個元素

4.nth-last-of-type()，選擇倒數(shù)某一個元素

:nth-last-of-type(2)選擇倒數(shù)第二個元素

4.:only-of-type，唯一子元素的元素

:only-of-type 選擇唯一的子元素

5.:代碼塊

  1. <!DOCTYPE html>
  2. <html lang="en">
  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.     <style type="text/css">
  9.       div {
  10.         border: 1px solid;
  11.         width: 400px;
  12.         text-align: center;
  13.       }
  15.       /* 1.只要拿到了元素的入口，就可以用 偽類選擇器：nth-of-type（n）元素里面的任何一個元素 */
  16.       /* #box > div:nth-of-type(2) {
  17.         background: aqua;
  18.       } */
  20.       /*2. first-of-type 選擇第一個元素 */
  21.       /* #box div:first-of-type {
  22.         background-color: pink;
  23.       } */
  24.       /* 3.last-of-type 選擇最后一個元素 */
  25.       /* #box div:last-of-type {
  26.         background-color: red;
  27.       } */
  28.       /* 4.nth-last-of-type(2)選擇倒數(shù)第二個元素 */
  29.       /* #box div:nth-last-of-type(2) {
  30.         border: seashell;
  31.         background: plum;
  32.       } */
  33.       /* 5.only-of-type 選擇唯一的子元素 */
  34.       #box span:only-of-type {
  35.         background-color: plum;
  36.       }
  37.     </style>
  38.   </head>
  39.   <body>
  40.     <div id="box">
  41.       <div>box1</div>
  42.       <div>box2</div>
  43.       <div>box3</div>
  44.       <div>box4</div>
  45.       <span>box5</span>
  46.     </div>
  47.   </body>
  48. </html>
批改老師：天蓬老師天蓬老師

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

老師批語：極用心,非常棒,照這樣的學習態(tài)度 ,不成功都難
本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報處理！
全部評論 文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議
0條評論
作者最新博文
關(guān)于我們 免責申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓，幫助PHP學習者快速成長！
關(guān)注服務(wù)號 技術(shù)交流群
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+教程免費學