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’
阅读余下内容
 

发表评论

电子邮件地址不会被公开。 必填项已用*标注


京ICP备12002735号