3、学什么之前端CSS选择器

学什么之前端SS选择器，本文全文阅读大约4分钟

CSS选择器

• 并集：对选择器进行分组，被分组的选择器可以分享相同的声明。用逗号将需要分组的选择器开分。
  • h1,h2,h3,h4,h5,h6{}
• 交集：两种属性同属一个元素
  • p.name{}、p#id{}、.name1.name2{}
• 后代（派生）：根据元素在位置上的关系定义样式，使用空格隔开，后代选择器尽量不要超过3个，不必把每个层级都列出，只需要写关键点即可
  • li strong {}
• 子代：只能选择作为某元素的子元素，只选择子代，往后孙子一代不选择
  • h1 > strong {}
• 兄弟和相邻兄弟：选择紧接在另一元素后的，并且二者有相同父元素
  • h1 + p {}
• 属性：对带有指定属性的HTML元素设置样式，权重为10
  • 属性选择器：为带有title属性的所有元素设置样式，[title] {}
  • 属性和值选择器：为title="name"的所有元素设置样式，[title=name] {}
  • 设置表单的样式：input[type="text"] {}
• 伪类：
  • :active：被激活的元素
  • :focus：有键盘输入焦点的元素
  • :hover：鼠标悬停
  • :link：未被访问的链接
  • :visited：已被访问的链接
  • :first-child：元素的第一个子元素
  • :lang：带有指定lang属性的元素

• 权重：

  • div（1）
  • class/类选择器（10）
  • id（100）

• 结构选择器（新增伪类（面试题））

  • :not：排除
  • :nth-child(n)：第几个元素 从1开始设置
  • :nth-child(2n)：偶数元素 从0开始设置
  • :nth-child(2n+1)：奇数元素
  • :nth-of-type(n)：某个元素下同类型的第几个元素
  • :nth-last-child：倒数第几个元素
  • :first-child->:nth-child(1)：
  • :fisrt-of-type：第一个同级兄弟元素
  • :last-of-type：最后一个同级兄弟元素
  • :nth-of-type(n)：第几个同级兄弟元素
  • :last-child：最后一个子元素
  • :only-child：仅有一个子元素
  • :only-of-type：只有一个同类型的子元素
  • :empty：空内容
  • :checked：被选中 主要用在input表单元素

• 属性选择器

  • E[attr=val]：
  • E[attr|=val]：只能等于val 或只能以val-开头
  • E[attr*=val]：包含val字符串
  • E[attr~=val]：属性值有多个，其中一个是val
  • E[attr^=val]：以val开头
  • E[attr$=val]：以val结尾

• 目标伪类选择器

  • :target()：用来匹配URL指向的目标元素（存在URL指向该匹配元素时，样式效果才会生效）

• 伪元素：

  • :first-line：匹配首行文本，只能用于块级元素
  • :first-letter：匹配首字符
  • :before/:after：DOM元素前后插入额外的内容
    • 遇到伪元素before/after就要加上content=''
    • display: block;：独占一行
    • display: inline-block;：不独占一行