日本樂天計劃收購 Open RAN 供應商 Altiostar
阿新 • • 發佈：2021-08-08
1、選擇器
1.1、常用的選擇器
通配選擇器
作用：選中頁面中的所有元素
語法：* {}
元素選擇器
作用：根據標籤名選中指定的元素
語法：標籤名{}
id選擇器
作用：根據元素的id值選中一個元素
語法：#id屬性值{}
類選擇器
作用：根據元素的class屬性值選中一組元素
語法：.class屬性值{}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>常用的選擇器</title> <style> /* 通配選擇器 作用：選中頁面中的所有元素 語法：* {} */ *{ text-align: center; } /* 元素選擇器 作用：根據標籤名選中指定的元素 語法：標籤名{} */ p{ color: blue; } /* id選擇器 作用：根據元素的id值選中一個元素 語法：#id屬性值{} */ #pink{ color: pink; } /* 類選擇器 作用：根據元素的class屬性值選中一組元素 語法：.class屬性值{} */ .color{ color: purple; } .font{ font-size: 20px; } </style> </head> <body> <h3>潦水盡而寒潭清，煙光凝而暮山紫。</h3> <h3 id="pink" class="font">落霞與孤鶩齊飛，秋水共長天一色。</h3> <!-- 可以通過class屬性來為元素分組 可以同時為一個類指定多個class --> <h3 class="color">爽籟發而清風生，纖歌凝而白雲遏。</h3> <h3 class="color font">地勢極而南溟深，天柱高而北辰遠。</h3> <p>滕王高閣臨江渚，佩玉鳴鸞罷歌舞。</p> <p>畫棟朝飛南浦雲，珠簾暮卷西山雨。</p> <p>閒雲潭影日悠悠，物換星移幾度秋。</p> <p>閣中帝子今何在？檻外長江空自流。</p> </body> </html>
1.2、複合選擇器
交集選擇器
作用：選中同時符合多個條件的元素
語法：選擇器1選擇器2選擇器3選擇器n{}
並集選擇器
作用：同時選擇多個選擇器對應的元素
語法：選擇器1，選擇器2，選擇器3，選擇器n{}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>複合選擇器</title> <style> .red{ color: red; } /* 將class為red的字型大小設定為30px */ /* 交集選擇器 作用：選中同時符合多個條件的元素 語法：選擇器1選擇器2選擇器3選擇器n{} 注意點： 交集選擇器中如果有元素選擇器，必須使用元素選擇器開頭 */ div.red{ font-size: 30px; } /* 並集選擇器 作用：同時選擇多個選擇器對應的元素 語法：選擇器1，選擇器2，選擇器3，選擇器n{} */ h1,span{ color: blue; } </style> </head> <body> <div class="red">我是div</div> <p class="red">我是p元素</p> <h1>我是h1標題</h1> <span>我是span</span> </body> </html>
1.3、關係選擇器
子元素選擇器
作用：選中指定父元素的指定子元素
語法：父元素>子元素{}
後代元素選擇器
作用：選中指定元素內的指定後代元素
語法：祖先元素 後代元素
兄弟元素選擇器
作用：選擇緊挨著的下一個兄弟元素
語法：前一個元素+後一個元素
兄弟元素選擇器
作用：選擇下面所有的兄弟
語法：兄元素~弟元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>關係選擇器</title> <style> /* 為class為box的div的子元素span設定一個字型顏色 */ /* 子元素選擇器 作用：選中指定父元素的指定子元素 語法：父元素>子元素{} */ div > span{ color:red; } /* 後代元素選擇器 作用：選中指定元素內的指定後代元素 語法：祖先元素 後代元素 */ div span{ font-size: 30px; } /* 兄弟元素選擇器 作用：選擇緊挨著的下一個兄弟元素 語法：前一個元素+後一個元素 */ p + span{ font-style: oblique; } /* 兄弟元素選擇器 作用：選擇下面所有的兄弟 語法：兄元素~弟元素 */ p ~ span{ background-color: blueviolet; } </style> </head> <body> <div> 我是一個div1 <span>我是div1中的span1元素</span> <p> 我是div1中的p元素 <span>我是p元素中的span</span> </p> <span>我是div1中的span2元素</span> <span>我是div1中的span3元素</span> <span>我是div1中的span4元素</span> </div> </body> </html>
1.3、屬性選擇器
- [屬性名] 選擇含有指定屬性的元素
- [屬性名=屬性值] 選擇含有指定屬性和屬性值的元素
- [屬性名^=屬性值] 選擇屬性值以指定值開頭的元素
- [屬性名$=屬性值] 選擇屬性值以指定值結尾的元素
- [屬性值*=屬性值] 選擇屬性值中含有某值的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>屬性選擇器</title>
<style>
/*
[屬性名] 選擇含有指定屬性的元素
[屬性名=屬性值] 選擇含有指定屬性和屬性值的元素
[屬性名^=屬性值] 選擇屬性值以指定值開頭的元素
[屬性名$=屬性值] 選擇屬性值以指定值結尾的元素
[屬性值*=屬性值] 選擇屬性值中含有某值的元素
*/
h3[title]{
color: blue;
}
h3[title=hello]{
font-size: 30px;
}
h3[title^=abc]{
font-style: oblique;
}
h3[title$=abc]{
background-color: aqua;
}
h3[title*=abc]{
text-align: center;
}
</style>
</head>
<body>
<h3 title="abc">潦水盡而寒潭清，煙光凝而暮山紫。</h3>
<h3 title="abcdef">落霞與孤鶩齊飛，秋水共長天一色。</h3>
<h3 title="helloabc">爽籟發而清風生，纖歌凝而白雲遏。</h3>
<h3 title="123abc123">地勢極而南溟深，天柱高而北辰遠。</h3>
</body>
</html>
1.4、偽類選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>偽類選擇器</title>
<style>
/*
偽類（不存在的類，特殊的類）
- 偽類用來描述一個元素的特殊狀態
- 偽類一般情況下使用:開頭
:first-child 第一個子元素
:last-chile 最後一個子元素
:nth-child() 選中第n個子元素
特殊值：
- n 第n個 n的範圍0到正無窮
- 2n 或 even 選中偶數位的元素
- 2n+1 或 odd 選中奇數位的元素
以上這些偽類是根據所有的子元素進行排序
:first-of-type
:last-of-type
:nth-of-type()
- 這幾個偽類的功能和上述的類似，不同點是它們是在同類型元素中進行排序
:not() 否定偽類 將符合條件的元素從選擇器中去除
*/
ul > li:first-child{
color: red;
}
ul > li:last-child{
color: blue;
}
ul >li:nth-child(3){
color:aqua
}
ul > li:not(:nth-child(3)){
font-style: oblique;
}
</style>
</head>
<body>
<ul>
<li>第一個</li>
<li>第二個</li>
<li>第三個</li>
<li>第四個</li>
<li>第五個</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超連結的偽類選擇器</title>
<style>
/*
:link 表示正常的連結
:visited 使用者訪問過的超連結
由於隱私的原因,:visited偽類只能修改連結的顏色
:hover 用來表示滑鼠移入的狀態
:active 用來表示滑鼠點選的狀態
*/
a:link{
color:aqua;
}
a:visited{
color: red;
}
a:hover{
font-size: 30px;
}
a:active{
color:yellow;
}
</style>
</head>
<body>
<a href="https:www.baidu.com">百度</a><br>
<a href="https://www.bilibili.com">嗶哩嗶哩</a><br>
</body>
</html>
1.5、偽元素選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>偽元素選擇器</title>
<style>
/*
偽元素,表示頁面中一些表示特殊的並不存在的元素
偽元素使用::開頭
::first-letter 表示第一個字母
::first-line 表示第一行
::selection 表示選中的內容
::before 表示元素的開始位置
::after 表示元素的最後位置
::before 和 ::after 結合content屬性來使用
*/
p::first-letter{
font-size: 30px;
}
p::first-line{
background-color: aquamarine;
}
p::selection{
background-color: red;
}
div::before{
content:'abc';
color: red;
}
div::after{
content: 'def';
color: blue;
}
</style>
</head>
<body>
<div>Hello,how are you?</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis adipisci rem obcaecati est alias harum aperiam maiores, neque voluptatibus eligendi cupiditate ipsam, at expedita vel sed quam similique! Provident, cupiditate.</p>
</body>
</html>
1.6、選擇器的權重
樣式衝突: 當我們通過不同的選擇器，選中相同的元素，並且為相同的樣式設定不同的值時，此時發生樣式衝突。
發生樣式衝突時，應用那個樣式由選擇器的權重（優先順序）決定。
選擇器的權重
| CSS樣式 | 優先順序權重 |
|---|---|
| 內聯樣式(行內樣式) | 1,0,0,0 |
| id選擇器 | 0,1,0,0 |
| 類和偽類選擇器 | 0,0,1,0 |
| 元素選擇器 | 0,0,0,1 |
| 通配選擇器 | 0,0,0,0 |
| 繼承的樣式 | 沒有優先順序 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>選擇器的權重</title>
<style>
/*
比較優先順序時，需要將所有的選擇器的優先順序進行相加計算，最後的優先順序越高，則越優先顯示（分組選擇器單獨計算）
選擇器的累加不會超過最大的數量級，類選擇器再高也不會超過id選擇器
如果優先順序計算後相同，此時優先使用靠下的樣式
可以在某一個樣式的後面新增 !important ，則此時該樣式會獲得最高的優先順序，甚至會超過內聯樣式
*/
*{
font-size: 30px;
}
div{
font-size: 50px;
color: yellow;
}
.red{
color:red
}
.div1{
color:purple;
}
#box1{
color: blue;
}
h3{
color: green;
}
.blue{
color: blue;
}
h3.blue{
color: pink;
}
.def{
background-color: antiquewhite !important;
}
</style>
</head>
<body>
<div class="red">我是div1</div>
<div id="box1" class="red">我是div2</div>
<div id="box1" class="red" style="color: aqua;">我是div3</div>
<div class="red div1">我是div4</div>
<div>我是一個div5<span>我是div中的span</span></div>
<h3 class="blue">我是h3標題</h3>
<h3 class="def" style="background-color: chocolate;">我是一個h3標題</h3>
</body>
</html>