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里
ca8a
面的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属性的元素添加样式。