CSS四种样式导入方式
行内式
<h1 style="color:red;">我是一个主标题</h1>
内嵌式
<style>
h1{
color:red;
}
</style>
<h1>我是一个主标题</h1>
外链式
<link ref="stylesheet" href="css/css.css">
导入式
<style>
@import url(css/css.css);
</style>
选择器
id选择器
<style>
.para1{
color:red;
}
</style>
<p id="para1">我是段落</p>
类选择器
<style>
#warning{
color:red;
}
</style>
<p class="warning">我是段落</p>
标签选择器
span {
color: red;
}
复合选择器
后代选择器
.box p {
color:red;
}
div.box p.spec em {
color: red;
}
后代选择器不仅仅是儿子，还可以是孙子或者更深层次
交集选择器
h3.spec {
font-style: italic;
}
h3标签并且类名是spec
并集选择器
ul, ol {
list-style: none;
}
同时选择 ul和ol
伪类
伪类主要用于定义元素的特殊状态，他们不是类，他们不是类，而是表示了元素处于特定状态时的样式变化 通俗来说，伪类依附于已存在的元素，使用冒号（：）作为表示，描述元素某特性或状态下的样式
a:link 未访问的链接
a:visited 已访问的链接
a:hover 鼠标悬停状态
a:active 鼠标点击（按下不放）时激活
元素关系选择器
子选择器
div>p div的子标签p
相邻兄弟选择器
img+p img后面紧跟着的p
通用兄弟选择器
p~span p后面所有同层级的span
序号选择器
:first-child 第一个元素
.box1 p:first-child {
color: red;
}
类box1 中的第一个p元素，如果第一个元素不是p则不生效
p:last-child 最后一个元素
p:nth-child(3) 第三个元素
p:nth-of-type(3) 第三个p类型的元素
p:nth-last-child(3) 倒数第三个p元素，如果第三个不是p则不生效
p:nth-last-of-type(3) 倒数第三个p类型的元素
