CSS新手学习一（语法、注释、选择器）

一、语法

CSS 规则由两个部分构成：选择器和声明。
选择器：需要改变样式的 HTML 元素
声明：由一个属性和一个值组成

注意：

1. 一条CSS规则有一个声明或者多个声明组成的声明组；
2. 声明组用{}（大括号）括起来；
3. 声明用；（分号）结束,声明组中最后一条声明的分号可以省略；（不过我一般没有省略，这个看个人喜好）
4. 属性和值之间用：（冒号）隔开；

例子：

.maomao{
    width:100px;
    height:100px;

}

二、注释

CSS注释以 /* 开始, 以 */ 结束。

例子：

.maomao{
    width:100px;
    height:100px;
    /*background：#000;*/
}

三、选择器

（一）通配符选择器（＊）

通配符选择器是用来选择所有元素

*{
    marigin: 0;
    padding: 0;
}
/*我相信大家在reset样式文件中经常见过*/
/*所有元素的margin和padding都设置为0*/

（二）元素选择器

元素选择器，是css选择器中最常见而且最基本的选择器。元素选择器其实就是文档的元素，如html,body,p,div等等。

例子：

<style type="text/css">
    li{
        marigin: 0;
        padding: 0;
    }
</style>
<ul>
    <li>元素选择器</li>
    <li>元素选择器</li>
    <li>元素选择器</li>
</ul>
/*页面上所有li元素的margin和padding都设置为0*/

（三）id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

id 选择器以 # 来定义

例子：

<style type="text/css">
    #maomao{
        width: 100px;
        height: 100px;
        background: #f00;
    }
    /*id为maomao的HTML元素定义宽高为100像素，背景色为红色的样式*/
</style>
<div id="maomao">id 选择器</div>

（四）class 选择器（类选择器）

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

HTML元素以class属性来设置class选择器,CSS 中 class 选择器以 . 来定义。

例子：

<style type="text/css">
    .maomao{
        width: 100px;
        height: 100px;
        background: #f00;
    }
    /*所有class为maomao的HTML元素定义宽高为100像素，背景色为红色的样式*/
</style>
<div class="maomao">class 选择器（类选择器）</div>
<div class="maomao">class 选择器（类选择器）</div>
<div class="maomao">class 选择器（类选择器）</div>

（五）后代选择器

后代选择器（descendant selector）又称为包含选择器,可以选择作为某元素后代的元素；

前面的称为祖先元素，后面的称为后代元素，中间用空格隔开

祖先元素和后代元素之间的层次间隔可以是无限的。

例子：

<style type="text/css">
    div p{
        marigin: 0;
        padding: 0;
    }
    /*页面上所有div元素中所有p元素的margin和padding都设置为0；该例子中所有p元素的margin和padding都为0*/
</style>
<div>
    <p>后代选择器</p>
    <ul>
        <li>
            <p>后代选择器</p>
        </li>
    </ul>
</div>

（六）子元素选择器

后代选择器,只能选择作为某元素子元素的元素；

前面的称为父元素，后面的称为子元素，中间用>（大于号）隔开

例子：

<style type="text/css">
    div>p{
        marigin: 0;
        padding: 0;
    }
    /*页面上所有div元素的所有子元素p的margin和padding都设置为0；该例子中只有第一个p元素的margin和padding都为0，第二个p元素的margin和padding都不为0*/
</style>
<div>
    <p>子元素选择器</p>
    <ul>
        <li>
            <p>子元素选择器</p>
        </li>
    </ul>
</div>

（七）相邻兄弟元素选择器

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。

例子：

<style type="text/css">
    li + li{
        marigin: 0;
        padding: 0;
    }
    /*该例子中会把列表中的第二个li和第三个li变为粗体。第一个li不受影响*/
</style>
<ul>
    <li>相邻兄弟元素选择器</li>
    <li>相邻兄弟元素选择器</li>
    <li>相邻兄弟元素选择器</li>
</ul>

（八）选择器分组

选择器分组是将具有相同样式的元素分组在一起，每个选择器之间使用，（逗号）。

例子：

<style type="text/css">
    li,h1,p{
        marigin: 0;
        padding: 0;
    }
    /*该例子中会把所有li元素、h1元素、p元素的margin和padding都设置为0。*/
    /*这个选择器我相信大家在reset样式文件中也经常见过*/
</style>
<ul>
    <li>选择器分组</li>
    <li>选择器分组</li>
    <li>选择器分组</li>
</ul>
<div>
    <h1>选择器分组</h1>
    <p>选择器分组</p>
</div>

注意：

1. id和class的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

2. id 属性只能在每个 HTML 文档中出现一次。具体原因XHTML:网站重构

喜欢的小伙伴们就打赏下（嘿嘿）

上期回顾：CSS回顾复习三（CSS书写规范、顺序和命名规则——CSS书写规范）

下期内容：CSS新手学习二（CSS创建和CSS执行顺序）