CSS书写位置+选择器+选择器权重

CSS3基础入门1

CSS3书写位置

1. 内嵌式

   内嵌在.html文件中，在head标签对中，书写style标签对，书写CSS语句

2. 外链式

   可以将CSS单独存为.CSS文件，然后使用link标签引入它，多个html网页，可以共用一个css样式表文件

   <link rel="stylesheet" href="css/css.css">
   

3. 导入式

   导入式是最不常见的样式导入方法，因为使用导入式引入的样式表，不会等待css文件加载完毕，而立即渲染HTML结构，所以页面会有几秒时间没有css样式

   <style>@import url(css/css.css);</style>
   

4. 行内式

   样式可以直接通过style属性写在标签身上，行内式牺牲了样式表的批量设置样式的能力

   <h2 style="color:red;">我是一个二级标题</h2>
   

CSS3选择器

1. 元素选择器

   ①标签选择器也称做元素选择器、类型选择器，它直接使用元素的标签名当做选择器，将选择页面上所有该种标签

   ②标签选择器将选择页面上所有该种标签，无论这个标签所处位置的深浅

2. id选择器

   ①标签可以有id属性，是这个标签的唯一标识

   ②id的名称只能由字母、数字、下划线、短横构成，且不能以数字开头，字母区分大小写

   ②CSS选择器可以使用井号#前缀，选择指定id的标签

   <p id="para1">我是一个标签</p>
   //选择器
   #para1{
   color:red;
   }
   

3. class选择器

   ①class命名规范和id的命名规范相同

   ②使用点.前缀选择指定class的标签

   <p class="warning">我是段落</p>
   //选择器
   .warning{color:red;}
   

   ③同一个标签可以同时属于多个类，类名用空格隔开

   <p class="warning spec">我是段落</p>
   //选择器
   .warning{
       color:red;
   }
   .spec{
        color:red;
   }
   

   ④原子类

   a. 在做网页项目前，可以将所有的常用字号、文字颜色、行高、外边距、内边距等都设置为单独的类

   b.HTML标签就可以“则需选择”它的类名，这样就可以非常快速的添加一些常见样式

4. 复合选择器

   ①交集选择器

   ②并集选择器

   ③后代选择器

5. 伪类和伪元素
   ①伪类：指定要选择的元素的特殊状态

   a标签的伪类书写，要按照顺序(:link->:visited->:hover->:active)，否则会有伪类不生效

   超级链接的四个特殊状态

   伪类          意义
   a:link       没有被访问的超级链接
   a:visited    已经被访问过的超级链接
   a:hover      正被鼠标悬停的超级链接
   a:active     正被激活的超级链接(按下按键但是还没有松开按键)
   

②伪元素

表示虚拟动态创建的元素，伪元素用双冒号表示，IE8可以兼容单冒号

a.(::before)创建一个伪元素，其将匹配选中的元素的第一个元素，必须设置content属性表示其中内容

b.(::after)创建一个伪元素，其将成为匹配选中的元素的最后一个子元素，必须设置content属性表示其中内容

a::before{
    content:'☆'
}
a::after{
    content:'○'
}
//html代码
 <a href="">我是超链接</a>
 <a href="">我是超链接</a>
 <a href="">我是超链接</a>

c.(::selection）应用于文档中被用户高亮的部分（使用鼠标圈选的部分）

d.(::first-letter)会选中某元素中（必须是块级元素）第一行的第一个字母

e.(::first-line)会选中某元素中（必须是块级元素）第一行全部文字

6. 元素关系选择器

   ①子选择器（>）（从IE7开始兼容）

   //html代码
   <div class="box">
         <p>我是段落</p>//子代，有效
         <p>我是段落</p>//子代，有效
         <div>
           <p>我是段落1</p>//孙子代，无效
         </div>
       </div>
   
   //CSS子选择器，只对子代有效
   .box>p{
   color:red;
   }
   

   ②相邻兄弟选择器（+）（从IE7开始兼容）

    //html代码
    <img src="images/0.jpg">
       <span>我被选择</span>//有效
       <span>我不被选择</span>//无效
       
   //CSS相邻兄弟选择器，只选择紧跟着后面的标签
   img+span{
   	color:green;
   }
   

   ③通用兄弟选择器（~）（从IE7开始兼容）

   a~b选择a元素之后所有同层级b元素

   //html代码
   <p>我是段落1</p>
       <span>我是后面的span</span>
       <span>我是后面的span</span>
       <span>我是后面的span</span>
       <div>
         <span>我是后面的后面的span</span>
         <span>我是后面的后面的span</span>
       </div>
       <h2>标题2</h2>
       <span>我是后面的span</span>
   //a~b选择a元素之后所有同层级b元素
   p~span{
         color: red;
         background-color: royalblue;
       }
   

7. 序号选择器

   <div class="box1">
       <p>1</p>
       <p>2</p>//无效
       <p>3</p>//无效
     </div>
   //序号选择器
   .box1 p:first-child{
         color: red;
       }
   

8. 属性选择器（IE9开始兼容）

 <img src="images/bj/0.jpg"alt="北京故宫">
   <img src="images/bj/0.jpg"alt="北京故宫">
   <img src="images/bj/0.jpg">//无效
//属性选择器
img[alt=""]{
      border: 3px solid red;
    }

选择器权重计算

1. 层叠性：多个选择器可以同时作用于同一个标签，效果叠加

2. 层叠性的冲突处理：id权重>class权重>标签权重

    p{
        color:red;
      }
      #para{
        color:green;
      }
      .spec{
        color: blue;
      }
   //html
   <p id="para" class="spec">我是段落</p>
   //我是段落（绿色）
   

3. 复杂选择器权重计算

   复杂选择器可以通过（id的个数，class的个数，标签的个数）的形式，计算权重

   //权重（2,0,1）
   #box1 #box2 p{
        color:red;
      }
   //权重（2,1,2）->权重最大，输出结果为绿色文字
      #box1 div .box2 #box3 p{
        color:green;
      }
   //权重（0,3,1）
      .box1 .box2 .box3 p{
        color:blue;
      }
   //html代码
   <div id="box1" class="box1">
       <div id="box2" class="box2">
         <div id="box3" class="box3">
           <p>我是段落</p>
         </div>
       </div>
     </div>
   

4. !important提升权重(不常使用)

   如果我们需要将某个选择器的某条属性提升权重，可以在属性后面写!import

   .spec{
       color:blue !important;
   }