一. 几个常用的CSS属性

为了方便的测试CSS选择器, 我们先提前了解几个常用的CSS属性.

1. color:red; 设置文本的颜色. 颜色值暂时先用英文, 后面我们会学习颜色值的多种表示方式

2. background-color: red; 设置元素的背景色;

3. font-size : 20px; 设置文本的大小, 单位是像素.

二. 简单选择器

简单选择器包括 4 种类型.

2.1 标签选择器

标签选择器也叫元素选择器.

此选择器会去匹配HTML中的标签名, 只要匹配成功就会把后面的声明块中的CSS属性应用在匹配的标签中.

这是选择所有指定标签类型的最简单方式。

<style type="text/css">
p{
    color: red;
    font-size: 30px;
}

div{
    background-color: lightgray;
}
</style>

<p>这是第一个p</p>
<a href="#">百度一下</a>
<p>这是第二个p</p>
<div>这是个div</div>

说明:

• 匹配的时候有多少算多少都会匹配, 而不是只匹配一个元素.

• 不管标签定义在什么位置, 嵌套有多深都会匹配成功.

• 匹配的时候是忽略标签的大小写的, 也就是说: 选择器UL和元素ul也会匹配.

• 标签选择器表示的是同一种标签之间的一种共性样式的设置.

2.2 id选择器

标签选择器表示的是同一种标签之间的一种共性样式的设置

如果我们只想给某一个具体的元素添加样式, 标签选择器则不再合适, id选择器则是比较好的选择.

使用id选择器之前, 需要先给目标元素添加一个id属性.

id选择器语法: #id属性值

<style>
#p3 {
    color: blue;
}
</style>


<p>第一个p</p>
<p>第二个p</p>
<div>
    <p id="p3">第三个p</p>
</div>

注意:

• id选择器是以#开头的.

• 一个页面中不能有元素的id值重复. (id就应该表示一种独一无二). 如果你不小心在页面中添加了重复的id值, 则只有第一个元素会被计算, 其他均会忽略.

• id选择器是选择单个元素的最有效的方案.

id的命名规则:

• 数字, 字母, 下划线(_), 连字符(-)
• 不要与标签名相同(防止误操作)

给选择器命名要遵循 是什么, 而不是像什么!

比如一个页面上的特别提示的 id 名是 bigBlueText （大蓝字），可它的样式早就被改成红色小字体，这个名字就没意义了。使用更聪明的惯例如 noteText （提示文字）就好多了，因为即使视觉样式改变了，它也还是管用的。

2.3 class选择器(类选择器)

标签选择器只能选择同一种标签, id选择器只能选择某一个元素.

如果我想同时选择多个不同种类的标签, 就class选择器莫属了.

类选择器语法: .类名

通过标签的class属性就可以给标签添加类了.

<style>
.my_study{
    background-color: pink;
}
.now{
    font-size: 40px;
    color: blue;
}
</style>
<ul>
    <li>c++</li>
    <li class="my_study">javascript</li>
    <li>java</li>
    <li class="my_study">html</li>
    <li class="my_study now">css</li>
</ul>

说明:

• 多个标签可以有相同的类名. 这是类区别于id的一个主要特征

• 一个标签也可提供多个类, 多个类之间用空格隔开. 则这些类的中定义的css属性都会起作用.

class选择器比较简单, 但是能用好class的人都是高手. 我们在后面的项目中再慢慢体会.

2.2 通用选择器(通配符选择器, Universal selector)

通用选择器用一个 *来表示, 是选择器中的王牌, 他会选中页面中的所有元素.

由于给每个元素应用同样的规则几乎没有什么实际价值，更常见的做法是与其他选择器结合使用.

<style>
* {
    color: red;
}
</style>
<p>哈哈哈</p>
<div>嘿嘿</div>
<h1>嘎嘎嘎</h1>

注意:

• 使用通用选择时小心。因为它适用于所有的元素，在大型网页利用它可以对性能有明显的影响：网页可以显示比预期要慢。

• 大部分情况下, 你不会去用这个选择器