XZ_HTML5之CSS的两大重点

1、属性
通过属性的复杂叠加才能做出漂亮的网页
2、选择器
通过选择器找到对应的标签设置样式
选择器的作用：选择对应的标签，为之添加样式
1>标签选择器：根据标签名找到标签
2>类选择器
格式：.类名

<p class="high">第一段文件</p>
<p>第二段文字</p>
<div class="high">div1</div>
<div>div2</div>

通过类选择器设置标签
.high{
    color:red;
}
结果："第一段文件"、"div1"的字体颜色是红色

3>id选择器：唯一
格式：#id

<p id="first">第一段文件</p>
<p>第二段文字</p>

通过id选择器设置标签
#first{
    color:red;
}
结果："第一段文件"的字体颜色是红色

4>并列选择器：多个标签有相同样式

<p class="high">第一段文件</p>
<p>第二段文字</p>
<div class="high">div1</div>
<div>div2</div>

通过并列选择器设置标签
div,.high{
    color:red;
}
结果："第一段文件"、"div1"、"div2"的字体颜色是红色

5>复合选择器：快速定位 相当于逻辑“与”

<p class="high">第一段文件</p>
<p>第二段文字</p>
<div class="high">div1</div>
<div>div2</div>

通过复合选择器设置标签
div.high{
    color:red;
}
结果："div1"的字体颜色是红色

6>后代选择器

<p id="first">第一段文件</p>
<p>第二段文字</p>
<div class="high">div1</div>
    <div>
        <p>div里面的p</p>
        <span>
            <p>div里面的span里面的p</p>
        </span>
    </div>
</div>
<p>外面的p</p>

通过后代选择器设置标签
div p{
    color:red;
}
结果："div里面的p"、"div里面的span里面的p"的字体颜色是红色

7>直接后代选择器

<p id="first">第一段文件</p>
<p>第二段文字</p>
<div class="high">div1</div>
    <div>
        <p>div里面的p</p>
        <span>
            <p>div里面的span里面的p</p>
        </span>
    </div>
</div>
<p>外面的p</p>

通过直接后代选择器设置标签
div p{
    color:red;
}
结果："div里面的p"的字体颜色是红色

8>相邻兄弟选择器

<div>
    <p>div里面的p</p>
    <span>
        <p>
            div里面的span里面的p
        </p>
    </span>
</div>
<p>与div相邻的p</p>
<p>与p相邻的p</p>

通过相邻兄弟选择器设置标签
div+p{
    color:red;
}
结果："与div相邻的p"的字体颜色是红色

9>属性选择器
一维：

<div name = "jack">1111</div>
<div name = "rose">2222</div>
<div>3333</div>

通过属性选择器设置标签
div[name] {
    color:red;
}
结果："1111"、"2222"的字体颜色是红色

二维：

<div name = "jack">1111</div>
<div name = "rose" age="20">2222</div>
<div age="10">3333</div>

通过属性选择器设置标签
div[name][age] {
    color:red;
}
结果："2222"的字体颜色是红色

通过属性选择器设置标签
div[name="jack"] {
    color:red;
}
结果："1111"的字体颜色是红色

10>伪类选择器：在对应的选择器后加冒号，加属性，当属性被激活、触发时改变样式

属性            描述
：active      向被激活的元素添加样式。
：focus       向拥有键盘输入焦点的元素添加样式。
：hover    当鼠标悬浮在元素上方时，向元素添加样式
：link        向未被访问的链接添加样式
：visited     向已被访问的链接添加样式。
：first-child 向元素的第一个子元素添加样式。
：lang        向带有指定lang属性的元素添加样式。