css选择器 css选择器

HTML选择器
直接使用标签

img{ width: 400px; border: 1px dotted blue; }

属性选择器(id,class) *全局选择器

Title - 锐客网*{ padding: 0; /*margin: 0; */ } #p1{ width: 400px; text-align: center; font-style: inherit; color: red; border: 1px solid #000000; padding: 30px; } .item{ margin-top: 20px; width: 400px; height:300px; color: slateblue; border: 1px dotted #4cae4c; font-size: 50px; }我是测试代码我是div标签我也是div标签

关联选择器和组合选择器

#box div{}: id=box标签下的所有div 但不包括自身 #box > div{} :id=box标签下的子代div但不包括自身 .contentli{}:class=content标签下的所有li p,li,div{} : 逗号代表同级别 p.item{}:带class=item的p标签

实例代码

Title - 锐客网#box div{ color: red; } #box>div{color: #01AAED; } .content li{ border: 1px solid #2b669a; } p.item{ border: 2px solid yellow; } p,li,div{ font-style: oblique; } div div01div02 hahahahah hahahahah hahahahah hahahahah 0000000000000 0000000000000 0000000000000 0000000000000 hahahahah 我是p1 我是p2

伪类选择器
【css选择器】大部分用于a标签

Title - 锐客网#con{ font-style: oblique; } .nav li { border: 1px solid black; list-style: none; width: 100px; font-size: 20px; font-style: inherit; cursor: url("/images/1.jpeg"),pointer; } li:hover{ background-color: #01AAED; } a.a1:hover{ color: yellow; } a.a2:active{ color: orange; } a.a3:visited{ font-style: oblique; } a.a4:link{ color: #4cae4c; }我是字体测试首页数码家电五金服装手指放到变色hover 按下变色active 激活后变色visited 直接显示link