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

html-css010

CSS里的HTML选择器、类选择器、ID选择器用于哪些范围?,第1张

主要应用于声明不同优先级、不同适用范围的样式。\x0d\x0a\x0d\x0a【HTML选择器】\x0d\x0a三者中优先级最低的选择器。\x0d\x0a用于最基础样式的定义,比如定义页面整体的字体(给body定义font),链接的样式(给a定义颜色、下划线等属性),列表项的符号样式(给li定义list-style),段落的间距(给p定义padding或者margin)等等。 这种声明优先级最低。\x0d\x0a举例:\x0d\x0abody, table td { font:normal 12px/1.8 Arial}\x0d\x0aa { color:#ff0text-decoration:none}\x0d\x0aa:hover { color:#ff6}\x0d\x0ap { text-indent:2em}\x0d\x0a\x0d\x0a【类选择器】\x0d\x0a用于来定义一类可以在同一个页面内重复利用的样式。 如比较常用的.clearfix(一般是用于清除浮动),或者自己定义的用于新闻列表的样式,详细的写好链接、列表、边框以及背景等属性,有些人还会习惯把一些常用的属性作为一个类。\x0d\x0a\x0d\x0a举例:\x0d\x0a.clearfix { clear:bothcontent:.height:0overflow:hiddenzoom:1}\x0d\x0a.fl { float:left}\x0d\x0a.red { color:red}\x0d\x0a.box { border:1px solid #ccc}\x0d\x0a.box li { padding-left:15pxbackground:url(arrow.png) 5px center no-repeat }\x0d\x0a\x0d\x0a【ID选择器】\x0d\x0a三者中优先级最高的选择器。\x0d\x0a一般用于一个页面中仅出现一次的容器,也常常作为js的接口。例如页面上的导航条(#nav)、页脚(#footer)、侧边栏(#sider)、主要内容(#mainBody)等等。\x0d\x0a举例:\x0d\x0a#nav { padding:10px 0background:url(../images/nav.png) 0 -124px repeat-x}\x0d\x0a#footer { border-top:3px solid #630}\x0d\x0a#sider { float:right: width:298pxborder:1px solid #ccc}

先来点基础的,

CSS

的使用方式有三种:内联

<p style=""></p>

;内部样式,在

head

加入

<style></style>

定义

css

body

中引用;外部样式,

css

放在一个外部文件中,

head

中用

<link src="">

加载,

body

中引用和内部样式使用方法相同。

再来点基础的,

css

定义有三种:

直接标签定义如,

p{

具体风格代码

}

效果范围是

body

中所有的

p

标签;根据

ID

号定义,

#p1{

具体风格代码

}

效果范围是

body

id="p1"

的标

签;自定义,

.p1{

具体风格代码

}

body

中标签以

class="p1"

进行引用;

一、

CSS

的语法是比较灵活的,比如可以同时定义两个

css

名使用同一种风格,中间以逗

号分隔,如:

.

.p1

.p2{

具体风格代码

}

.p1

#p2,p{

具体风格代码

}

,意思为,自定义的

p1

风格,

id

号为

p2

的风格,

<p>

标签的风格。

二、

接上,也可以

.p1

.p2{

具体风格代码

}

.p2{

具体风格代码

}

好处是把自定义

p1

p2

相同的部分放在

.p1

.p2{

具体风格代码

}

不同部

.p2

再定义。

三、

前面自定义好的风格,在引用时

class="

自定义风格

"

,也给了我们充分的灵活,可以

引用多个自定义风格,以空格间隔,如:

.p1{

具体风格代码

}

.p2{

具体风格代码

}

引用时

<p class="p1 p2">