元素样式来源
浏览器默认：用户代理样式
当页面没有设置任何样式时，浏览器将采用浏览器的默认代理样式，如下：
<body><h1>Hello word</h1></body>
用户自定义样式
用户自己设置页面内容的显示样式
<body><h1 style="color: red">Hello word</h1></body>
基本及上下文选择器
基本选择器
<body><h2>item1</h2><h2 title="hello">item2</h2><h2 id="a">item3</h2><h2 id="a">item4</h2><h2 class="b">item4</h2><style>/* 基本选择器：根据元素自身来选择 *//* 1. 标签选择器 */h2 {color: red;}/* 2. 属性选择器 */h2[title="hello"] {color: green;}/* id:用于唯一元素 */h2[id="a"] {color: blue;}/* id:用于多个元素 */h2[class="b"] {color: violet;}h2#a {color: cyan;}h2.b {color: orange;}/* 3. 群组选择器 */h2#a,h2.b {background-color: yellow;}/* 4. 通配符选择器 */html body * {background-color: gray;}</style></body>
上下文选择器
<body><ul class="list"><li class="item">item1</li><li class="item second">item2</li><li class="item">item3<ul class="inner"><li>item3-1</li><li>item3-2</li><li>item3-3</li></ul></li><li class="item">item4</li><li class="item">item5</li><li class="item">item6</li><li class="item">item7</li><li class="item">item8</li></ul><style>/* 1. 子元素 > */.list > li {border: 1px solid #000;}/* 2. 后代元素 > */.list li {border: 1px solid #000;}/* 3. 相邻兄弟 */.item.second + * {background-color: red;}/* 4. 选择后面所有兄弟 */.item.second ~ * {background-color: yellow;}</style></body>
选择器的权重
<body><h1 class="title" id="active">Hello</h1><style>/* 1,1,2 */body h1.title#active {color: yellow;}/* 0,1,2 */body h1.title {color: red;}/* 0,0,2 */body h1 {color: green;}/* 0,0,1 */h1 {color: darkorange;}/* 三个权重的位置（从右到左）第一位：标签数量第二位：class数量第三位：id数量 */</style></body>
总结：id: 因为权重太高，代码弹性弱，一般不用；标签数量又太少，而class可以任意命名，所以，在实际生产环境，尽可能用class。