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