Question

我有一些像这样的嵌套元素：

<div class="foo">
    <div class="select-inside-this">
        <div class="not-inside-this">
            <div class="one select-this"></div>
        </div>
    </div>
</div>
<div class="select-inside-this">
    <div class="two select-this"></div>
</div>
<div class="three select-this"></div>

我想选择.select-this内的所有.select-inside-this，而不是.not-inside-this中包含的two.select-this。所以最后，我应该只能从上面的代码中选择.select-inside-this :not(.not-inside-this) .select-this { /* style here /* }。我尝试过但没有用的CSS：

.select-inside-this *:not(.not-inside-this) .select-this {
    /* style here /*
}

或：

这里有解决方法吗？

我不想在这里使用JavaScript。我需要纯CSS3解决方案。

编辑：我不想使用直接子（[NullReferenceException: Der Objektverweis wurde nicht auf eine Objektinstanz festgelegt.] Sitecore.Intranet.FrontendEditing.FrontendEditor.IsAutoVersioningEnabledForItem(Item item) +69 Sitecore.Intranet.Pipelines.SaveUI.AddNewVersion.Process(SaveArgs args) +515 [TargetInvocationException: Ein Aufrufziel hat einen Ausnahmefehler verursacht.] System.RuntimeMethodHandle._InvokeMethodFast(Object target, Object[] arguments, SignatureStruct& sig, MethodAttributes methodAttributes, RuntimeTypeHandle typeOwner) +0 System.Reflection.RuntimeMethodInfo.Invoke(Object obj, BindingFlags invokeAttr, Binder binder, Object[] parameters, CultureInfo culture, Boolean skipVisibilityChecks) +1255 System.Reflection.RuntimeMethodInfo.Invoke(Object obj, BindingFlags invokeAttr, Binder binder, Object[] parameters, CultureInfo culture) +38 Sitecore.Pipelines.Processor.Invoke(PipelineArgs args) +318 Sitecore.Nexus.Pipelines.NexusPipelineApi.Resume(PipelineArgs args, Pipeline pipeline) +330 Sitecore.Pipelines.Pipeline.DoStart(PipelineArgs args) +208 Sitecore.Pipelines.Pipeline.Start(PipelineArgs args, Boolean atomic) +182 Sitecore.Web.UI.Sheer.ClientPage.RunPipelines() +280 Sitecore.Web.UI.Sheer.ClientPage.OnPreRender(EventArgs e) +530 Sitecore.Shell.Applications.ContentManager.ContentEditorPage.OnPreRender(EventArgs e) +25 System.Web.UI.Control.PreRenderRecursiveInternal() +108 System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +3394 [NullReferenceException]: Der Objektverweis wurde nicht auf eine Objektinstanz festgelegt. bei Sitecore.Intranet.FrontendEditing.FrontendEditor.IsAutoVersioningEnabledForItem(Item item) bei Sitecore.Intranet.Pipelines.SaveUI.AddNewVersion.Process(SaveArgs args) [TargetInvocationException]: Ein Aufrufziel hat einen Ausnahmefehler verursacht. bei System.RuntimeMethodHandle._InvokeMethodFast(Object target, Object[] arguments, SignatureStruct& sig, MethodAttributes methodAttributes, RuntimeTypeHandle typeOwner) bei System.Reflection.RuntimeMethodInfo.Invoke(Object obj, BindingFlags invokeAttr, Binder binder, Object[] parameters, CultureInfo culture, Boolean skipVisibilityChecks) bei System.Reflection.RuntimeMethodInfo.Invoke(Object obj, BindingFlags invokeAttr, Binder binder, Object[] parameters, CultureInfo culture) bei Sitecore.Pipelines.Processor.Invoke(PipelineArgs args) bei Sitecore.Nexus.Pipelines.NexusPipelineApi.Resume(PipelineArgs args, Pipeline pipeline) bei Sitecore.Pipelines.Pipeline.DoStart(PipelineArgs args) bei Sitecore.Pipelines.Pipeline.Start(PipelineArgs args, Boolean atomic) bei Sitecore.Web.UI.Sheer.ClientPage.RunPipelines() bei Sitecore.Web.UI.Sheer.ClientPage.OnPreRender(EventArgs e) bei Sitecore.Shell.Applications.ContentManager.ContentEditorPage.OnPreRender(EventArgs e) bei System.Web.UI.Control.PreRenderRecursiveInternal() bei System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) [HttpUnhandledException]: Eine Ausnahme vom Typ "System.Web.HttpUnhandledException" wurde ausgelöst. bei System.Web.UI.Page.HandleError(Exception e) bei System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) bei System.Web.UI.Page.ProcessRequest(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) bei System.Web.UI.Page.ProcessRequest() bei System.Web.UI.Page.ProcessRequest(HttpContext context) bei ASP.sitecore_shell_applications_content_manager_default_aspx.ProcessRequest(HttpContext context) in c:\Windows\Microsoft.NET\Framework64\v2.0.50727\Temporary ASP.NET Files\root\0a348ed6\6269aa05\App_Web_x1rqdwhm.1.cs:Zeile 0. bei System.Web.HttpApplication.CallHandlerExecutionStep.System.Web.HttpApplication.IExecutionStep.Execute() bei System.Web.HttpApplication.ExecuteStep(IExecutionStep step, Boolean& completedSynchronously)）选择器。正如我所问，我想在没有异常包装的情况下从任何级别选择所有这些元素。

Answer 1

带有:not(.not-inside-this)的

*:not(.not-inside-this)和*是等效的;在前者的情况下，暗示了通用选择器。请参阅spec。

由于以下问题中给出的原因，目前无法构造匹配不是特定元素后代的元素的CSS选择器：

选择器

.select-inside-this :not(.not-inside-this) .select-this

匹配的某些元素的后代的.select-this个元素，而不是.not-inside-this ，后者又是{{1}的后代}。它不匹配.select-inside-this元素，不是.select-this 中.not-inside-this 的后代。

这意味着，首先，您的选择器将错误地匹配以下内容：

.select-inside-this

...因为<div class="select-inside-this"> <div class="bar"> <div class="not-inside-this"> <div class="select-this"></div> </div> </div> </div>，.select-this的祖先之一是.bar。

此外，这意味着至少有三个嵌套级别（尽管可能更多）。在您的示例中，:not(.not-inside-this)与其包含.two.select-this之间没有其他元素，因此它永远不会匹配该元素。这就是詹姆斯唐纳利建议添加.select-inside-this以解释该特定案例的原因。

然而，仍然无法使用后代组合子编写单个复杂选择器来匹配没有特定祖先的元素。仅方式是根据需要使用尽可能多的.select-inside-this > .select-this重复子组合方法，但这需要您考虑所有可能的情况。如果你不能这样做，那么你对CSS选择器的运气不好。

Answer 2

您可以使用Child Combinator Selector >指定直接子女：

.select-inside-this :not(.not-inside-this) .select-this,
.select-inside-this > .select-this {
    /* style here /*
}

这会选择任何.select-this元素，该元素不是任何.not-inside-this元素的后代，也会选择.select-this元素作为.select-inside-this元素的直接子元素。

body > .select-inside-this :not(.not-inside-this) .select-this,
body > .select-inside-this > .select-this {
  color: red;
}

<div class="foo">
    <div class="select-inside-this">
        <div class="not-inside-this">
            <div class="one select-this">
                This should not be selected
            </div>
        </div>
    </div>
</div>
<div class="select-inside-this">
    <div class="two select-this">
        This should be selected
    </div>
</div>
<div class="three select-this">
    This should not be selected
</div>

Answer 3

聚会晚了一点，可能与您的用例不符，但这是我最终要做的：

HTML：

<div class="foo">
    <div class="select-inside-this">
        <div class="not-inside-this">
            <div class="one select-this"></div>
        </div>
    </div>
</div>
<div class="select-inside-this">
    <div class="two select-this"></div>
</div>
<div class="three select-this"></div>

CSS：

.select-inside-this .select-this {
    background: blue;
}
.select-inside-this .not-inside-this .select-this {
    background: none;
}

诀窍是积极选择否定元素，然后撤消样式。

至少将它用于简单的用例。

用于不在其他内容中的CSS选择器

3 个答案: