相关疑难解决方法(0)

研究特异性我偶然发现了这个博客 - http://www.htmldog.com/guides/cssadvanced/specificity/

它指出特异性是CSS的点评系统.它告诉我们元素值1分,类值10分,ID值100分.它也是最重要的说这些点总计,总量是选择器的特异性.

例如:

body = 1 point
body .wrapper = 11 points
body .wrapper #container = 111 points

因此,使用这些点肯定会使以下CSS和HTML导致文本为蓝色:

CSS:

#a {
    color: red;
}

.a .b .c .d .e .f .g .h .i .j .k .l .m .n .o {
  color: blue;
}

HTML:

<div class="a">
  <div class="b">
    <div class="c">
      <div class="d">
        <div class="e">
          <div class="f">
            <div class="g">
              <div class="h">
                <div class="i">
                  <div class="j">
                    <div class="k">
                      <div class="l">
                        <div class="m">
                          <div class="n">
                            <div class="o" id="a">
                              This should …

下面的标记与SAMPLE TEXT左侧对齐.

对我而言,它似乎应该与右边对齐.与右对齐的类在左对齐的类之后声明.与右边对齐的类甚至最后引用.那么为什么与左翼对齐的班级获胜？

CSS

.table {
    width: 100%;
}
.table td {
    text-align: left;
}
.cell {
    text-align: right;
}

HTML

<table class="table">
    <tr>
        <td class="cell">
             SAMPLE TEXT
        </td>
    </tr>
</table>?

请参阅我的jsFiddle示例.

例如,假设我有这个HTML:

<ul id="nav">
  <li>one</li>
  <li id="my_item">two</li>
  <li>three</li>
  <li>four</li>
</ul>

然后是CSS:

#nav li {
  margin-bottom:10px;
}

#nav #my_item {
  margin-bottom:30px;
}

为什么我不能只使用#my_item最后一个选择器？