/* 标签选择器 */
div {
    color: aqua;
}
/* 标签选择器 */
#choose {
    width: 100px;
    height: 40px;
    background: #f00;
    color: #ff0;
}
/* 类选择器 */
.vase {
    color: aquamarine;
}
/* 伪类选择器 */
/* :hover 划过
   :first-child
   :last-child
   :nth-child(num)
*/
/* :link 点击前的 */
a:link {
    background-color: aquamarine;
}
/* :hover 鼠标划过 悬停 */
a:hover {
    background-color: #f00;
}

/* :active鼠标点击时 */
a:active {
    background: #00f;
}
/* :visited点击后的状态 */
a:visited {
    background-color: #ff0;
}
/* 后代选择器（包含选择器） */
/* p span {
    color: #f00;
} */
/* > 子类选择器 */
p>span {
    color: #00f;
}
/* 群组选择器 */
h1,h2,b {
    color: #f00;
}
/* 属性选择器 */
img[alt='111'] {
    width: 200px;
    height: 200px;
}
/* 相邻选择器 */
/* h4 + h5 {
    color: aqua;
} */
/* 兄弟选择器 */ 
h3 ~ h5 {
    color: #f00;
}
/* 伪元素选择器
    ::before
    ::after
*/
#box1 {
    width: 200px;
    height: 200px;
    background: #00f;
    color: #000;
}
#box1::before {
    content: 'before';
    color: #f00;
}
#box1::after {
    content: 'after';
    color: #ff0;
}
/* 通配符选择器 */
* {
    margin: 0;
    padding: 0;
}
/* 
    css选择器的优先级
    !important 正无穷
    内联样式（style）    1,0,0,0
    id选择器             0,1，0,0
    类选择器(class) = 伪类选择器 = 属性选择器 0,0,1，0
    标签选择器 = 伪元素选择器 0,0,0,1
    通配符选择器 0,0,0,0

*/