时间:2021-07-01 10:21:17 帮助过:48人阅读
ID选择器使用"#"前缀标识符进行标识,后面紧跟指定的元素的ID名称。
如
#box{ width:100px; height:100px;}
元素的ID名称是唯一的,只能对应于文档中一个具体的元素。在HTML中,用来构建整体框架的标签应该定义ID属性,因为这此对象一般在页面中都是比较唯一的,固定的,不会重复,如Logo包含框,导航条,主体包含框,版权区域等。
测试ID
@charset "utf-8";/* CSS Document */#header{ margin:0 auto; width:960px; height:210px; border:solid 1px #000000;}#logo{ width:100px; height:100px; border:solid 1px #000000; float:left;}#banner{ margin-left:30px; float:left; width:800px; height:100px; border:solid 1px #000000;}#nav{ clear:both; margin:0 auto; width:800px; height:100px; border:solid 1px #000000;}
ID选择器
@charset "utf-8";/* CSS Document *//* 父级样式*/#father{ width:500px; height:500px; border:solid 2px blue; margin:5px;}/* 通过父级样式设置父级样式下的标签div模式*/#father div{ width:100px; height:100px; border:solid 1px red; padding:10px; margin:10px; background-color:#0000FF;}/* 通过父级样式设置父级样式下的类*/#father .child1{ width:100px; height:100px; margin:20px; padding:10px; border:solid 5px #FF00FF; background-color:#66FF00;}/* 通过父级样式设置父级样式下的类*/#father .child2{ width:100px; height:100px; margin:10px; padding:10px; border:solid 5px #00FF00; background-color:#FF0000;}/*这里直接设置类样式不起作用因为上面通过#father div已经设置过了,这里的类选择器优先级小于标签选择器*/.child3{ width:100px; height:100px; margin:10px; padding:10px; border:solid 10px #0000FF; background-color:#FF00FF;}