css选择器
css选择器简介:
每一条css样式定义由两部分组成,形式如下: [code] 选择器{样式} [/code] 在{}之前的部分就是“选择器”。 “选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素
类别选择器:
类选择器根据类名来选择
前面以”.”来标志,如:
.demoDiv{
color:#FF0000;
}
在HTML中,元素可以定义一个class的属性。
如:
{div class=“demoDiv”}
这个区域字体颜色为红色
{/div}
同时,我们可以再定义一个元素:
{p class=“demoDiv”}
这个段落字体颜色为红色
{/p}
最后,用浏览器浏览,我们可以发现所有class为demoDiv的元素都应用了这个样式。包括了页面中的div元素和p元素。
上例我们给两个元素都定义了class,但如果有很多个元素都会应用这个元素,那得一个个的定义元素,就会造成页面重复的代码太多,这种现象称为“多类症”。
我们可以改成这样来定义。
{div class=“demoDiv”}
{div}
这个区域字体颜色为红色
</div}
同时,我们可以再定义一个元素:
<p}
这个段落字体颜色为红色
</p}
</div}
这样,我们就只是定义了一个类,同时把样式应用到了所有的元素当中。
标签选择器
一个完整的HTML页面是有很多不同的标签组成,而标签选择器,则是决定哪些标签采用相应的CSS样式,(在大环境中你可能处于不同的位置,但是不管怎么样,你总是穿着同一套衣服,这件衣服就是由标签选择器事先给你限定好的,不管走到哪里都是这身衣服)比如,在style.css文件中对p标签样式的声明如下:
p{
font-size:12px;
background:#900;
color:090;
}
复制代码则页面中所有p标签的背景都是#900(红色),文字大小均是12px,颜色为#090(绿色)
,这在后期维护中,如果想改变整个网站中p标签背景的颜色,只需要修改
background属性就可以了,就这么容易!
ID选择器
ID 选择器可以为标有特定 ID 的 HTML 元素指定特定的样式。 根据元素ID来选择元素,具有唯一性,这意味着同一id在同一文档页面中只能出现一次,例如,你将一个元素的id取值为”navi”,那么在同一页面你就不能再将其他元素id取名为”navi”了。尽管你会发现即便你把几个元素都命名成相同的id名字,css选择器还是会把这些元素都选中应用样式(如class选择器那样),对于css选择器,id属性的唯一性似乎不存在。然而,对于js而言,它只会选择具有相同id名字元素中的第一个。出于一个好的编程习惯,同一个id不要在页面中出现第二次。
前面以”#”号来标志,在样式里面可以这样定义:
#demoDiv{
color:#FF0000;
}
这里代表id为demoDiv的元素的设置它的字体颜色为红色。
我们在页面上定义一个元素把它的ID定义为demoDiv,如:
{div id=“demoDiv”}
这个区域字体颜色为红色
{/div}
用浏览器浏览,我们可以看到因为区域内的颜色变成了红色
再定义一个区域
{div}
这个区域没有定义颜色
{/div}
用浏览器浏览,与预期的一样,区域没有应用样式,所以区域中的字体颜色还是默认的颜色黑色。