学会使用css的选择器–基本选择器

作者:前端大碗茶儿日期:2016-07-17 16:24:58 点击:373 css选择器 css html

学会使用css的选择器–基本选择器

css选择器我们在之前说过,html和css是分离开的,那么就不能像行内样式那样直接去操作要控制的元素,所以规则制定者,开发出一种规则,通过css选择器来进行html中元素的查找和获取,实现对元素的控制,例如:
p{color:red;} p标签中的所有文字为红色


css选择器的基本语法

<style type="text/css">
/*
选择器{}
{}之前的内容就是我们的css选择器
选择器指明了{}中相关css样式要操作的元素
{}里面是相关的css属性
*/

div{
width: 100px;
height: 200px;
color: #ffffff;
}

/*
整个文档下(document)所有的div元素宽度100像素,高度200像素,文字颜色白色
*/

</style>

css选择器的作用

像上面举的例子一样,div{}可以选择这个文档下所有的div元素,让这些元素都具有{}里面的css属性,也就是一个选择器的内容可以让多个元素使用,减少重复代码出现,并且当进行修改时,我们只需要修改一个选择器中的内容,这个选择器控制的所有元素都会跟着改变。

css选择器的分类

标签选择器

标签选择器就是有html标签中的标签名决定的,例如:<ul></ul>如果想选择这个无序列表我们需要怎样书写呢?<style>ul{}</style>直接使用标签进行选择

类选择器

标签选择器可以选择页面中所有的这个标签,但是我们在页面中并不是只要是这个标签样式就会一致,很多时候是特殊的、有区别的,这个时候就需要区别开这些相同的标签名,这个时候就可以使用类选择器。

类选择器是有标签的class属性值和“.”组成的,例如<p class="className"></p> <style>.className{}</style>className就是类名

一个元素可以有一个或多个类名,每个类名之间用空格隔开,例如:<p class="className1 className2"></p> <style>.className1{} .className2{}</style>都可以控制这个元素。

一个类名也可以控制不同的元素,例如:

<p class="nav"></p>
<div class="nav"></div>
<ul class="nav"></ul>
<style type="text/css">
.nav{
width: 100px;
height: 200px;
color: #ffffff;
}

</style>

那么nav这个类名就控制了p标签、div标签、ul标签。

id选择器

当标签选择器和类选择器没有办法满足使用的时候,我们就需要一个终极武器,id选择器。

id选择器是有标签的id属性值和“#”组成的,例如<p id="idName"></p> <style>.className{}</style>
id选择器要注意,一个页面一个id名只能出现一次。

通配符选择器

通配符选择器很简单,就是一个“{}”组成的,这个选择器可以进行全部元素选择。就像平时使用电脑,比如要搜索C盘里所有的网页,可以使用 .html来搜索,.html是网页的后缀名,*代表了所有网页的名称;
在CSS中,同样使用 * 代表所有的标签或元素,它叫做通配符选择器。

例如 <style>* {color:red;}</style>这里就把所有元素的字体设置为红色。
不过,由于会匹配所有的元素,这样会影响网页渲染的时间,因此很多人开始停止使用通配符选择器,取而代之的是,把所有需要统一设置的元素,放在一起,一块设置。

上一篇: 深入浅出学习层叠样式表--css

下一篇: 网站css样式调整之文字样式的控制