css - div#myid 和 div #myid 的区别

Question

当我为一个页面做 CSS 时，我发现当我以前做的时候，div#myid我的 CSS 被应用到元素上，当我这样做时div #myid它没有应用，但我不认为这是一个错误，我已经使用了很多次并且它作品。下面我的 CSS 是正确的，但第一个样式仍然不起作用，第二个起作用。

我在小提琴上放了一个样本，这里是链接http://jsfiddle.net/bipin000/FnzNm/

table #tt
{
    background-color:#ccc;
}
table#tt
{
    color:yellow;
}


​<table id="tt">
    <tr><td>this is atable</td></tr>
</table>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

Answer 1

• div#myid适用于设置为的div元素idmyid
• #myid适用于设置为的任何元素idmyid

---

我发现当我以前做 div#myid 然后我的 css 应用于元素，当我做 div #myid 它不适用

它适用于两者div#myid和#myid：

看演示

---

至于你的桌子，这两者table #tt和table#tt. 空间字符在这里起着重要作用。

table #tt表示在任何嵌套级别的元素内id设置为的元素，而表示设置为的元素。tt tabletable#tttableid#tt

例子：

table #tt可能意味着以下任何一种：

<table>
  <td id="tt"></td>
</table>

<table>
  <td><div id="tt"></div></td>
</table>

<table>
  <td><span id="tt"></span></td>
</table>
<!-- etc -->

id所以只要设置为tt inside 的任何元素table。

table#tt唯一的意思是：

<table id="tt">....</table>

Answer 2

第一个说#tt inside table

table #tt
{
    background-color:#ccc;
}

HTML

<table>
 <tr id="tt"><td>this is atable</td></tr>
</table>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

&

第二个说#tt with table。

table#tt
    {
        background-color:#ccc;
    }

HTML

<table id="tt">
 <tr><td>this is atable</td></tr>
</table>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

检查这个http://jsfiddle.net/FnzNm/3/

Answer 3

table #tt是某个表内具有 id 的元素tt（但不是表本身）。

table#tt是有 id 的表tt

由于#tt已经是独一无二的，因此您不需要更复杂的选择器（除非存在某种逻辑，例如“除非元素现在由于运行时的一些花哨的 DOM 操作而移出表格”）。