CSS的两大重点
属性
通过属性的复杂叠加才能做出漂亮的网页
选择器
通过选择器找到对应的标签设置样式
选择器的作用
选择对应的标签,为之添加样式
- 标签选择器
根据标签名找到标签
<div>div1</div>
<div>div2</div>
div{
color:red;
}
这两个标签显示都是红色
- 类选择器
类选择器的格式.类名
<p class="=@"higt">第一段文件</p>
<p>第二段文字</p>
<div class="higt">div1</div>
<div>div2</div>
.higt{
color: red;
}
第一段文字
跟 div1
是红色的字体
- id选择器
id选择器的格式#id
<p id="first">11111</p>
<p>222222</p>
#first{
color: red;
}
11111
是红色
id与class的区别:
id 的名字是唯一的,class可以加到多个标签中
- 并列选择器
<p class="higt">div1</p>
<p>div2</p>
<div class="higt">1111</div>
<div>2222</div>
div,.higt{
color: red;
}
除了div2
以外 都是红色
- 复合选择器
<p class="higt">div1</p>
<p>div2</p>
<div class="higt">1111</div>
<div>2222</div>
div.higt{
color: red;
}
只有1111
是红色
- 后代选择器
<div>
<p>11111</p>
<span>
<p>222222</p>
</span>
</div>
<p>外面的</p>
div p{
color: red;
}
111111
和222222
都是红色的
常用的就这些选择器,基本可以访问所有的标签了,后面还有
直接后代选择器,属性选择器,相邻兄弟选择器