CSS 选择器备忘单

  * {
    margin: 0;
  }

  p {
    color: blue;
  }

  .container {
    width: 100%;
  }

  #header {
    background-color: grey;
  }

  [type="text"] {
    border: 1px solid black;
  }

  [type="checkbox"] {
    display: inline-block;
  }

  [href^="https"] {
    color: green;
  }

  [class*="button"] {
    font-weight: bold;
  }

  div p {
    color: blue;
  }

  ul > li {
    list-style-type: none;
  }

  h2 + p {
    margin-top: 0;
  }

  h2 ~ p {
    color: green;
  }

  a:hover {
    text-decoration: underline;
  }

  input:focus {
    border-color: blue;
  }

  li:nth-child(2) {
    color: red;
  }

  p:nth-of-type(3) {
    font-size: 1.2em;
  }

  p:first-child {
    font-weight: bold;
  }

  p:not(.highlight) {
    color: grey;
  }

  p::before {
    content: "note: ";
    font-weight: bold;
  }

  p::first-letter {
    font-size: 2em;
  }

  p::first-line {
    font-style: italic;
  }

  h1, h2, h3 {
    color: blue;
  }

  div:empty {
    display: none;
  }

  input:enabled {
    background-color: white;
  }

  input:disabled {
    background-color: lightgrey;
  }

  input:checked {
    border-color: green;
  }

  tr:nth-child(even) {
    background-color: lightgrey;
  }

  li:nth-last-child(1) {
    color: red;
  }

  div:only-child {
    border: 1px solid red;
  }

  :root {
    --main-color: blue;
  }

  [required] {
    border: 2px solid red;
  }

  [href^="http"] {
    text-decoration: underline;
  }

  [class*="icon"] {
    background-color: yellow;
  }

  p:lang(en) {
    color: blue;
  }

  #section:target {
    background-color: yellow;
  }