css引入和选择器

css引入方式：内嵌式（标签内使用style属性）、链接式（头部使用link标签引入外部css文件）、导入式（头部使用style标签，使用@import""导入外部css文件）
区别:链接式是加载页面主题前加载css文件，再编译显示
　　 导入式是先加载页面标签后加载样式文件，可能出现页面样式缺失的情况

 

css选择器:
选择器优先级：优先级取决于选择器权值大小　　　　　　　

• • 　　ID选择器 #{} +100
  • 　　类 属性 伪类 +10
  • 　　元素 伪元素 +1

则优先级为：!important > 内联样式 > id选择器 > 类选择器 > 标签选择器 

如果组合选择器都选中或都没选中元素，且出现权值相等，则就近原则，后面的覆盖前面

#id1 .class2 p{
    background: red;
    font-size: 20px;
}
.class1 #id2 p{
    background: blue;
}

<div id="id1" class="class1">
    <div id="id2" class="class2">
        <p>1</p>
    </div>
</div>

结果背景色显示为blue

同时选择器选中元素优先于没选中元素的，无关权值大小。

#id1 .class2{
    background: red;
    font-size: 20px;
}
p{
    background: blue;
}

结果显示blue

 

后代选择器：.class1 div (包括所有后代节点)
子代选择器：.class1>div (只匹配下一级子代节点）
动态伪类选择器：

　　　　　　:link 初始状态：第一次访问

　　　　　　:visited 访问后状态

　　　　　　:hover 鼠标悬停状态

　　　　　　:active 激活状态

　　　　　　该选择器按照l-v-h-a顺序关系，不然会出现覆盖失效。:hover必须出现在:visitied后面