Vue 3.0 體驗 Vue Function API
阿新 • • 發佈：2020-12-08
技術標籤：FrontEnd&Vue
文章目錄
1 基本選擇器
html標籤選擇器、class選擇器、id選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三種基本選擇器</title>
<!--三種基本選擇器：
1.html標籤選擇器
2.class選擇器
3.id選擇器
注意：每一個標籤都定義了class和id屬性，用於對標籤進行標識，方便對標籤進行操作。
多個標籤的class屬性值可以相同，而id屬性值必須唯一。
--> 2 擴充套件選擇器
關聯選擇器、組合選擇器、偽元素選擇器、屬性選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>擴充套件選擇器</title>
<style type="text/css">
/*1.關聯選擇器
僅僅讓出現在p標籤裡的b標籤才使用該樣式(中間用空格)
要使相同標籤中的不同標籤顯示不同樣式，可選擇此標籤。
*/
p b {
color: red;
font-size: 2cm;
}
ol li {
font-size: 1cm;
}
/*2.組合選擇器
對多個不同選擇器進行相同樣式的設定，可選擇此選擇器，
不同選擇器中間用逗號隔開。
*/
span, div {
color: #998866;
font-size: 2cm;
}
span {
color: #000000;
font-size: 2cm;
}
/*3.偽元素選擇器*/
/*超連結未點選狀態*/
a:link {
color: red;
font-size: 2cm;
}
/*游標移到超連結上的狀態(未點選)*/
a:hover {
color: yellow;
font-size: 3cm;
}
/*點選超連結時的狀態*/
a:active {
color: purple;
}
/*被訪問後的狀態*/
a:visited {
font-size: 1cm;
color:gray;
}
/*4.屬性選擇器*/
/*如果id屬性值中包含指定的字元(包含1)，就使用此樣式*/
[id *= "1"] {
width: 100px;
height: 100px;
color: red;
}
/*如果id屬性值的開頭字元為指定的字元(開頭字元為div)，就使用此樣式*/
[id ^= "div"] {
width: 100px;
height: 200px;
color: yellow;
}
/*如果id屬性值的截尾字元為指定的字元(結尾字元為_x)，就使用此樣式*/
[id $="_x"] {
width: 200px;
height: 300px;
color: black;
}
</style>
</head>
<body>
<p>
p標籤
<b>
劉德華
</b>
段落樣式
</p>
<b>黃渤</b> <!--不能應用上面的樣式-->
<ol>
<li>北京</li>
<li>上海</li>
<li>廣州</li>
</ol>
你平時喜歡做的事情
<ul>
<li>吃飯</li>
<li>睡覺</li>
<li>打遊戲</li>
</ul>
<div>
你好王道！
</div>
<span>
你好cskaoyan!
</span>
<a href="http://www.xiaomi.com">小米</a>
<div id = "ddi1_x2">
div11111
</div>
<div id = "div2_x">
div2222
</div>
<div id="div3">
div333
</div>
</body>
</html>