CSS 选择器语法速查

Pseudo-classes

• a:link
  Selects all unvisited links
• a:visited
  Selects all visited links
• a:hover
  Selects links on mouse hover
• a:active
  Selects the active link element
• p::after
  Insert content after <p> element
• p::before
  Insert content before <p> element
• input:checked
  Selects every checked <input> element
• input:disabled
  Selects every disabled <input> element
• p:empty
  Selects every <p> element with no children
• input:enabled
  Selects every enabled <input> element
• p:first-child
  Selects every <p> element that is the first child of its parent
• p::first-letter
  Selects the first letter of every <p> element
• p::first-line
  Selects the first line of every <p> element
• p:first-of-type
  Selects every <p> element that is the first <p> element of its parent
• input:focus
  Selects the <input> element which has focus
• input:in-range
  Selects <input> elements with a value within a specified range
• input:invalid
  Selects all <input> elements with an invalid value
• p:lang(language)
  Selects all <p> elements with a lang attribute equal to ‘language’
• p:last-child
  Selects every <p> element which is the last child of its parent
• p:last-of-type
  Selects every <p> element which is the last <p> element of its parent
• :not(p)
  Selects every element that is not a <p>
• p:nth-child(2)
  Selects every <p> element that is the second child of its parent
• p:nth-last-child(2)
  Selects every <p> element that is the second child of its parent, counting from the last child
• p:nth-last-of-type(2)
  Selects every <p> element that is the second <p> element of its parent, counting from the last child
• p:nth-of-type(2)
  Selects every <p> element that is the second <p> element of its parent
• p:only-of-type
  Selects every <p> element that is the only <p> element of its parent
• p:only-child
  Selects every <p> element that is the only child of its parent
• input:optional
  Selects <input> elements with no ‘required’ attribute
• input:out-of-range
  Selects <input> elements with a value outside a specified range
• input:read-only
  Selects <input> elements with the ‘readonly’ attribute specified
• input:read-write
  Selects <input> elements with the ‘readonly’ attribute not specified
• input:required
  Selects <input> elements with the ‘required’ attribute specified
• :root
  Selects the documents root element
• ::selection
  Selects the portion of an element that is selected by a user
• #id:target
  Selects the current active #id element
• input:valid
  Selects all <input> elements with a valid value

Selectors

• .class
  Selects all elements with .class
• #id
  Selects all elements with #id
• *
  Selects all elements
• div
  Selects all <div> elements
• div, p
  Selects all <div> and <p> elements
• div > p
  Selects all <p> elements that are a direct descendant of a <div> element
• div + p
  Selects all <p> elements that are the next sibling of (i.e. placed directly after) <div> elements
• div ~ p
  Selects all <p> elements that follow, and are siblings of, <div> elements

Attributes

• [attribute]
  Selects all elements with the specified attribute
• [attribute=value]
  Selects all elements where the specified attribute is equal to ‘value’
• [attribute~=value]
  Selects all elements with an attribute containing the word ‘value’
• [attribute|=value]
  Selects all elements with an attribute list starting with ‘value’
• [attribute^=value]
  Selects all elements with an attribute beginning with ‘value’
• [attribute$=value]
  Selects all elements with an attribute ending with ‘value’
• [attribute*=value]
  Selects all elements with an attribute containing the substring ‘value’