W3C CSS文档 | 5.selector 选择器,自己的学习笔记&翻译,欢迎指正

date
Mar 29, 2021
slug
css-w3c-selector
status
Published
tags
CSS
type
Post
summary
selector 选择器,自己的学习笔记&翻译

选择器

通配符选择器

元素选择器(type selectors)

后代选择器

用空格分隔
notion image

子选择器

用大于号来链接
后代选择器可以跨多个级别
子选择器只能选择他的亲孩子
notion image

相邻兄弟选择器

语法是e1 + e2
  • e2是被选择的
  • 如果e1是e2他俩父级是一个标签,并且e1在e2前面
notion image

属性选择器

  1. [att] <--选择所有的带这个属性的元素-->
    1. [att=val]
      notion image
      1. [att~=val]
        notion image
        1. [att|=val] 暂时还不懂

        类选择器

        .cls

        id选择器

        伪元素和伪类选择器

        伪类选择器

        :first-child pseudo-class

        这样的话,第二个p就不会被选中了
        例子3

        The link pseudo-classes: :link and :visited

        1. a:link表示未被访问的链接;a:visited表示已访问的链接

          The dynamic pseudo-classes: :hover, :active, and :focus

          1. a:hover 鼠标悬停上面的
          1. a:active选择活动的链接
          3.:lang

          伪元素

          :first-line

          :first-letter
          notion image

          The :before and :after pseudo-elements

          会在选择标签后面插入内容

          © dana 2023 - 2025