在的上下文中.NET MVC(但也可以应用于其他类似技术)，让我们:
- 视图树，例如页面视图
FileUploadPage及其子部分视图FileDropZone，其在根 node 上具有标识其视图"类型"的类:
文件上传页面.cshtml:
<div class="view-fileuploadpage">
<h2>File upload page view</h2>
@Html.Partial("FileDropZone")
</div>
飞碟区.CSHTML:
<div class="view-filedropzone">
File drop zone partial view
</div>
- 我只想将一些CSS规则应用于视图自身的元素，而不是全局的:
这样地:
.view-fileuploadpage h2 {
/* Spécific to the view FileUploadPage */
}
但是NOT个像这样:
h2 {
/* Global, not what I want */
}
我喜欢这种方式，因为它可以防止不必要的全局 Select 器对CSS中其他页面的干扰.
但是，这有一个问题:特定于视图的CSS规则适用于视图本身的元素，但也适用于作为子视图包含的任何其他视图.在上面的示例中，视图FileDropZone继承了假定特定于视图FileUploadPage的规则，这是不希望的结果.
So my question is : how can I make the CSS rules that are supposed to be specific to my views own elements NOT apply to the child views as well ?
我可以在 Select 器中使用"direct child"操作符来指定要设置样式的元素的完整"路径"，如下所示:
.view-fileuploadpage > h2 {
/* Applies to the h2 of the view FileUploadPage */
/* DOes NOT apply to any h2 that would exist in a child view of FileUploadPage */
}
但这会使代码难以维护，因为每次在视图中移动或修改标记时，都必须更新 Select 器.
我在JavaScript和查询 Select 器方面遇到了完全相同的问题，但我想找到CSS的解决方案也可以解决JavaScript问题.
非常感谢.