HTML学习笔记记录---速预CSS（1） 选择器类型

选择器

选择器内可以写无数条属性

每行属性都得以英文分号结尾

选择器{

属性1：属性值1;

属性2：属性值2;

}

例：

p{
    color：blue;        颜色
    font-size：16px;    字号大小（像素）
}

样式表优先级：

内联样式（inline styles） 最高优先级

内部样式表（internal stylesheet）

外部样式表（extrnal stylesheet） 最低优先级

指令笔记：

link 导入文件 href 文件的路径

background-color 背景颜色

font-family：'名称'; 设定字体（须用单引号）

weight 字体粗细

选择器类型：

css选择器可以在"style"设置格式时对"h2、h3"这样的级别段落进行统一设置，也可以对"body"内容下所设定的"class"（类）或"id"进行统一设置。

类选择器：".名称{ }"格式。

id选择器："#名称{ }"格式。

元素选择器："名称{ }"格式。

通用选择器：

"*{ }"格式，"*"代表的是所有类型子元素选择器：".father > .son{ }"指father标签下的子元素，可以是"p、h2等及其他标签名称"

例如：

.father > .son{
            color: seagreen;
        }

<div class="father">
        <p class="son">子元素</p>
    </div>

后代选择器：

"father"下"div"是子元素。"div"中的"grandson"不是子元素，属于"孙子"级别为后代元素，所以须使用后代选择器".father p{ }"来对其修改样式属性。

例如：

.father p{
            color: gold;
        }

 <div class="father">
        <p class="son">子元素</p>
        <div>
            <p class="grandson">后代元素</p>
        </div>
    </div>

相邻元素选择器：

会将相邻并指定类型的元素标签赋予指定的属性。

例如：

 h3 + p{
            background-color: blue;
        }

<p>普通标签</p>
<h3>相邻元素选择器</h3>
<p>另一个普通标签</p>

此命令会给"h3"相邻的"p"标签添加蓝色底纹，他只能给"h3"下面的进行添加，无法对上面的进行修改。

同时若有标签隔开了"h3"与"p"则不进行任何效果修改。

<p>普通标签</p>
<h3>相邻元素选择器</h3>
<h2>隔开</h2>
<p>另一个普通标签</p>  

伪类选择器：

用于添加一些互动效果。

例如：当鼠标放在指定文本上时，会对文本的颜色进行修改，离开时恢复原样。

#weileitest:hover{
            color: brown;
        }

<h3 id="weileitest">鼠标悬停修改颜色</h3>