XZ_HTML之CSS的两大重点

1、属性

通过属性的复杂叠加才能做出漂亮的网页

2、选择器

通过选择器找到对应的标签设置样式

选择器的作用：选择对应的标签，为之添加样式

1>标签选择器：根据标签名找到标签

2>类选择器

格式：.类名

<p class="high">第一段文件</p>
<p>第二段文字</p>
<p class="high">p1</p>
<p>p2</p>

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

3>id选择器：唯一

格式：#id

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

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

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

<p class="high">第一段文件</p>
<p>第二段文字</p>
<p class="high">p1</p>
<p>p2</p>

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

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

<p class="high">第一段文件</p>
<p>第二段文字</p>
<p class="high">p1</p>
<p>p2</p>

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

6>后代选择器

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

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

7>直接后代选择器

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

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

8>相邻兄弟选择器

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

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

9>属性选择器

一维：

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

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

二维：

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

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

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

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

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