標(biāo)簽選擇器
<!-- 語(yǔ)法：
html標(biāo)簽 {屬性： value；}
-->
<!-- 常用屬性
color 前景色（文字顏色)
background-color 背景色
font-size 設(shè)置文字大小
width 寬
height 高
-->
<style type="text/css">
p {
color: red; /*改變文字顏色*/
font-size: 22px; /*改變文字大小*/
background-color: pink; /*設(shè)置背景顏色*/
width: 300px;
height: 300px;
}
div {
color: gray;
font-size: 30px;
}
</style>
類(lèi)選擇器
<!-- 類(lèi)樣式主要是為了處理公有的樣式 -->
<!-- 語(yǔ)法
.class_name {key: value;}
-->
<!-- 調(diào)用方式
<p class="red public">
-->
<!-- 類(lèi)名命名規(guī)范
1.不能使用純數(shù)字或者以數(shù)字開(kāi)頭
2.盡量不使用漢字
3.不能使用特殊字符或者以特殊字符開(kāi)頭
4.不使用標(biāo)簽名做類(lèi)名
-->
-
類(lèi)常用命名
C600A2A7-53EC-4760-9C35-BBF92373F938.png
ID選擇器
/*語(yǔ)法
#ID_name {key: value;}
*/
/*使用需要給標(biāo)簽添加一個(gè)id屬性，每個(gè)標(biāo)簽的id屬性值唯一*/
/*id選擇器與類(lèi)選擇器的區(qū)別
一個(gè)類(lèi)樣式可以被多個(gè)標(biāo)簽同時(shí)掉用
頁(yè)面中標(biāo)簽的id值唯一
一個(gè)標(biāo)簽只能調(diào)用一個(gè)id樣式
*/
通配符選擇器
/*語(yǔ)法：* {key: value;}*/
/*會(huì)選中頁(yè)面中的所有標(biāo)簽,全局設(shè)置樣式，一般用于頁(yè)面初始化標(biāo)簽樣式*/
標(biāo)簽指定式選擇器
/*標(biāo)簽指定式選擇器*/
div.one {
color:red;
}
div#two {
color:pink;
}
/*標(biāo)簽指定式選擇器*/
/*語(yǔ)法：
標(biāo)簽名.class_name {key: value;}
標(biāo)簽名#id_name {key: value;}
關(guān)系是 且
*/
交集選擇器
后代選擇器
div span {
color: yellowgreen;
}
/*后代選擇器
標(biāo)簽之間必須是嵌套關(guān)系
選擇器與選擇器之間使用空格隔開(kāi)
只能選中后代標(biāo)簽
*/
/*語(yǔ)法
選擇器 選擇器 {key: value;}
*/
子代選擇器
/*子代選擇器選擇器之間必須是嵌套關(guān)系
只能選中直接后代元素
*/
/*語(yǔ)法 選擇器>選擇器 {key: value;}*/
div>span {
color: red;
}
<body>
<div class="one">
<span>子代span標(biāo)簽</span>
<p><span>后代span標(biāo)簽</span></p>
</div>
</body>
并集選擇器
div,p,span {
color: red;
}
/*并集選擇器
選擇器之間使用逗號(hào)隔開(kāi)
選擇器標(biāo)簽之間的結(jié)構(gòu)可以是任意關(guān)系
*/
/*語(yǔ)法
選擇器，選擇器 {key: value;}
*/
屬性選擇器
<style type="text/css">
/* [class] {
color: red;
}*/
/*選中多個(gè)屬性*/
/* [id][class] {
color: orange;
}*/
/*給屬性賦值*/
/* [class="two"] {
color: pink;
}
*/
/*屬性值是否以o開(kāi)頭*/
/* [class^=o] {
color: red;
}*/
/*屬性值是否以o結(jié)尾*/
/* [class$=o] {
color: red;
}*/
/* 屬性值中是否包含o*/
[class*=o] {
color: red;
}
/*屬性選擇器*/
/*[屬性名]{key: value;}
[屬性名="value"]{key: value;}
*/
</style>
<body>
<div>div</div>
<div class="two">class div</div>
<div class="one" id="ID">wenzi</div>
</body>
偽類(lèi)選擇器
- 結(jié)構(gòu)偽類(lèi)
<style type="text/css"> /*li:first-child 代表選中父標(biāo)簽中第一個(gè)元素li*/ li:first-child { color: red; } /*選中最后一個(gè)標(biāo)簽li*/ li:last-child { color: red; } /*選中第二個(gè)標(biāo)簽li*/ li:nth-child(2) { color: pink; } /*選中倒數(shù)第二個(gè)標(biāo)簽*/ li:nth-last-child(2) { color: green; } /*選中奇數(shù)標(biāo)簽*/ li:nth-child(odd) { color: orange; } /*選擇偶數(shù)標(biāo)簽*/ li:nth-child(even) { color: red; } </style> <ul> <li>li1</li> <li>li2</li> <li>li3</li> <li>li4</li> <li>li5</li> <li>li6</li> <li>li7</li> <li>li8</li> <li>li9</li> <li>li10</li> </ul>
> 偽元素選擇器