css选择器

最新推荐文章于 2023-09-03 14:05:10 发布

水无月泪

最新推荐文章于 2023-09-03 14:05:10 发布

阅读量110

点赞数 1

文章标签： css html5 html

本文链接：https://blog.csdn.net/m0_60502228/article/details/119827605

版权

作用：选择元素

    1.核心选择器
      1）标签选择器
        div{
            规则；
            规则；
            ...
        }
        选中标签为div的所有元素
      2）id选择器
        #id{
            规则；
            规则；
            ...
        }
      3)类选择器
        .class{
            规则；
            规则；
            ...
        }
      4）普遍选择器
        *
    2.层次选择器
      1）后代选择器
        ul li{
            规则；
            规则；
            ...
        }
        选中ul下面的所有li
      2）子代选择器
        .bottom>p{
            规则；
            规则；
            ...
        }
        选中class为bottom的直接子元素p
      3）相邻同胞选择器
        .jiangsu+li{
            规则；
            规则；
            ...
        }
        选中class为江苏这个元素的下一个兄弟元素
      4）一般同胞选择器
        .jiangsu~li{
            规则；
            规则；
            ...
        }
        选中class为江苏这个元素的所有兄弟元素
    3.多选择器
      1）逗号选择器
        h1,h2,h3,.test{
            规则；
            规则；
            ...
        }
        选中h1，h2，h3，class为test的元素
      2)组合选择器（嵌套选择器）
        a.baidu{
            规则；
            规则；
            ...
        }
        选中class为百度的a标签
4. 属性选择器
      [attr] 选中具有attr属性的元素、不管属性的值为多少
      [attr=val] 选中具有attr属性、并且值为val
      [attr^=val] 选中具有attr属性、并且值以val开头
      [attr$=val] 选中具有attr属性、并且值以val结尾
      [attr*=val] 选中具有attr属性、并且值包含val
      [attr~=val] 选中具有attr属性、并且其中一个值为val

   5. 伪类选择器
      子代元素相关的伪类选择器
        ul:first-child{
            规则；
            规则；
            ...
        }
        选中ul的第一个孩子
        ul:last-child{
            规则；
            规则；
            ...
        }
        选中ul的最后一个孩子
        ul:nth-child（参数）{
            规则；
            规则；
            ...
        }
        参数的取值：
          1）数字
          2）关键字（odd=奇数，even=偶数）
        选中参数值的孩子
      元素状态相关的伪类选择器
        :hover 鼠标悬停在上面时
        :link 未被访问时
        :visited 已访问过时

    6.伪元素选择器
      ：：after 选中之后不存在的元素
      ：：before 选中之前不存在的元素

优先级
1.权重（特性值）
    行内元素（声明在元素的style属性中），权重为1000
    包含在一个选择器中的所有ID选择器，权重为100
    包含在一个选择器中的所有类选择器，属性选择器，伪类选择器，权重为10
    包含在一个选择器中的所有元素选择器，伪元素选择器，普遍选择器，标签选择器，权重为1
2.后面的样式会覆盖前面的样式