PROSAGA码农传奇-特征工程-CSS规则适用于给定DOM元素的逆向工程？

<div class =“post-text”itemprop =“text”>
  <P>
    是的，在“元素”面板中的Chrome DevTools（Windows中的F12 / OSX中的Option + Cmd + I）中，您可以单击元素并在右侧查看应用的CSS规则。被覆盖的样式或类被划掉，您可以看到CSS规则来自的文件名。见下文：
  </p>
  <P>
    <a href="https://i.stack.imgur.com/AsJFM.png" rel="nofollow noreferrer">
      <img src =“https://i.stack.imgur.com/AsJFM.png”alt =“CSS规则”/>
    </A>
  </p>
  <P>
     <code>
      element.style
    </code>
     指内联样式。例如，如果我将所选元素修改为
     <code>
      <div class="container" style="background-color:#000">...</div>
    </code>
    ，
     <code>
      background-color:#000
    </code>
     将出现在该部分。
  </p>
  <P>
     <code>
      #content
    </code>
     是指
     <code>
      div
    </code>
     元素的关联ID为'content'。在右侧选中的复选框表示它们已被应用而没有覆盖。您可以选中和取消选中这些样式以使用样式，以便您可以在源代码中查看应更改的内容。
  </p>
  <P>
    该
     <code>
      html, body, div, span
    </code>
     等允许多个选择器使用相同的样式。该逗号分隔列表中的所有选择器都将具有样式，除了一些可能被其他CSS规则覆盖 - 在这种情况下，
     <code>
      margin
    </code>
     和
     <code>
      padding
    </code>
     被更具体的人所覆盖
     <code>
      #content
    </code>
     选择。
  </p>
  <P>
    下一个块用于用户代理样式。这些是浏览器应用的样式，每个浏览器可能应用不同的样式。如果您自己定义了更具体的规则，则可能会出现问题。许多人使用规范化器来确保浏览器之间的内容保持一致。查看
    <a href="http://necolas.github.io/normalize.css/" rel="nofollow noreferrer">
      规范化
    </A>
  </p>
  <P>
    继承的部分显示从父样式继承的所有样式。在这个例子中，
     <code>
      text-align: left
    </code>
     风格应用于
     <code>
      .container
    </code>
     class，因为它是父元素和
     <code>
      #content
    </code>
     element没有明确地覆盖它。
  </p>
  <P>
    的<strong>
      更新
    </强>
  </p>
  <UL>
    <LI>
      添加了更高质量的截图（感谢@SLaks）
    </LI>
    <LI>
      添加了键盘快捷键以便访问（感谢@NKD）
    </LI>
    <LI>
      添加了右侧“样式”面板部分的简单说明。
    </LI>
  </UL>
</DIV>