CSS基础知识1-选择器

CSS（层叠样式表）简介

CSS可以用来为网页创建样式表，通过样式表可以对网页进行修饰，比如我们在一个网页中看到的的图片大小，背景颜色等都是使用CSS设置的。

层叠的意思，我们可以把整个网页想象成一层一层的结构，层次高的将会覆盖层次低的，而CSS可以分别为每个层次设置样式。

我们可以将CSS样式编写到元素的style属性中，这种样式我们称之为内联样式，它只对当前元素的内容起作用，不方便重复使用，而且内联样式属于结构与表现耦合，不方便后期维护，不推荐使用。

格式如下：

<div style="color: aqua;">你好</div>>

我们也可以将CSS样式写到head标签的style标签中，然后把样式编写到style标签中，通过css选择器选中指定元素，为它们添加样式。

这种方法可以使结构与表现分离开，是推荐的使用方式。

格式如下：

<div style="color: aqua;">你好</div>>

外部样式表

除了上述两种方法，我们还可以将样式表编写到外部的CSS文件中，然后在head标签中通过link标签将它引入到当前页面中，这样外部文件的CSS样式表将会应用到当前页面中。

这种方法完全使结构与表现分离，可以使样式表早不同的页面中使用，最大限度的使样式表进行了复用。同时这种方法可以利用浏览器缓存加快用户访问的速度，提升用户体验，是开发中最推荐的方式。

语法如下：

<link rel="stylesheet" href="a.css">

CSS语法

CSS中的注释作用与HTML类似，只不过它必须编写在style标签中，或者是CSS文件中

注释编写在/**/中，格式如下：

/*
我是一段CSS中的注释

*/

CS语法：选择器 声明块

选择器：通过选择器可以选中页面中指定的元素，并且将声明块中的样式应用到选择器对应的元素上。

声明块：声明块紧跟在选择器后边，使用一对{}括起来，声明块中实际上就是一组一组的名值对结构，我们称之为声明。

在一个声明块中可以写多个声明，多个声明之间用;隔开

常用选择器

元素选择器

根据标签名选中页面中的指定元素

语法：标签名{}

例子：p{}

id选择器

根据元素的id值选中唯一的元素

语法：#id值{}

例子：首先我们需要为元素设置id值，如：<p id="a1">我是一个p标签</p>，通过#a1{}选中元素。

类选择器

根据元素的class属性，选中一组元素

语法：.class值{}（前面有一个.）

例子：首先我们需要为元素设置class值，如：<p class="a2">我是一个p标签</p>，通过.a2{}选中元素。

与id值不同的是，class不唯一，可以设置多个同样的class值选中一组元素。

通配选择器

选中页面中所有元素

语法：*{}

该方法可用于设置取消一些元素的默认样式。

并集选择器

可以选中多个条件的元素

语法：选择器1,,选择器2,选择器3

例子：p,#a1,.a2

交集选择器

可以选中满足多个条件的元素

语法：选择器1选择器2选择器3

例子：p#a1.a2

并集选择器中只要满足一个条件即可选中，交集选择器中需同时满足多个条件才可以选中。

子元素和后代选择器

元素之间的关系

父元素：直接包含子元素的元素

子元素：直接被父元素包含的元素

祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素

后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素

兄弟元素：拥有相同父元素的元素叫兄弟元素

后代元素选择器

作用：选中指定元素的指定后代选择器

语法：祖先元素 后代元素{}

子元素选择器

作用：选中指定父元素的指定子元素

语法：父元素>子元素{}

（IE6及以下浏览器不支持子元素选择器）