标签选择器
<!-- 语法：
html标签 {属性： value；}
-->
<!-- 常用属性
color 前景色（文字颜色)
background-color 背景色
font-size 设置文字大小
width 宽
height 高
-->
<style type="text/css">
p {
color: red; /*改变文字颜色*/
font-size: 22px; /*改变文字大小*/
background-color: pink; /*设置背景颜色*/
width: 300px;
height: 300px;
}
div {
color: gray;
font-size: 30px;
}
</style>
类选择器
<!-- 类样式主要是为了处理公有的样式 -->
<!-- 语法
.class_name {key: value;}
-->
<!-- 调用方式
<p class="red public">
-->
<!-- 类名命名规范
1.不能使用纯数字或者以数字开头
2.尽量不使用汉字
3.不能使用特殊字符或者以特殊字符开头
4.不使用标签名做类名
-->
-
类常用命名
C600A2A7-53EC-4760-9C35-BBF92373F938.png
ID选择器
/*语法
#ID_name {key: value;}
*/
/*使用需要给标签添加一个id属性，每个标签的id属性值唯一*/
/*id选择器与类选择器的区别
一个类样式可以被多个标签同时掉用
页面中标签的id值唯一
一个标签只能调用一个id样式
*/
通配符选择器
/*语法：* {key: value;}*/
/*会选中页面中的所有标签,全局设置样式，一般用于页面初始化标签样式*/
标签指定式选择器
/*标签指定式选择器*/
div.one {
color:red;
}
div#two {
color:pink;
}
/*标签指定式选择器*/
/*语法：
标签名.class_name {key: value;}
标签名#id_name {key: value;}
关系是 且
*/
交集选择器
后代选择器
div span {
color: yellowgreen;
}
/*后代选择器
标签之间必须是嵌套关系
选择器与选择器之间使用空格隔开
只能选中后代标签
*/
/*语法
选择器 选择器 {key: value;}
*/
子代选择器
/*子代选择器选择器之间必须是嵌套关系
只能选中直接后代元素
*/
/*语法 选择器>选择器 {key: value;}*/
div>span {
color: red;
}
<body>
<div class="one">
<span>子代span标签</span>
<p><span>后代span标签</span></p>
</div>
</body>
并集选择器
div,p,span {
color: red;
}
/*并集选择器
选择器之间使用逗号隔开
选择器标签之间的结构可以是任意关系
*/
/*语法
选择器，选择器 {key: value;}
*/
属性选择器
<style type="text/css">
/* [class] {
color: red;
}*/
/*选中多个属性*/
/* [id][class] {
color: orange;
}*/
/*给属性赋值*/
/* [class="two"] {
color: pink;
}
*/
/*属性值是否以o开头*/
/* [class^=o] {
color: red;
}*/
/*属性值是否以o结尾*/
/* [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>
伪类选择器
- 结构伪类
<style type="text/css"> /*li:first-child 代表选中父标签中第一个元素li*/ li:first-child { color: red; } /*选中最后一个标签li*/ li:last-child { color: red; } /*选中第二个标签li*/ li:nth-child(2) { color: pink; } /*选中倒数第二个标签*/ li:nth-last-child(2) { color: green; } /*选中奇数标签*/ li:nth-child(odd) { color: orange; } /*选择偶数标签*/ 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>
> 伪元素选择器