CSS-1选择器

Posted 2021-09-15 liu_kaiyao

1.css如何作用于html元素？

1. 外部link导入【外部样式表】
    将样式表通过 head标签内部的link标签引入
2. 内部style标签【内部样式表】
    在style标签内部书写样式
    <style>  </style>
3. 内联style属性【内联样式表】
    <div style=\'样式名:样式值;\'></div>
4. @import
    @import \'样式表的路径\';
    <style>
        @import \'./1-style.css\';
    </style>

link和@import的区别？

    1) 所属范围
        link 是html中标签，不仅仅可以导入样式表，还可以设置rel属性
            rel="stylesheet" 表示导入外部样式表
        @import 是css的语法，只能够导入样式表
    2) 加载顺序  
        link 导入的样式文件是在浏览器加载html文件的同时被加载
        @import 导入的样式文件，是在浏览器加载完html文件之后，再去加载
    3) 兼容性问题
        link是一个标签，不存在兼容性问题
        @import存在兼容性问题，IE低版本无法支持该语法

1. css选择器
   1) 基本选择器

   1. 标签选择器

      标签名 {
          样式名:样式值;
      }
      注意：
          1、标签选择器可以选中当前文件中所有具有该标签名的元素，而不是某一个
          2. 元素不论嵌套多少层，都可以被选中
          3. 只要是html的标签，都可以用于标签选择器

   2. 类名选择器

      .类名 {
          样式名:样式值;
      }
      注意：
          1、同一个文件中*类名允许重复*
          3、类名选择器存在命名规范问题
              数字、字母、下划线
              不能以数字开头
              不能以其他标签名作为类名
          4、同一个元素可以同时存在多个类名
              <div class=\'one two ...\'></div>
      

   3. id选择器

      #id {
             样式名:样式值;
          }
      注意：
          1、在同一个文件中id不允许重复
          2、id的命名规范与类名的一致
      

   4. 通配选择器

      用于选中当前文件中的所有元素
       * {
            样式名:样式值;
          }
      注意：
          通配选择器一般用于网页样式的初始化
      

   5. 逗号选择器
      给多个选择器选中的元素设置样式
      选择器一,选择器二 {

              样式名:样式值;
          }
      

   6. 组合选择器

      div.one
      

   2) 层次选择器

   1. 子代选择器

      含义:
          先选中具有标签名一的元素，再在该元素的**第一代子元素**中选中具有标签名二的元素
      语法：
          标签名一 > 标签名二 {
              样式名:样式值;
          }
      

   2. 后代选择器

      含义:
          先选中具有标签名一的元素，再在该元素的**所有子元素**中选中具有标签名二的元素
      语法：
          标签名一 标签名二 {
              样式名:样式值;
          }
      

   3. 兄弟选择器

      1、相邻兄弟选择器
          含义：先找具有标签名一的元素，然后选中该元素**后面紧跟**的元素，设置属性
          语法：
              标签名一 + 标签名二 {
                  样式名:样式值;
              }
          注意：  
              1、标签名的取值不仅仅可以实标签名，还可以是类名、id
              2、标签名一和标签名二的元素之间不能有其他元素
      2、通用兄弟选择器
          含义：先找具有标签名一的元素，然后选中该元素**后面所有**具有标签名二的元素，设置属性
          语法：
              标签名一 ~ 标签名二 {
                  样式名:样式值;
              }
      

3) 属性选择器

    一般用于区分input框
    语法：
        [attr]        包含该属性的元素都可以被选中  
        [attr=value]  属性值等于value的元素
        [atrr^=value] 以value属性值开始
      eg. form > input[name^=p]{ 
            border:3px solid brown;
        }

4) 伪类选择器

在其他选择器的后面使用: ,添加特殊的效果
1、与子元素相关
    :first-child 第一个孩子
    :last-child  最后一个孩子
    :nth-child(n) 第n个孩子
        n的取值
            数字(整数)
                1、2、3...
            英文字符
                odd奇、even
2、与状态相关
    :link   未被访问的链接
    :hover  光标悬浮
    :active 激活时的链接
    :visited 访问过的链接
    :focus  聚焦

5) 伪元素选择器

1、清除浮动
2、创建伪元素
3.   导航栏的侧边
在其他选择器的后面使用:: ,添加伪元素
::after{}
::before{}
 eg.     ul.nav::after{
            display:block;
            clear:both;
            content:"---";
            }

2、css选择器的优先级

1) !important
    width: 100px !important;
    具有!important的样式优先级最高
2) 选择器的权重
    1000 内联样式
        <div style=\'\'></div>
    100
        id选择器
    10
        类名选择器、伪类选择器、属性选择器
    1
        标签选择器、伪元素选择器

    div.test {} 10 + 1 = 11
    .test {} 10 
    #one {} 100
    <div id=\'one\' class=\'test\'></div>

3) 代码顺序
    就近原则：权重相等，谁的选择器离选中的元素近，谁的样式生效