摘要：
　　这是艺灵带你轻松学会div+css的第六节课：css选择符和调用方法。这节主要讲解5大类选择符及选择符的书写格式、命名规范、css权重相关知识，最后通过案例进行分析讲解本节的知识点。......

第六节：css选择符和调用方法

1.1、5大类型选择符

按照手册中的规范来讲,选择符分为5大类！分别是：元素选择符、关系选择符、属性选择符、伪类选择符、伪对象选择符

在这5类中，使用较多的是：类型选择符、元素选择符、伪类选择符

如果继续讲官方术语，同学们又要懵圈了。我们还是配合着实例进行讲解。

1.2、选择符书写格式

不管是什么选择符、经常用的或者不常用的，这些选择符都有一个固定的书写格式：元素名{属性:值;}。记好了这个格式，别看着这几天讲的内容有些相似就把格式给混淆了！

有了格式后，再来说我们常见的id选择器和类选择器就会简单一些了。

我们通常看到的id选择器或class选择器，这些都是我们自定义的。
比如：.header{}、#content{}、.footer{}等等。

虽然我们可以自定义，但也要注意命名规范！

1.3、命名规范

以英文字母开头，可跟数字或-或_，不能跟中文！

说了这么多，也不知道同学们理解不，还是来张配图吧。

书写格式及命名规范都已经讲过了，我们来做下测试吧。

1.4、选择符格式练习

1.4.1、找出错误选项

A、.as-0k{}
B、#中kji{}
C、a9{}
D、.y8-中g{}
E、.aa，.head{}

上面实例中，只有A是正确的。错误的原因见文章末尾。

1.5、调用选择符

现在会写选择符了，但如何才能生效呢？

此时就需要调用我们所写的选择符了。调用格式：
类选择符：用class属性获取，例如：class="header"。注意，获取时需要去掉.！！！
id选择符：用id属性获取，例如：id="content"。注意，获取时需要去掉#！！！

1.6、调用格式练习

1.6.1、找出错误的选项

A、class="header"
B、class="#.header"
C、class=".header"
D、id=".header"
E、id="#header"
F、id="header"

正确答案只有两个，文章末尾会进行解释。同学们有做出来的吗？

1.7、案例练习

如果是做案例的话，就需要有准备工作--dreamweaver编辑器。打开编辑器后我们需要先整理下思路，然后再进行写代码。思路分析：
1、创建一新文件并保存；
2、本节的选择器需要通过上一节课中的嵌入式样式表进行实现，嵌入式样式表又要放到head里面；
3、我们的html代码需要放到body中；
4、类选择器用class属性进行调取，id选择器用id属性调取；
5、属性的格式及注意事项。

如果同学们没有理清上面的5个思路，艺灵建议先理清再进行下面的环节。

创建文档及保存这一步在此不做演示，如果同学们不会，注意看视频中的讲解。
第二步配图：　

接下来是写选择符了，比如说我想写三个，分别是：p{}，.box{}，#box1{}。相关代码配图：　

接下来我们需要去写css属性了，为了直观的看到效果，我们这里使用颜色属性。核心代码：color:值;，结合上面的选择符，写好后的配图：　

现在已经万事俱备了，我们需要在body中写入我们的html代码，配图：　

好了，我们点击小球在浏览器中进行预览看到最终效果吧，配图：　此时我们可以看到页面中的文字全都变成了红色，是不是感觉有点怪怪的？？？

咦，真的耶！我还没有调用选择符，怎么就变颜色了呢？

注意：元素选择符是直接生效的，不需要再调用。因为当页面中存在这个元素标签时就已经相当于调用了。所以，我们预览页面的时候看到文字颜色全都变红了。

再来看看我们的css代码，只写了这样一行：p{color:#f00;}就让这个页面中所有的p标签全部变色，是不是感觉到css的强大了？

那怎么样才能使类选择符生效呢？

调用后自然生效，调用方法：class="box"，配图：　我们保存后再来刷新页面可以看到第二行的文字已经变了颜色，配图：　此时我们的类选择符已生效。同理，id选择符也一样。配图：　再刷新页面可看到三行文字均显示不同颜色，配图：　

刚刚，我们通过一个简单的实例就演示了元素选择符、类选择符和id选择符。页面代码非常简单，但其中包含有很多重要的信息。这些信息也是我们昨天提到的，也是很多有代码基础的同学容易忽视的！

1.8、重要信息

1、注释；
2、类选择器可重复使用，id选择器必须唯一，一个页面中同名id选择器只能调用一次！
3、后写的属性会覆盖前面的值；
4、css的权重关系：!important>行内样式>id>class>元素。

1.8.1、注释

艺灵建议同学们养成写注释的良好习惯，注释的代码不会被浏览器解析，用户也不能看到直接的效果，但却可以给我们很大的提示作用。特别是在写js或php等代码时非常有必要！！！
理由：可能你当时知道写的是什么意思，但过几天甚至几个月后再来看你曾经写的几百行代码，如果没有注释的话，理解起来需要花很长的时间！

1.8.1.1、注释格式

<!--html注释-->
<!--
要注释的内容
-->
<!--css注释-->
/*
要注释的内容
-*/

为了便于理解，配图一张：

1.8.2、重复与唯一

class选择器支持多处、重复调用，但id选择器在同一页面中，同名的却只能调用一次！通常id选择器是留给我们的js使用的，js通过id再查找元素节点的效率比其它的都要高数倍。

1.8.3、值覆盖

上面案例中，页面中都使用的是p标签，所以都会执行p{color:#f00;/*颜色：红色*/}，如果修改此选择符为：p{color:#f00;/*颜色：红色*/color:#0f0;/*颜色：绿色*/}，那么再刷新页面的时候就会显示绿色。因为后写的color的值覆盖了前面的值。这个在上一节课有案例讲解，如果同学们忘记了，可以看下上节课的内容。

1.8.4、css权重

如果改变了上面的元素选择符顺序，此排行顺序：!important>行内样式>id>class>元素 仍不受值影响！配图：

好了，本节课程就讲到这里，下面来揭晓答案。

1.4.1、错误分析

A、.as-0k{} /*正确*/
B、#中kji{}/*出现中文*/
C、a9{}/*不知是类还是id选择器*/
D、.y8-中g{}/*出现中文*/
E、.aa，.head{}/*英文逗号分隔*/

1.6.1、错误分析

A、class="header"/*正确*/
B、class="#.header"/*不能带.*/
C、class=".header"/*不能带.*/
D、id=".header"/*不能带.*/
E、id="#header"/*不能带#*/
F、id="header"/*正确*/

2、demo欣赏

本节课程小窗欣赏：如果想看全屏效果,点此进入demo全屏界面

3、录制视频

标题：艺灵带你轻松学会div+css06css选择器和调用方法

视频备用地址：
淘宝：http://cloud.video.taobao.com/play/u/759415648/e/1/t/1/p/1/39012747.swf
优酷：http://player.youku.com/player.php/sid/XMTU3OTE1MTQ2NA==/v.swf
土豆：http://www.tudou.com/v/Y8t8piVg88g/v.swf
腾讯：http://static.video.qq.com/TPout.swf?vid=g03019xlkh9&auto=0

如果看官想看更多视频，可在优酷、土豆、腾讯视频中搜索下：艺灵设计哦~

----------完----------

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/div/2016-05-27/403.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。