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!

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

     
  • 相关阅读:
    C语言I博客作业02
    第一次C语言作业
    C语言I博客作业02
    网页常用分享代码
    js生成验证码并验证
    js时间格式的转换
    Git 常用命令
    ASP.NET MVC中使用事务写法
    数据库游标导入数据
    js截取所需字符串长度
  • 原文地址:https://www.cnblogs.com/MaricoCheung/p/13382820.html
Copyright © 2011-2022 走看看