用id获取元素 （#）

最好不要在css使用ID，因为优先级高，容易覆盖.class的设定，造成混乱

#id {
  property: value;
}

用class获取元素 （.）

.class {
  property: value;
}

分组 嵌套 （逗号，空格）

.class_wrapper_one,
.class_wrapper_two {
  property: value;
}

.class_wrapper .class_nested {
  property: value;
}

选择兄弟元素（+）

选择p后 紧接着的 a

p + a {
  property: value;
}

选择子元素（>）

选择p的子元素a（不能选择子元素的子元素）

p >a {
    property: value;
}

选择兄弟元素（~）

选择同级所有兄弟元素

p ~ a {
    color: pink;
}

用属性获取元素（[]）

完全匹配[attribute="value"]

input[type="text"] {
    background: #0000ff;
}

匹配以value开头[attribute^="value"]

若属性用空格分开，选择其中一个[attribute~="value"]

<div class="container"> 
  <div data-style="green font10">Element green font10</div> 
  <div data-style="black font24">Element black font24</div> 
  <div data-style="blue font17">Element blue font17</div>
</div>

[data-style~="blue"] {
    color: blue;
}

[data-style~="font10"] {
    font-size: 10px;
}

匹配以value结尾[attribute$="value"]

匹配包含value的元素[attribute*="value"]

!important最高优先度

element {
    property: value !important;
}