【原】CSS3——CSS3 新增選擇器

流楚丶格念 2022-01-14

展開全文

天空之外

結(jié)構(gòu)(位置)偽類選擇器（CSS3)

:first-child :選取屬于其父元素的首個子元素的指定選擇器
:last-child :選取屬于其父元素的最后一個子元素的指定選擇器
:nth-child(n) ：匹配屬于其父元素的第 N 個子元素，不論元素的類型
:nth-last-child(n) ：選擇器匹配屬于其元素的第 N 個子元素的每個元素，不論元素的類型，從最后一個子元素開始計數(shù)。
n 可以是數(shù)字、關(guān)鍵詞或公式

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

案例

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*a:hover  鼠標(biāo)經(jīng)過a鏈接的時候 */
ul li {
list-style: none;
}
ul li:first-child {
background-color: pink;
}
ul li:last-child {
background-color: pink;
}
li:nth-child(3) {  /*選擇第3個 */
background-color: purple;
}

li:nth-child(even) {  /* even 選擇所有的偶數(shù)*/
background-color: pink;
}
li:nth-child(odd) { /*  odd 選擇所有的奇數(shù)*/
background-color: purple;
}

li:nth-child(2n) { /* n = 0  1  2 3 4 5   2n   0 2 4 6 8 10...開始 2n 類似于even*/
background-color: pink;
}


    li:nth-child(2n+1) {  /*奇數(shù)  odd*/
    background-color: pink;
    }

li:nth-child(4n) {  /* 4.8.12 */
background-color: blue;
}
</style>
</head>
<body>
<ul>
<li>我的錯熱風(fēng)</li>
<li>我的錯熱風(fēng)</li>
<li>我的錯熱風(fēng)</li>
<li>我的錯熱風(fēng)</li>
<li>愛上對方過后就哭了</li>
<li>愛上對方過后就哭了</li>
<li>愛上對方過后就哭了</li>
<li>愛上對方過后就哭了</li>
<li>愛上對方過后就哭了</li>
</ul>
</body>
</html>

屬性選擇器

（其中有正則的知識，在這先了解怎么用就行了，后面的文章會學(xué)）
選取標(biāo)簽帶有某些特殊屬性的選擇器我們成為屬性選擇器

class^=font 表示 font 開始位置就行了
class$=footer 表示 footer 結(jié)束位置就行了
class*=tao *= 表示tao 在任意位置都可以

/* 獲取到 擁有 該屬性的元素 */
div[class^=font] { /*  class^=font 表示 font 開始位置就行了 */
color: pink;
}
div[class$=footer] { /*  class$=footer 表示 footer 結(jié)束位置就行了 */
color: skyblue;
}
div[class*=tao] { /* class*=tao  *=  表示tao 在任意位置都可以 */
color: green;
}

案例

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div[class] {  /*選出所有 帶有 class 屬性的*/
background-color: pink;
  }
  div[class=demo] { /* 選出 class = demo 的*/
background-color: yellow;
  }

  div[class^=test] {  /*選出test 開頭的 標(biāo)簽*/
  background-color: purple;
  }
  div[class$=test] {  /*選出test 結(jié)束的 標(biāo)簽  ^    $  */
  background-color: red;
  }

</style>
</head>
<body>
<div class="demo">屬性選擇器例子</div>
<div>屬性選擇器例子</div>
<div>屬性選擇器例子</div>
<div>屬性選擇器例子</div>
<div>屬性選擇器例子</div>
<div>屬性選擇器例子</div>
<div class="firsttest">屬性選擇器例子</div>
<div class="test">屬性選擇器例子</div>
<div class="test1">屬性選擇器例子</div>
<div class="test2">屬性選擇器例子</div>
<div class="test3">屬性選擇器例子</div>

</body>
</html>

偽元素選擇器（CSS3)

E::first-letter文本的第一個單詞或字（如中文、日文、韓文等）
E::first-line 文本第一行；
E::selection 可改變選中文本的樣式；

p::first-letter {
  font-size: 20px;
  color: hotpink;
}

/* 首行特殊樣式 */
p::first-line {
  color: skyblue;
}

p::selection {
  /* font-size: 50px; */
  color: orange;
}

4. E::before和E::after

在E元素內(nèi)部的開始位置和結(jié)束位創(chuàng)建一個元素，該元素為行內(nèi)元素，且必須要結(jié)合content屬性使用。

div::befor {
  content:"開始";
}
div::after {
  content:"結(jié)束";
}

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

案例

在這里插入圖片描述
代碼分析

源代碼

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div::before {  /*必須帶一個屬性  content 偽元素 其實這個 before 是個盒子*/
/* 這個盒子是行內(nèi)的盒子  可以轉(zhuǎn)換*/
content: "我";
width: 200px;
height: 200px;
background-color: pink;
display: block;
}
div::after {
content: "18歲";
}
</style>
</head>
<body>
<div>今年</div>
</body>
</html>

: 偽類與 :: 偽元素

“:” 與 “::” 區(qū)別在于區(qū)分偽類和偽元素

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

注意

偽元素:before和:after添加的內(nèi)容默認(rèn)是inline元素**；這個兩個偽元素的content屬性，表示偽元素的內(nèi)容,設(shè)置:before和:after時必須設(shè)置其content屬性，否則偽元素就不起作用。

案例

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p::first-letter { /* 選擇第一個字*/
font-size: 100px;
}
.pp::first-line {  /*第一行*/
color: red;
}
p::selection {  /*選擇文字時候的狀態(tài)*/
background-color: pink;
color: yellow;
}
</style>
</head>
<body>
<p class="pp">
中國有嘻哈,2017中國有嘻哈巡回演唱會 北京站,首都體育館!立享188元新人大禮包!中國有嘻哈,100%正票,票品保障!更多折扣票,熱門票,上票牛網(wǎng)!中國有嘻哈,2017中國有嘻哈巡回演唱會 北京站,首都體育館!立享188元新人大禮包!中國有嘻哈,100%正票,票品保障!更多折扣票,熱門票,上票牛網(wǎng)!中國有嘻哈,2017中國有嘻哈巡回演唱會 
</p>
<p>
p北京站,首都體育館!立享188元新人大禮包!中國有嘻哈,100%正票,票品保障!更多折扣票,熱門票,上票牛網(wǎng)!</p>
</body>
</html>