CSS里的HTML选择器、类选择器、ID选择器用于哪些范围

高分请讲解下,CSS里的HTML选择器、类选择器、ID选择器用于哪些范围
最新回答
被刻印的时光ゝ

2024-10-02 08:50:51

主要应用于声明不同优先级、不同适用范围的样式。

【HTML选择器】
三者中优先级最低的选择器。
用于最基础样式的定义,比如定义页面整体的字体(给body定义font),链接的样式(给a定义颜色、下划线等属性),列表项的符号样式(给li定义list-style),段落的间距(给p定义padding或者margin)等等。 这种声明优先级最低。
举例:
body, table td { font:normal 12px/1.8 Arial; }
a { color:#ff0; text-decoration:none; }
a:hover { color:#ff6; }
p { text-indent:2em; }

【类选择器】
用于来定义一类可以在同一个页面内重复利用的样式。 如比较常用的.clearfix(一般是用于清除浮动),或者自己定义的用于新闻列表的样式,详细的写好链接、列表、边框以及背景等属性,有些人还会习惯把一些常用的属性作为一个类。

举例:
.clearfix { clear:both; content:.; height:0; overflow:hidden; zoom:1; }
.fl { float:left; }
.red { color:red; }
.box { border:1px solid #ccc; }
.box li { padding-left:15px; background:url(arrow.png) 5px center no-repeat }

【ID选择器】
三者中优先级最高的选择器。
一般用于一个页面中仅出现一次的容器,也常常作为js的接口。例如页面上的导航条(#nav)、页脚(#footer)、侧边栏(#sider)、主要内容(#mainBody)等等。
举例:
#nav { padding:10px 0; background:url(../images/nav.png) 0 -124px repeat-x; }
#footer { border-top:3px solid #630; }
#sider { float:right: width:298px; border:1px solid #ccc; }
说不尽的伤ミ

2024-10-02 11:30:39

ID的优先级最高,用于特定或者特指的,还有就是js里头用到ID选择比较多,类选择器是最常用,一个是用于复用某些CSS,另一个就是用来找后代,毕竟不可能为每个html标签定义一个class,html一般是一开始采用,比如body,a,list-type等等,而后就是跟着class后面找后代,组成复合选择器
震撼鲜师◤╕

2024-10-02 12:59:39

这个在w3c的网站上有很详细的教程的