Question

css中"div#outer"这样的写法是为什么呢?id不是唯一的吗为何前面还要套个div?内有出处

div#outer {width: 500px;}
div#inner {text-indent: 10%;}
p {width: 200px;}

<div id="outer">
<div id="inner">some text. some text. some text.
<p>this is a paragragh.</p>
</div>
</div>

难道是用作于 不同页面中不同种类元素但都用了同样id?-.-这不自己给自己找麻烦嘛

Answer 1

id唯一性是语法上的要求，实际页面中可以存在多个ID而页面效果正常(jiangxibaiyi说的有js的话就会冲突)

考虑下面的代码：
<p class="abc">blue</p>
<div class="abc">red</div>

.abc{color:red;}/*所有class为abc的元素文字为红色*/
div.abc{color:blue}/*class为abc的div文字为蓝色*/

实际上是为了实现上面这个选择而设计的这种规则，只是既然设计好了，没必要因为 ID 的唯一性而专门又去写其他的规则把 ID 从这种规则里面剔除

而无论写 div#abc 还是直接写 #abc 都具有一样的效果，不冲突。

你知道在是 ID 而非 Class 的情况下如此写是多余的，就直接写 #abc 不写前面 Div 就行了，由于css 的解析是从右往左的，这种情况从右边开始解析到 #abc 就ok了，如果是写 div#abc 会先去解析 #abc 再去解析左边的 div ，多解析了一个多余的东西，在选择效率上来说 div#abc 会比 #abc 慢一点(不过通常察觉不到这个快慢的明显区别)

Answer 2

id唯一性，似乎是针对javascript而不是css吧？
刚才测试了一下，css好像没有id唯一性
<style>
#a{color:red}
</style>
<div id="a">123456</div>
<p id="a">sdfsdf</p>
上面的代码运行后，2个标签的字体颜色都是红色的，刚刚测试过

Answer 3

前面的div可以不加，这个只是标示再看css时你这个类是用于div的。我第一次用到的时候是在java里面，这样每个id类前面都加上了，其实不用，加上也不影响运行，后来工作HTML 后，我依然加上前面的div，别人都感觉很奇怪，这才知道了，这个可以不加。