本文共 2009 字，大约阅读时间需要 6 分钟。
一、实验介绍
1.1 实验内容
本次实验我们详细介绍CSS的基础选择器
1.2 实验知识点
- 派生选择器
- id选择器
- 类选择器
- 属性选择器
二、实验步骤
2.1 派生选择器
派生选择器 通过依据元素在其位置的上下文关系来定义样式，可以使标记更加简洁。
派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器，我们可以使 HTML 代码变得更加整洁。 比方说，你希望列表中的 strong 元素变为红色，而不是通常的黑色，可以这样定义一个派生选择器：
li strong{ color: red;} 请注意在 HTML 中标记为
的代码的上下文关系我是黑色，因为我不在列表当中，所以这个规则对我不起作用
我是红色。这是因为 strong 元素位于 li 元素内。
注意：实验楼环境中没有中文输入法，代码中涉及的中文主要是为了方便大家理解，大家可以英文做相应的替代。
完整代码如下：
index.html
我是黑色，因为我不在列表当中，所以这个规则对我不起作用
我是红色，这是因为 strong 元素位于 li 元素内。
mycss.css
li strong{ color: red;} 运行结果：
在 css 中定义的 li strong 的样式，只会影响上面 html 文件中的<li><strong>,而不会影响<p><strong>中的内容
2.2 id 选择器
1.id 选择器： id 选择器可以为标有 id 的 HTML 元素指定特定的样式 id 选择器以“#”来定义
2.id 选择器和派生选择器： 目前比较常用的方式是 id 选择器常常用于建立派生选择器
上面两点单从字面意思很难理解，我们通过案例进行讲述。
程序举例
index.html 代码 body 中的 p 标签和 div 标签包含了两个 id 属性，值分别为 pid 和 divid，在 css 文件中会以#+属性值引用。注意：id 属性值只能在每个 HTML 文档中出现一次。
hello cssshiyanlou
this is a div
MyCss.css #divid{}就是一个独立的 id 选择器，而#pid a{}就是我们前文提到的 id 选择器用于建立派生选择器,相当于是一个嵌套。
#pid a{ color:#00755f;}#divid { color: red; } 运行结果：
说明：brackets 可以采用下面的方式调节颜色(在颜色值处右键)
2.3 类选择器
2.3.1 (1)在 CSS 中，类选择器以一个点号显示：
.divclass { color: red;} 在下面的 html 代码中，div 元素含有 divclass 类，意味着它要遵守.divclass的规则。
hello div
注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。
2.3.2 和 id 一样，class 也可被用作派生选择器：
.pclass a{ color: green; 上述内容的全部代码如下
2.3.3 程序举例
index.html
这是一个 class 显示效果效果
hello div
MyCss.css
.pclass a{ color: green;}.divclass { color: red;} 运行结果：
2.4 属性选择器
对带有指定属性的 HTML 元素设置样式。
2.4.1 下面的例子为带有 title 属性的所有元素设置样式：
2.4.2 属性和值选择器
下面的例子为 title="te" 的所有元素设置样式：
2.4.3 程序代码举例
index.html
属性选择器
属性和值选择器
运行结果：
三、实验总结
本次实验我们学习了CSS里的基础选择器，那选择到了我们想要的元素之后就可以对其设置样式了，下次实验我们就会学习CSS基本样式。
转载地址：http://pqhjn.baihongyu.com/