元素样式/选择器及权重(css选择器权重优先级)
元素样式来源
浏览器默认：用户代理样式
当页面没有设置任何样式时，浏览器将采用浏览器的默认代理样式，如下：
<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。