美文网首页
2017-12-31

2017-12-31

作者: 加加大叔 | 来源:发表于2017-12-31 02:13 被阅读0次

    CSS选择器:

    1. 元素选择器、类选择器、id选择器
    2. 属性选择器:
    a[title] //带有title属性的a元素
    a[href="https://example.org"] //href值等于“https://example.org”的a元素
    a[href*="example"] // href属性值包含“example”的a元素
    a[href$=".org"] //href属性值结尾为“.org”的a元素
    

    3.兄弟选择器:

    • 相邻兄弟选择器
      前方元素 + 目标元素 {样式声明 } :匹配紧跟其前方元素的同胞(同一个父级)元素
      eg:li + li { }
    • 通用兄弟选择器
      元素 ~ 元素 {样式声明 } :查找某一个指定元素的后面的所有兄弟结点。
      eg:p ~ span{ } :P元素后面所有同一父级下的span元素
    • 子选择器、后代选择器

    伪类

    • :hover
    • :link(选择未被访问的链接的)
    • :active (激活)通常但不限于<a>和<button>
    • :visited(被访问过的)通常用于<a>

    • :checked
      表示任何处于选中状态的radio(<input type="radio">), checkbox (<input type="checkbox">) 或("select") 元素中的option HTML元素("option"))

    伪元素和伪类的区别

    1. 伪类本质上是为了弥补常规CSS选择器的不足,以便获取到更多信息;
    2. 伪元素本质上是创建了一个有内容的虚拟容器;

    相关文章

      网友评论

          本文标题:2017-12-31

          本文链接:https://www.haomeiwen.com/subject/iyhogxtx.html