zoukankan      html  css  js  c++  java
  • CSS选择器区别




    "竞争永远只有一个冠军,但我们依然可以选择做自己的盖世英雄。赶快披上漂亮的CSS外衣,好好表现自己一番吧。"
    ——有心人做有心事哦,晚安EmilyChen!





    (一)单一

    【1】属性选择器
    p[alt] 选择具有att属性的 p元素
    p[alt="val"] 选择att属性值 等于val的p
    p[alt^="val"] 匹配att属性值 以val开头的p
    p[alt$="val"] 匹配att属性值 以val结尾的p
    p[alt*="val"] 匹配att属性值 含有val的p

    【2】id选择器
    <h1 id="goods">建下锚点
    <a href="#goods">接上连结



    (二)复合

    【3】伪类
    常见伪类(DOM已有元素,单冒号) :hover 鼠标经过
    :focus 焦点
    结构伪类(DOM已有元素,单冒号) p:first-child 匹配父元素中的第一个子元素p
    p:last-child 父元素中的最后一个p
    p:nth-child(n) 父元素中的第n个p
    公式 n是数字、关键字,从0算起
    2n 偶数even
    2n+1 奇数odd
    5n 5 10 15
    n+5 从第5个开始(包含第5个)
    -n+5 选择前5个
    p:first-of-type 指定类型E的第一个
    p:last-of-type 指定类型E的最后一个
    p:nth-of-type(n) 指定类型E的第n个
    伪元素(创建DOM元素,但属于行内元素(用于盒子里的小图标),双冒号) p::before p元素内容的前面,加content(必须)
    p::after p元素内容的后面,加content(必须)





    作者:MaricoCheung
    出处:http://www.cnblogs.com/MaricoCheung/
    ——有心人做有心事哦,晚安EmilyChen!

    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

     
  • 相关阅读:
    解决百度网盘倍速需要会员问题
    npm run dev其实就是vue-cli-service serve
    git常见操作和git原理
    ajax promise三种状态
    ajax get请求
    vue2.0x methods中一个函数调用另外一个函数
    Web前端开发规范之文件存储位置规范
    大数据应用期末总评
    分布式文件系统HDFS 练习
    安装Hadoop
  • 原文地址:https://www.cnblogs.com/MaricoCheung/p/13382820.html
Copyright © 2011-2022 走看看