CSS选择器

CSS选择器

4种 基本选择器

* 通配符选择器

• 选择所有标签

  • padding:0
  • margin:0
  • box-sizing:border-box

标签选择器

• 选择所有匹配标签

  • 一般前面会带有其他完整选择器

类名选择器

• 选择匹配类名

  • 区分页面模块最常用

id选择器

• 选择匹配id

  • 多用于js元素交互

5种 符号选择器

逗号选择器

• 两边独立 满足一个即可

  • ul,ol,li

    • list-style:none

空格选择器

• 两边独立 右边是左边子孙元素

  • .container .nav

大于号选择器

• 两边独立 右边是左边直接子元素

  • .container>div

加号选择器

• 两边独立 右边是左边下一个紧邻元素

  • .container .item+.item

    • 不选第一个

波浪号选择器

• 两边独立 右边是左边下面的元素 同级 父元素

6种 属性选择器

[attr]

• 拥有属性attr即可

  • [name]

[attr=“val”]

• 拥有属性attr 并且值是val

  • [type=“checkbox”]

[attr^=“val”]

• 拥有属性attr 并且值是val开头

  • [class^=“w”]

[attr$=“val”]

• 拥有属性attr 并且值是val结尾

  • [class$=“0”]

[attr*=“val”]

• 拥有属性attr 并且值包含val val是值得一部分

  • [title*=“-”]

[attr~=“val”]

• 拥有属性attr 并且其中一个值是val

  • 类名选择器

    • [class~=“inline-block”]

7种

伪类选择器

• 状态伪类

  • :checked

    • input:checked+label

      • 伸缩菜单
      • 单选框选中放大

  • :disabled

    • 元素禁用

      • 各种灰色

  • :enable

    • 元素启用

  • :focus

    • 聚焦

      • outline

  • :blur

    • 失焦

• 动态伪类

  • ：link

    • 超级链接未访问

      • 默认蓝色

  • :visited

    • 超级链接访问过

      • 默认紫色

  • :hover

    • 所有标签鼠标划入

      • a:hover{color:red}

  • :active

    • 所有标签鼠标点击

      • span:active{font-size:50px}