就业培训     下载中心     Wiki     联络
登录   注册
  1. 首页
  2. CSS
  3. Pseudo-elements

在此页

A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). For example, ::first-line can be used to change the font of the first line of a paragraph. 

/* The first line of every <p> element. */
p::first-line {
  color: blue;
  text-transform: uppercase;
}

注意： In contrast to pseudo-elements, pseudo-classes can be used to style an element based on its state .

句法 

selector::pseudo-element {
  property: value;
}

You can use only one pseudo-element in a selector. It must appear after the simple selectors in the statement.

注意： As a rule, double colons ( :: ) should be used instead of a single colon ( : ). This distinguishes pseudo-classes from pseudo-elements. However, since this distinction was not present in older versions of the W3C spec, most browsers support both syntaxes for the original pseudo-elements.

索引

Pseudo-elements defined by a set of CSS specifications include the following:

A B C F G M P S

规范

规范 状态 注释
CSS Level 1 推荐 Defined pseudo-classes and pseudo-elements.

浏览器兼容性

Browser Lowest Version Support of
Internet Explorer 8.0 :pseudo-element
9.0 :pseudo-element ::pseudo-element
Firefox (Gecko) 1.0 (1.0) :pseudo-element
1.0 (1.5) :pseudo-element ::pseudo-element
Opera 4.0 :pseudo-element
7.0 :pseudo-element ::pseudo-element
Safari (WebKit) 1.0 (85) :pseudo-element ::pseudo-element

另请参阅

元数据

  • 最后修改：
  1. CSS
  2. CSS 参考
  3. CSS Selectors
  4. 指南
    1. Using the :target pseudo-class in selectors
  5. 特性
    1. 选择器列表
  6. Basic Selectors
    1. Type selectors
    2. Class selectors
    3. ID selectors
    4. Universal selectors
    5. Attribute selectors
  7. 组合器
    1. Adjacent sibling combinator
    2. General sibling combinator
    3. Child combinator
    4. Descendant combinator
    5. Column combinator
  8. Pseudo-classes
    1. :active
    2. :any-link
    3. :checked
    4. :blank
    5. :default
    6. :defined
    7. :dir()
    8. :disabled
    9. :empty
    10. :enabled
    11. :first
    12. :first-child
    13. :first-of-type
    14. :fullscreen
    15. :focus
    16. :focus-visible
    17. :focus-within
    18. :has()
    19. :host()
    20. :host-context()
    21. :hover
    22. :indeterminate
    23. :in-range
    24. :invalid
    25. :is() (:matches(), :any())
    26. :lang()
    27. :last-child
    28. :last-of-type
    29. :left
    30. :link
    31. :not()
    32. :nth-child()
    33. :nth-last-child()
    34. :nth-last-of-type()
    35. :nth-of-type()
    36. :only-child
    37. :only-of-type
    38. :optional
    39. :out-of-range
    40. :placeholder-shown
    41. :read-only
    42. :read-write
    43. :required
    44. :right
    45. :root
    46. :scope
    47. :target
    48. :valid
    49. :visited
    50. :where()
  9. Pseudo-elements
    1. ::-moz-progress-bar
    2. ::-moz-range-progress
    3. ::-moz-range-thumb
    4. ::-moz-range-track
    5. ::-webkit-progress-bar
    6. ::-webkit-progress-value
    7. ::-webkit-slider-runnable-track
    8. ::-webkit-slider-thumb
    9. ::after (:after)
    10. ::backdrop
    11. ::before (:before)
    12. ::cue
    13. ::cue-region
    14. ::first-letter (:first-letter)
    15. ::first-line (:first-line)
    16. ::grammar-error
    17. ::marker
    18. ::part()
    19. ::placeholder
    20. ::selection
    21. ::slotted()
    22. ::spelling-error