乐趣区

关于css:CSS选择器

jiezi

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:"---";
            }
退出移动版