夜灵的Html笔记Day05——CSS样式继承、基础选择器

1.css样式特征
   1.继承性
      大部分样式属性可以子元素继承
      body{
          color:red;
       }


      <div>继承body的样式特征</div>
   2.层叠性
      为一个元素定义多个选择器时，当样式声明不冲突时，
      多个样式层叠为一个元素所应用


   3.优先级
      如果样式冲突时，按照不同样式的优先级来应用样式
         内部样式与外部样式中（就近原则）
内联样式--最高
**:浏览器的缺省设置最低
  
 练习：给<div>元素设置内部样式要求字体颜色为蓝色，背景颜色为灰色，
       然后在外部样式表中设置其字体 颜色 为绿色，在网页中将外部样式表引入 进来
       查看页面效果？？？
       然后再设置内联样式字体为红色，背景颜色为黑色，查看页面效果？


    4.调整显示优先级
       !important 规则
         将!important添加到样式属性值的后面，中间用空格隔开
作用：调整显示的优先级
eg: 
   div{
      color:red !important;
   }


2.基础选择器
    选择器的作用：将定义好的样式匹配给页面中的元素
    1.通用选择器
        匹配页面中所的元素
语法：*{
        属性：属性值;
属性：属性值;
.....
     }
***:效率低，尽量少用
    2.元素选择器
       又称标签选择器，标记选择器
       作用：定义页面中某一元素的样式
       语法：
           由元素的名称作为选择器
  eg:
    div{}
    h3{}
    img{}
    header{}
    3.类选择器
        通过元素所附带的class属性值对选择器进行引用
语法：
   .类名{
      样式声明
      ......
   }
特点：
 一段公共的样式，谁想用，谁就可以引用
***:
   自定义类名不能以数字开头，不能包含特殊字符($,%,^,&,@,#),可以包含(-,_)
eg:
  <p class="类名">内容</p>


        多类选择器：
  允许让一个元素应用多个类选择器
     <p class="类名1 类名2 类名3">内容</p>
分类选择器：
  将元素选择器和类选择器联合使用，从而实现对元素的不同样式的细分控制
  语法：
     元素选择器.类选择器{
              样式声明
        }
    4.id选择器
    5.群组选择器
    6.后代选择器
    7.伪类选择器