1. 類選擇器
.classname {
color：red
}
<div class="classname">類選擇器</div>
2.多類名選擇器
.classname1 {
color：red
}
.classname2 {
font-size="20px"
}
<div class="classname1 classname2">類選擇器</div>
若存在多個類名選擇器衝突的情況，那麼以最後一個選擇器爲準。標籤中選擇器類名不分順序。
3.id選擇器
#classname1 {
color：red
}
<div id="classname1 classname2">id選擇器</div>
類選擇器與id選擇器的區別：類選擇器能夠被引用多次，但是一個id選擇器只能被引用一次。一個標籤能同時使用這兩個選擇器。
4.後代選擇器
指一個標籤下的所有的後代
div p {
color:red;
}
<div>
<p>王思聰</p>
<h1>nnnn</h1>
</div>
或者
.jianlin p {
color:red;
}
<div class="jianlin">
<p>王思聰</p>
<h1>nnnn</h1>
</div>
5.子代選擇器
指一個標籤的下一級標籤(親兒子）
ul li > p {
color:red;
}
<ul>
<li>
<div>
<p>王思聰</p>
<h1>nnnn</h1>
</div>
<p>wangsicong</p>
</li>
</ul>
6.交集選擇器
div.name {
color：red;
}
<body>
<div class="name">aaa</div>
<div>bbb</div>
<p class="name">hh</p>
</body>
7.並集選擇器
div,p,h1 {
color=red;
}
<body>
<div>aaa</div>
<p>aaa</p>
<h1>aaa</h1>
</body>
8.鏈接僞類選擇器
<style>
a:link {
color: #3C3C3C;
text-decoration: none;
}
a:visited {
color:blue;
}
a:hover {
color: red;
}
a:active {
color:green;
}
</style>
<a href="https://ai.taobao.com/?pid=mm_12351394_2325537_1371250679" align="center">你快看看</a>
link:未訪問狀態
visited:已訪問狀態
hover：鼠標劃過狀態
active：按下未彈回狀態
這四個順序不能寫錯
9.字體相關樣式
font-size 字體大小
font-family 字體 例如font-family:"微軟雅黑",宋體；
font-weight 粗細 normal不加粗=400 bold加粗=700
font-style 風格 normal正常 italic斜體
10.字體連寫
選擇器{font: font-style font-weight font-size font-family} 如果某個沒有就空着，size和family一定不能省， 順序是規定好的
11.color文本顏色
單詞表示：red green
十六進制表示：#FF0000
rgb代碼： rgb（255，0,0）或rgb(100%,0%,0%)
12.line-height:10px 行間距
13.text-align：left right center 文本對齊方式
14.text-indent：2em；首行縮進2字符
15. text-decoration：文本裝飾 underline下劃線 line-through刪除線 none無裝飾