当前位置: 首页>C++>正文

css基礎選擇器有哪些,CSS基礎二(選擇器的使用)

css基礎選擇器有哪些,CSS基礎二(選擇器的使用)

一? 選擇器

1 標簽選擇器? ? ? ?權重為1

 ?p{color:red;}

2 id選擇器? ? ? ? ? 權重為100

給標簽添加id的屬性,值為id名

 <div id="box">Lorem ipsum dolo</div>

id名 選擇元素

 ?#box {background-color: pink;}
  1. id名不能重復

  2. id只能有一個

3? class(類)選擇器? ? ? ?權重為10

  • css基礎選擇器有哪些,.class名選擇元素

     ?.box {color: red;} .box1 {background-color: royalblue;}
    1. class名可以重復

    2. 一個標簽可以有多個class名,多個之間用空格隔開

  • 給標簽添加class的屬性,值為class名

    <div class="box box1">Lorem ipsum </div>

4通用選擇器

  *{margin:0; 外邊距padding:0; 內填充}

5偽類選擇器(狀態)? ? ? 權重為10

  1. 超鏈接:link{} 鏈接未點擊之前
  2. 超鏈接:visited{} 鏈接訪問之后
  3. 任何元素:hover{} 鼠標劃過該元素
  4. 超鏈接:active{} 鼠標按下的狀態

6后代選擇器? ? ? ? ? ? ?繼承權重為0

? ? ? ? ? ? 選擇器 選擇器{}? ? ? (空格隔開)

基本選擇器有哪三個、? ? ? ? ? ? ? 可以是多個選擇器 選擇器之間可以跨級,但是必須存在后代關系

7群組選擇器(并集選擇器)?

? ? ? ??選擇器,選擇器{}? ? ? ? ?(逗號隔開)

8交集選擇器

交集選擇器由兩個選擇器構成,其中第一個為標簽選擇器,第二個為class選擇器,兩個選擇器之間不能有空格,如h3.special。

交集選擇器 是 并且的意思。 即...又...的意思

比如: ? p.one ? 選擇的是: 類名為 .one 段落標簽

9子元素選擇器

CSS樣式選擇器。子元素選擇器只能選擇作為某元素子元素的元素。其寫法就是把父級標簽寫在前面,子級標簽寫在后面,中間跟一個 >??進行連接,注意,符號左右兩側各保留一個空格。

白話: 這里的子 指的是 親兒子 不包含孫子 重孫子之類

?比如: .demo > h3 {color: red;} ? 說明 h3 一定是demo 親兒子。 demo 元素包含著h3。

10?!important? ? ? ? ?權重無窮大

div{/*權重:0001*/color: hotpink!important;/*無窮大*/}

二 CSS新增選擇器

? ? ? ? ?

1? ?結構(位置)偽類選擇器(CSS3)

  • :first-child :選取屬于其父元素的首個子元素的指定選擇器

  • 基礎選擇器,:last-child :選取屬于其父元素的最后一個子元素的指定選擇器

  • :nth-child(n) : 匹配屬于其父元素的第 N 個子元素,不論元素的類型

  • :nth-last-child(n) :選擇器匹配屬于其元素的第 N 個子元素的每個元素,不論元素的類型,從最后一個子元素開始計數。n 可以是數字、關鍵詞或公式

    li:first-child { /*  選擇第一個孩子 */color: pink; }
    li:last-child {   /* 最后一個孩子 */color: purple;}
    li:nth-child(4) {   /* 選擇第4個孩子  n  代表 第幾個的意思 */ color: skyblue;}

    2 目標偽類選擇器(CSS3)

    :target目標偽類選擇器 :選擇器可用于選取當前活動的目標元素

    :target {color: red;font-size: 30px;
    }

    3? ?屬性選擇器

    Css選擇器、選取標簽帶有某些特殊屬性的選擇器 我們成為屬性選擇器

    /* 獲取到 擁有 該屬性的元素 */
    div[class^=font] { /*  class^=font 表示 font 開始位置就行了 */color: pink;}
    div[class$=footer] { /*  class$=footer 表示 footer 結束位置就行了 */color: skyblue;}
    div[class*=tao] { /* class*=tao  *=  表示tao 在任意位置都可以 */color: green;}
        <div class="font12">屬性選擇器</div><div class="font12">屬性選擇器</div><div class="font24">屬性選擇器</div><div class="font24">屬性選擇器</div><div class="font24">屬性選擇器</div><div class="24font">屬性選擇器123</div><div class="sub-footer">屬性選擇器footer</div><div class="jd-footer">屬性選擇器footer</div><div class="news-tao-nav">屬性選擇器</div><div class="news-tao-header">屬性選擇器</div><div class="tao-header">屬性選擇器</div>

    4 偽元素選擇器(CSS3)

  1. ? ? ? ??E::first-letter文本的第一個單詞或字(如中文、日文、韓文等)
  2. ? ? ? ??E::first-line 文本第一行;
  3. ? ? ? ? E::selection 可改變選中文本的樣式
  4. ? ? ? ? E::before和E::after
p::first-letter {font-size: 20px;color: hotpink;
}/* 首行特殊樣式 */
p::first-line {color: skyblue;
}p::selection {/* font-size: 50px; */color: orange;
}

?? ? ??E::before和E::after? ? ?在E元素內部的開始位置和結束位創建一個元素,該元素為行內元素,且必須要結合content屬性使用。

div::befor {content:"開始";
}
div::after {content:"結束";
}

? ?? ? ?E:after、E:before 在舊版本里是偽元素,CSS3的規范里“:”用來表示偽類,“::”用來表示偽元素,但是在高版本瀏覽器下E:after、E:before會被自動識別為E::after、E::before,這樣做的目的是用來做兼容處理。

? ? ? ? ":" 與 "::" 區別在于區分偽類偽元素

之所以被稱為偽元素,是因為他們不是真正的頁面元素,html沒有對應的元素,但是其所有用法和表現行為與真正的頁面元素一樣,可以對其使用諸如頁面元素一樣的css樣式,表面上看上去貌似是頁面的某些元素來展現,實際上是css樣式展現的行為,因此被稱為偽元素。是偽元素在html代碼機構中的展現,可以看出無法偽元素的結構無法審查

樣式選擇器?? ? ? ? ? ? ? 偽元素:before和:after添加的內容默認是inline元素**;這個兩個偽元素的content屬性,表示偽元素的內容,設置:before和:after時必須設置其content屬性,否則偽元素就不起作用。

三? 選擇器的權重

內聯樣式 1000

id選擇器 100

class選擇器/偽類選擇器 10

選擇器。標簽選擇器 1

繼承樣式 0

選擇器權重特點

權重值越高,優先顯示該樣式

后代選擇器的權重由每個選擇器的權重值相加

群組選擇器的權重值為選擇器本身的權重值

三種基本選擇器、權重值相同的,就近原則

繼承樣式的權重值是最低的

命名

英文單詞并且語義化 <div class="nav"></div>

駝峰命名 <div class="bigBox"></div>

css三大基本選擇器?短線連接 <div class="big-box"></div>

下劃線連接 <div class="big_box"></div>

https://www.nshth.com/cplus/313062.html
>

相关文章:

  • css基礎選擇器有哪些
  • 基本選擇器有哪三個
  • CSS樣式選擇器
  • 基礎選擇器
  • CSS選擇器
  • 樣式選擇器
  • 選擇器
  • 三種基本選擇器
  • github 免費節點,BUMO:超級節點共建接口
  • 學習html/css基礎的重點筆記
  • 企業郵箱怎么群發郵件,企業會員郵件群發解決方案
  • esfp光模塊,闡述一下ecshop各模塊的功能_【光電通信】40G QSFP+ LR4 光模塊的設計與實現(一)...
  • lua編程軟件,QQ郵箱記事本模塊Lua實現小結
  • centos7.6鏡像下載,centos(7.9) minikube(v1.28.0) kaniko 構建鏡像
  • 計算機畢業設計ssm企業部門報銷管理g9d62系統+程序+源碼+lw+遠程部署
  • 鮑森詹森實驗過程,Ornstein-Uhlenbeck過程
  • 嵌入式的發展趨勢,我理解的嵌入式幾個發展方向
  • 51開發板,IMX6ULL_PRO嵌入式開發板介紹
  • 嵌入式軟件工程師,2023屆秋招內推指南|嵌入式開發|軟硬件
  • 剛畢業的大學生適合做什么工作,今天我的就業班的生活開始啦~~~
  • C語言-基礎知識練習習題1
  • 什么監控攝像頭最清晰,計算機為什么找不到攝像頭,為何電腦里找不到攝像頭設備?
  • 網易支付登錄,微信登陸和支付
  • 人工智能自我進化,復雜性思維中文第二版 十一、進化
  • firebase,Firebase 教程: iOS A/B 測試
  • mongodb可視化管理工具,Impala入門筆記---比Hive強大
  • 世界只是一個程序,程序的世界里,短暫的放空
  • 如何用爬蟲爬取網頁上的數據,新聞爬蟲及爬取結果查詢網站的搭建(一)
  • 爬蟲網站,新聞網站爬蟲及結果查詢
  • 深度卷積神經網絡,深度KWeaver:價值驅動,認知智能走向開源共創
  • sci論文翻譯神器,SCI科技論文英語翻譯的一點個人心得
  • 協議的定義,連接跟蹤TCP協議狀態轉換
  • 洛谷 T284709 怨念(resent)
  • 1330 小青蛙跳臺階
  • 動態規劃解決小青蛙跳臺階問題
  • 代碼記錄丨小青蛙和漢諾塔
  • 小青蛙爬井
  • 【基礎】小青蛙回來了