• CSS高级选择器


    07.31自我总结

    CSS高级选择器

    一.伪类选择器

    • 对于之前的类选择器的补充类再定义一个别名

    举例

    <div class='a a-1'>123</div>
    其中a为类,a-1为伪类,伪类也是一种类,他们之间用宫格隔开
    我们选择该标签的时候可以.a.a-1,也有.a,也可以.a-1
    

    常用的两个伪类选择器

    伪类选择器都是用:连接的

    • 类名:nth-child(N):先确定位置,再筛选选择器
      • 在同一结构下都是相同选择器时使用
    • 类名:nth-of-type(N):先确定选择器,在匹配位置
      • 在同一结构下不全是相同选择器时使用

    举例

    <div>
        <!--不同结构-->
        <p class="p">第1个p</p>
        <h1>1</h1>
        <p class="p">第2个p</p>
        <p class="p">第3个p</p>
        <p class="p">第4个p</p>
        <p class="p">第5个p</p>
    </div> 
    <div>
        <!--同结构-->
        <p class="p">第1个p</p>
        <p class="p">第2个p</p>
        <p class="p">第3个p</p>
        <p class="p">第4个p</p>
        <p class="p">第5个p</p>
    </div> 
    样式设置为
    p:nth-child(2){
    	color:red
    }
    <!--他会先找p找到第2个,然后让他变色成红色,如果第二个不是p他就不起作用-->
    p:nth-of-type(3){
    	color:red
    }
    <!--他会先找p然后往下找找到p计数才+1直到计数为2,他会让他变色成红色,如果第二个不是p他就不起作用-->
    

    二.后代(子代)选择器

    • 后代选择器:

      CSS语法:上一级标签他所有的后代用宫格进行连接

    • 子带选择器

      CSS语法:父节点标签后他子节的用>进行连接

    • 注意点:连接的子代或者后代不能用他们的标签名

    举例说明:

    <body>
        <h2 id="h2">h2标签</h2>
        <div>
            <h2 id="h2">div下的h2</h2>
        </div>
    </body>
    <!--我们要body下的所有h2类标签字体都是红色-->
    div .h2{
        color:red;
    }
    <!--我们只要body下的h2类标签字体都是红色-->
    div>.h2{
        color:red;
    }
    

    三.兄弟(相邻)选择器

    • 兄弟选择器:~进行连接,他是找到前者后他会接着找后者然后会一直遍历结束把所有的后者多找到
    • 相邻选择器:+进行连接,他是找到前者后,在前者后面的相邻的才会选中,如果没相邻他会接着找第二个前者
    • 注意
      • 选择器放置位置前与放置位置后,会有影响有点类似正则匹配先匹配到第一个然后匹配第二个
      • 他所改变的是他们后者而不是两个都改变
      • 兄弟(相邻)选择器首先他们要是兄弟节点

    四.属性选择器

    • 属性选择器优先级同类
    • [属性名]查找所有有该属性的标签
    • [属性名=属性值]精确查找
    • [属性名^=值]以某某值开头
    • [属性名$=值]以某某值结尾
    • [属性名*=值]包含某某值(模糊查询)

    五.交叉选择器

    就是把上述的选择进行组合,包括之前讲的基础选择器

    六.群组选择器

    就是把上述的选择器用包括之前讲的基础选择器,隔开从而选择多个元素

    七.选择器的优先级

    • 权值:不同级别没有可比性、同一级别比个数、选择器类型不影响优先级、优先级一致看顺序
    • 对于权值有些人对他级别的定义
      • 标签 10
      • 类(伪类)100
      • id 1000
      • !important 10000
  • 相关阅读:
    scroll事件实现监控滚动条改变标题栏背景透明度(zepto.js )
    瀑布流-转载
    如何清除img图片下面有一片空白
    加减号改变input[type=number]的数值,基于[zepto.js]
    如何移除HTML5的type=""number""的input标签的上下箭头
    滑屏框架
    GO_06:GO语言基础之struct
    GO_05:GO语言基础map与函数
    GO_04:GO语言基础条件、跳转、Array和Slice
    GO_03:GO语言基础语法
  • 原文地址:https://www.cnblogs.com/pythonywy/p/11276513.html
Copyright © 2020-2023  润新知