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

css基礎選擇器有哪些，CSS基礎二（選擇器的使用）

C++11-19

css基礎選擇器有哪些，CSS基礎二（選擇器的使用）

一? 選擇器

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

 ?p{color:red;}

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

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

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

id名選擇元素

 ?#box {background-color: pink;}

id名不能重復
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

超鏈接:link{} 鏈接未點擊之前
超鏈接:visited{} 鏈接訪問之后
任何元素:hover{} 鼠標劃過該元素
超鏈接: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)

? ? ? ??E::first-letter文本的第一個單詞或字（如中文、日文、韓文等）
? ? ? ??E::first-line 文本第一行；
? ? ? ? E::selection 可改變選中文本的樣式
? ? ? ? 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屬性，否則偽元素就不起作用。