仅将样式表应用于特定元素特征

经过一番搜索后，我无法想出答案，所以这是我的问题。有没有一种方法可以指定一个特定的元素特征，比如一个id，整个样式表应该被应用？仅将样式表应用于特定元素特征

例如，如果我有这样

<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="./style.css"> 
    </head> 
    <body> 
     <div id="my_id"> 
      <!-- A bunch of elements here --> 
     </div> 
    </body> 
</html>

HTML块是否有指定包含在./style.css规则应当仅#my_id被施加到匹配元素与，类似于前指定#my_id的方式样式表中的每个规则。

我明白在每个规则都达到这个之前指定了#my_id，但是我想知道是否有办法做到这一点，而不需要在样式表中添加膨胀。

我正在研究一个greasemonkey（userscript）脚本，它在创建它的特定页面上创建一个“容器”元素，并放置所有其他所需的GUI元素。我不希望我的CSS干扰页面上的CSS（比如意外地重写了页面上已存在的规则），但不希望将不必要的膨胀加入到我的样式表中，因为所有规则都可以避免是只有适用于'包装'元素和/或它的孩子。

来源

2012-12-05 SReject

你的意思是，将样式应用于#my_id中的元素？ – kennypu

我这样做，而不是具体的规则。我想知道是否有办法让我的样式表只将样式应用于#my_id中的元素 – SReject

您可以使用>选择器将样式应用于#my_id中的元素。例如：

#my_id { 
    /* some style for #my_id */ 
} 

#my_id > p { 
    /* this will style all p tags within #my_id */ 
}

来源

2012-12-05 08:21:07 kennypu

正如问题中所述，我知道我可以将选择符预先放置到规则的开头。我在问是否有办法做到这一点。 – SReject

你的问题不是很清楚。在任何情况下，如果您尝试仅在#my_id中对项目进行样式设置，那么您需要预先设置#my_id，没有其他方法。无论是，还是添加风格的内联元素。 – kennypu

据我所知，这是不可能的。正如你所说的，你可以在规则前加上ID，但这不是你想要做的。

但是我应该说，你不应该为单个ID指定一个样式表，因为一个ID在页面上下文中应该是唯一的。此外，我发现将相同的ID应用到在不同页面上用于不同目的的元素是不好的做法，因为它可以使编写常见的JavaScript页面变得相当混乱。

来源

2012-12-05 08:21:21

我问的原因是因为这是在第三方页面上的Grease monkey脚本（脚本存储和执行客户端）。这些样式不适用于同一个id的多个元素，而是存储在具有特定id的元素中的元素。 – SReject

我陷入了困境。再次，我不幸地不相信这是可能的。 –

如果您正确使用ID，应该可以。您在_unique_元素上设置了一个ID，并将其中的所有内容都定位到其中。类是用于多个元素的。 – Kyle

这就是人们开始使用SASS的原因之一。

#my_id { 
    // all styles without editing 
    // Now all these styles are applied only if they fall 
    // under the element with id "my_id". 
}

编辑：在SASS刚刚筑巢所有CSS类ID类中，像这样，这将是容易其他（丑陋的）选择是使用一个iframe，而不是一个div和加载子元素和样式表，以便按如下方式对其进行沙盒处理。

<html> 
    <head></head> 
    <body> 
     <iframe id="my_id"> 
      <html> 
       <head> 
        <link rel="stylesheet" type="text/css" href="./style.css" /> 
       </head> 
       <body> 
        <!-- A bunch of elements here --> 
       </body> 
      </html> 
     </iframe> 
    </body> 
</html>

P.S：别忘了添加doctype。为了简单起见，我没有在示例中添加它。

来源

2012-12-05 08:27:01

除浏览器可以使用之前，SASS/SCSS被编译成CSS。在这一点上，我的问题再次变得有效...... – SReject

用替代方法更新了答案。 –

仅将样式表应用于特定元素特征

回答

相关问题