CSS 选择器

选择器

  • 选择器：帮助你精准的选中想要的元素

简单选择器

  • ID选择器

  • 元素选择器

  • 类选择器

  • 通配符选择器

  • *:选中所有元素

  • 属性选择器

  • 根据属性名和属性值选中元素

  • 伪类选择器

  • 选中某些元素的某种状态 书写顺序：

    • .link：超链接未访问下的状态
    • .visited 超链接访问后的状态
    • .hover：鼠标悬停状态
    • .active：激活状态，鼠标按下状态

  • 爱恨法则：love hate

选择器的组合

  1. 并且
  2. 后代元素——空格
  3. 子元素—— >
  4. 相邻兄弟元素—— +
  5. 兄弟元素—— ~

选择器的并列

  • 多个选择器，用逗号分隔
  • 语法糖

CSS3新增选择器

  • 新增的CSS3选择器有兼容性问题，ie9+才支持
  • 属性选择器
  • 结构伪类选择器
  • 伪元素选择器

属性选择器

<style>
        <!-- 必须是input 但是同时具有value这个元素 -->
        input[value] {
            color: red;
        }
</style>
</head>
<body>
    <input type="text" value="请输入用户名">
    <input type="text" >
</body>

  • 利用属性选择器就可以不用借助于类或者id选择器
    • E[att] 选择具有att属性的E元素
    • E[att="val"] 选择具有att属性且属性值等于val的E元素
    • E[att^="val"] 匹配具有att属性且属性值以val开头的E元素
    • E[att$="val"] 匹配具有att属性且属性值以val结尾的E元素
    • E[att*="val"] 匹配具有att属性且属性值含有val的E元素

结构伪类选择器

更多的伪类选择器

  • :first-child

  • 选择第一个子元素（必须是x元素，必须是第一个子元素）

  • first-of-type，选中子元素中第一个指定类型的元素

  • :last-child

  • 同first-child

  • :nth-child()

  • 选中指定的第几个子元素

  • even:关键字，等同于2n

  • odd:关键字，等同于2n+1

  • :nth-of-type()

  • 选中制定的子元素中的第几个某类型的元素

更多的伪元素选择器

  • first-letter

  • 选中元素中的第一个字母

  • first-line

  • 选中元素中第一行的文字

  • selection

  • 选中被用户框选的文字

伪元素选择器

  • 伪元素选择器可以帮助我们利用CSS3创建新标签元素，不需要用到HTML标签，从而简化HTML结构

  • ：：before 在元素内部的前面插入内容

  • ：：after 在元素内部的后面插入内容

  • 注意：

    • before和after创建一个元素，但是属于行内元素
    • 新创建的这个元素在文档树中是找不到的，所以我们称之为伪元素
    • 语法：**element::before{}
    • before和after必须有content属性
    • 伪元素选择器和标签选择器一样，权重为17. 伪元素选择器

  • 伪元素选择器可以帮助我们利用CSS3创建新标签元素，不需要用到HTML标签，从而简化HTML结构

  • ：：before 在元素内部的前面插入内容

  • ：：after 在元素内部的后面插入内容

  • 注意：

    • before和after创建一个元素，但是属于行内元素
    • 新创建的这个元素在文档树中是找不到的，所以我们称之为伪元素
    • 语法：**element::before{}
    • before和after必须有content属性
    • 伪元素选择器和标签选择器一样，权重为1
posted @ 2020-03-06 19:40  懒惰ing  阅读(174)  评论(0)    收藏  举报