关于css:CSS选择器

28次阅读

共计 1623 个字符,预计需要花费 5 分钟才能阅读完成。

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:"---";
            }

正文完
 0