CSS3（一）、介绍和选择器

1、css3的基本规则

　　　　css主要是由两种部分组成：选择器（selector）和声明（declarations）；

　　　　选择器：英文（selector），是开发者选择要修改样式的元素。

　　　　声明：英文（declarations），是开发者制定修改元素的规则，声明由属性和值组成。

　　　　属性：英文（property），是开发者希望设置的样式属性。

　　　　值：应为（value）,是属性的具体内容。

　　　　属性和值之间使用冒号（:）分开，声明和声明之间使用分号（;）分开。

　　　　声明需要用花括号包（{ }）起来。

　　　　css中的注释开头为（/*）结束为（*/）。

　　　　

2、css3的选择器

　　　　（1）、id选择器

　　　　　　html代码：id="值"，标签的id属性值是有且只有一个的，就好像人的身份证号码一样，没有相同的。

　<p id="intro">This is a paragraph of introduction</p>

　　　　　　css代码：ID 选择器前面有一个 # 号 - 也称为棋盘号或井号。

#intro {font-weight:bold;}

　　　　（2）、class选择器（类选择器）

　　　　　　class中文：班、种类。

　　　　　　html代码：class="值"，多个标签的class属性值是可以一样的，即是可以和其他元素一同使用该类样式。

<h1 class="important">
This heading is very important.
</h1>

<p class="important">
This paragraph is very important.
</p>

　　　　　　css代码：类选择用一个“.”英文点表示

.important{
    color: #0000FF;
}

　　　　（3）、属性选择器

　　　　　　html代码： 标签属性名=属性值，一个标签有多属性，一个属性可以给多个标签使用，下面是以title属性列子

<div title="hello">
    你好
</div>
<div title="hi">
    您好
</div>

　　　　　　css代码：用中括符表示：[]，也可以直接匹配属性与属性值“[属性=属性值]”，中间多了一个“~”表示选择该属性的属性值包含单词"h"的所有元素

[title]{
    color: #0000FF;
}
[title=hi]{
    background: #FFFF00;
}
[title~=h]{
　　background: #333333;
}

　　　　（4）、标签选择器

　　　　　　html代码：已标签名为选择器

<p>
    你好
</p>
<div class="important">
    您好
</div>
<div title="fine">
    我也好
</div>

　　　　　　css代码：直接使用标签名：标签名{css代码}，也可以联合属性选择器使用

p{
    color: #0000FF;
}
div[class]{
    background: #FF0000;
}
div[title=fine]{
    background: #0000FF;
}

　　　　（5）、子代选择器

　　　　　　html代码：子代元素选择器，就是寻找子节点，可以标签名、类名、id名选择子节点，注意子节点不包括后代节点

<div>
    <p>你好</p>
    <h1>
        <p>我没有样式</p>
    </h1>
</div>

　　　　　　css代码：用 “>” 号表示 下面代码表示选择了所有的div标签下的所有p标签，但是包括后代节点

div>p{
    background: yellow;
}

　　　　（6）、后代选择器

　　　　　　html代码：选择在当前标签的所有后代

<div>
    <p>你好</p>
    <h1>
    　　<p>我也被选中了</p>
    </h1>
</div>

　　　　　　css代码：用一个空格表示，下面表示选择了所有的div下的所有的p标签

div p{
    background: yellow;
}

　　　　（7）、相邻兄弟选择器

　　　　　　html代码：两个相邻的元素，下面就是一个p标签和一个h1标签是相邻的

<div>
    <p>你好</p>
    <h1>
        您好
    </h1>
</div>

　　　　　　css代码：用一个英文 “+” 号表示，选择了所有h1标签和p标签是相邻的两个标签

h1+p{
    color: #0000FF;
}　　　　

　　　　（8）、通用选择

　　　　　　通用选择是相对于所有标签的“*”

　　　　　　css代码：选择了所有标签的颜色为#0000FF，

*{    
    color: #0000FF;
}

　　　　（9）、伪类选择器

　　　　　　a标签的伪类

　　　　　　　　a:link：选择还没有访问的链接

　　　　　　　　a:visited：选择所有已经访问过的链接

　　　　　　　　a:active：选择活动的链接

　　　　　　a:hover：选择鼠标悬浮在元素上的标签

　　　　　　input:focus：选择具有焦点的输入元素

　　　　　　p:first-letter：选择p标签的文本第一个文字

　　　　　　p:first-line：选择p标签的文本最后一行

　　　　　　p:first-child：选择p标签是其父元素的第一个子标签的样式，第一个子元素

　　　　　　伪类选择器还有很多。我就不一一列出来了。

　　　　（10）、伪元素

　　　　　　p:before：在p标签之前插入元素

　　　　　　　　html代码：

<p>
    你好啊
</p>

　　　　　　css代码：content这个属性一定要写，可以为空，如果没有这个属性，该样式无效

p:before{
    content:"hi";    
    color: #0000FF;
}

 　　　　　　结果：

　　　　p:after：在p标签后面插入元素

　　　　　　html代码：

<p>
    你好啊
</p>

　　　　　　css代码：　　content这个属性也是一定要写

p:after{
    content:"hello";    
    color: #0000FF;
}

　　　

　　　　　结果：

　　　　伪元素可以做很多事情，不只是文字也还可以将伪元素设置成方框，毕竟在css里面一切皆为框。