h1 {color: gray;}

h2, p {color: gray;}

* {color: gray;}

h1 {color: gray; font: 18px;}

h2, p {color: gray; font: 18px;}

h2{                                 /*  标签选择 */
}
p,h1{                               /* 使用逗号实现元素合集  */
}
div h1,div h2{                      /* 使用空格实现后代元素(子元素和子孙元素)查询，表示div的后代元素h1，h1和div的合集，在从合集中查找后代元素h2，最后查询到的为h2列表 */
    background-color: #2b542c;
}
p>h1{                                /*  >表示直接子元素  */
}
p+h1{                                /*  +表示紧接在后面的同胞元素，选择h1元素  */
}
html>body table+ul{                 /*  在html元素中查询直接子元素body，在body中查询后代元素table，在table元素后面查询同胞元素ul，即在最后选择的为ul列表  */
}
body *{                              /*  *通配符选择器，匹配所有元素，表示匹配body的所有后代元素  */
}
p.class1.class2{                    /*  .表示class类选择器，p为标签，连在一块写，表示多重筛选，一个元素可以有多个样式  */
}
#id1{                                /*  #id选择器，一个元素只能有一个id，所有元素的id不能相同   */
}

.p {color: gray;}

.test {color: gray;}

#test {color: gray;}

p[class] {color: gray;}

a[herf][title] {font-weight: bold;}

planet[moons= "1"] {font-weight: bold;}

p[class~"test"] {color: gray;}

p[attribute1][attribute2]{         /*  [] 属性选择器，表示具有某种属性的所有元素，多个参数表示同时具有多个属性，class也可以作为一个属性筛选 */
}
a[href="http://www.123.com"]{      /*  =具有某个属性，且属性值等于指定值的所有元素 */
}
div[class~="class1"]{               /*  ~=具有某个属性，且属性值包含指定值的所有元素  */
}
input[title^="title1"]{             /*  ^=指定属性的值以指定字符串开头   */
}
input[title$="title1"]{             /*  $=指定属性的值以指定字符串结尾   */
}
input[title*="title1"]{             /*  *=指定属性的值包含指定字符串   */
}
input[title|="title1"]{             /*  |=指定属性的值等于title1或者以title1-开头   */
}

h1 p {color: gray;}

h1 > p {color: gray;}

h1 + p {color: gray;}