CSS选择器

157 阅读2分钟

CSS选择器有以下几种:

  1. 元素选择器
  2. ID选择器
  3. 类选择器
  4. 属性选择器
  5. 通配符选择器
  6. 相邻兄弟选择器
  7. 子元素选择器
  8. 后代选择器
  9. 伪类选择器
  10. 伪元素选择器

可以继承的CSS属性有:font-size、font-family、color、text-indent、text-align、line-height、margin、padding、border、background、height、width、float、display等。

常见的伪类选择器包括:

  1. :hover - 鼠标悬停在元素上时触发
  2. :active - 当元素被激活时触发,例如鼠标按下时
  3. :focus - 元素获得焦点时触发,例如输入框被点击时
  4. :visited - 选择已经访问过的链接
  5. :nth-child() - 选择指定父元素的特定子元素
  6. :first-child - 选择父元素的第一个子元素
  7. :last-child - 选择父元素的最后一个子元素
  8. :not() - 排除指定的元素
  9. :checked - 选择被选中的表单元素
  10. :disabled - 选择被禁用的表单元素

还有很多其他的伪类选择器,可以根据具体的需求选择使用。

伪元素有哪些?

伪元素是CSS中的一种特殊选择器,用于对某个元素的特定部分进行样式设置。伪元素的语法与伪类选择器类似,但是使用的是双冒号"::"作为前缀,表示这是一个伪元素。

以下是常用的伪元素及其作用:

  1. ::before:在元素内部的前面插入一个虚拟元素,常用于在元素前面插入一些样式装饰,比如在列表前面插入箭头。
  2. ::after:在元素内部的后面插入一个虚拟元素,也常用于在元素后面插入一些样式装饰。
  3. ::first-letter:用于选择元素的第一个字符,可以设置字体大小、颜色、行高等样式。
  4. ::first-line:用于选择元素的第一行,可以设置行高、字体样式等样式。
  5. ::selection:用于选择元素中被用户选中的部分,可以设置选中文本的颜色、背景色等样式。
  6. ::placeholder:用于设置表单元素的占位符文本样式。
  7. ::marker:用于设置列表项的标记样式,比如序号或者圆点。
  8. ::backdrop:用于在弹出框等元素显示时,对背景进行样式设置,比如半透明遮罩。

注意,伪元素不是真正的元素,不能用于添加内容,只能用于样式设置。

CSS 选择器 - CSS:层叠样式表 | MDN (mozilla.org)