1.标签选择器 div
定义:直接使用标签加大阔号中填写css样式 例如:div{};
简单样式:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
color:red;
}
</style>
</head>
<body>
<div>我是一个div</div>
</body>
</html>
效果:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
2.类选择器 .box
定义:在style中使用类名去选择要改变的标签的元素 如.one{css样式} 这样写就会改变所有类名为.one的标签(类名不为.one或者没有类名的不受影响);
简单样式:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.one{
color:red;
}
</style>
</head>
<body>
<div class="one">我是一个div</div>
<p class="one">我是一个p</p>
<div class="two">我是一个div</div>
</body>
</html>
效果图:
id选择器 #box
后代选择器 .box p 交集选择器 h1.center(名字为center的h1标签)
交集选择器 div.box div#box;
伪类选择器 div:after{div为父标签 内容在div的子标签的后面插入}
div:before
div:focus 聚焦
div:active
并集选择器 a,b,span,.one,#box{}
通配符,选择器所有的标签
范围越广 作用越大 优先级越低
div+p相邻兄弟选择器
div~p 选择后方所有的p
子元素选择器
div:nth-of-type(even)p {} even选到所有的偶数 p为div的子标签
div:nth-of-type(odd){}
div:frist-of-type{}选择第一个
div:last-of-type{} 选择最后一个
div:nth-of-type{2n}偶数
div:nth-of-type{2n-1}奇数 (可以通过公式) 要求比:nth-chlid严格
div:nth-child(2) 由于只需要同级不需要同类 范围比较广 不比nth-of-type严格
否定选择器
p:not(.one){color:red}否定掉类名为.one的p 其他p标签字体颜色都应用上color:red; 与其他标签无关
p:empty{background:red;}选择空标签
216
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
