Javascript CSS：仅当存在后续同级时才选择元素_Javascript_Html_Css_Css Selectors

Javascript CSS：仅当存在后续同级时才选择元素

javascript html css

Javascript CSS：仅当存在后续同级时才选择元素,javascript,html,css,css-selectors,Javascript,Html,Css,Css Selectors,在我的HTML结构中，我将其设置为： <body> <main> <section> ... </section> <aside> ... </aside> </main> </body> ... ; 用户[问问题]总是想用样式“B”。此外，在这个问题中，用户希望选择“B”（而不是“A”）只有当存在时，我才

在我的HTML结构中，我将其设置为：

<body>
   <main>
      <section>
      ...
      </section>

      <aside>
      ...
      </aside>
   </main>
</body>


...
; 用户[问问题]总是想用样式“B”。此外，在这个问题中，用户希望选择“B”（而不是“A”）


只有当
存在时，我才需要设置
样式
我不能改变HTML>的顺序，即使这不是最整洁的方式，你也可以运行准备文档的javascript函数，检查是否存在旁白标记，并相应地向节标记注入一个内联css。没有javascript
如果可以将html元素的顺序更改为：
用JavaScript实现这一点相当简单
例如，这将起作用：
<script>
    window.onload = function() {
        if (document.getElementsByTagName('aside')[0]) {
           document.getElementsByTagName('section')[0].style.max-width = '500px';
        } else {
            document.getElementsByTagName('section')[0].style.max-width = '1000px';
        }
    }
</script>


window.onload=函数（）{
if（document.getElementsByTagName（'aside'）[0]）{
document.getElementsByTagName（'section'）[0].style.max-width='500px'；
}否则{
document.getElementsByTagName（'section'）[0].style.max-width='1000px'；
}
}
在CSS中有相邻的兄弟选择器：
包括IE8在内的所有现代浏览器都支持这一点+
注意：如果section和aside在文档树中共享同一父级，并且section立即位于aside之前，则选择器匹配
如果这对您不起作用，您可以使用jQuery尝试JavaScript：
if($('aside').length)) $('section').addClass('specificSection');

然后将所有样式添加到class'.specificSeciton'.
如果您可以将元素放在第一节之前，可以使用：
试试这个，我相信这只能用一些javascript来完成
if ($('main').find('aside').length>0)
{
    $('main').find('section').addClass('specificSection');
}

使用jQuery，您可以尝试以下操作：
if($('aside')) $('section').css('max-width','500px');

仅使用CSS，您可以为包含旁白的页面类型使用不同的样式，并且以某种方式仅在这些页面上包含该样式。您可以将该样式放入自己的小样式表中，并在需要时包含它，这可能比呈现页面然后使用JavaScript更改页面更干净。
一个简洁的小技巧
如果中只有
元素，则可以通过使用技巧检查来实现所需的功能。如果存在任何其他元素，则此操作将不起作用。在您的情况下，它应该是这样工作的（）：
如本代码笔所示：

兄弟选择器上的常规内容
有一个+
选择器，它将选择紧跟在元素（）之后的同级
还有~
选择器，它选择以下所有同级（）
您可以通过放置
快速展望未来

很快这将成为可能，有了一个新的：has
伪类（）

您可以调用像main:has（>aside）>section{…}
这样的函数，但不幸的是，我们不得不等待：（
您可以使用jQuery将类.haveSidebar
切换到body标记，并使部分的CSS标记取决于body标记上是否存在此类：
HTML
<main>
    <section>
    </section>

    <aside>
    </aside>
</main>

JS
main {
    width:100%;
}
main aside {
    width:300px;
    background:red;
    min-height:300px;
    float:left;
}
main section {
    width:100%;
    background:green;
    min-height:300px;
    float:left;
}
body.haveSidebar main section {
    width: calc(100% - 300px);
}

var sideBar = $('body > main > aside');
if (sideBar.length > 0) {
    $('body').addClass('haveSidebar');
} else {
    $('body').removeClass('haveSidebar');
}



更新
不使用calc（）
的解决方案，方法是使用左边距
属性
main aside {
    width:300px;
    background:red;
    min-height:300px;
    position:relative;
}
main section {
    width:100%;
    background:green;
    min-height:300px;
    float:left;
}
.haveSidebar main section {
    margin-left:301px;
}

只能用CSS完成吗？---不幸的是，不可能重复的是，您基本上要求CSS中以前不存在的同级选择器。可能重复的：并且无需重新编辑您的标题，以包含标签中已给出的前缀。信不信由你，“我希望它是什么”以前和你一样-包括标题中的前缀。但是-so 1）需要删除它2）这不是我想要的，而是社区政策想要的。我不会再编辑你的问题，但我不能保证其他人也不会重新编辑它。我不能改变顺序>\u-Hmm这个怎么样：从IE9开始工作。。。它依赖于这样一个事实，
元素是它工作的
@wsws中唯一的元素。编辑您的答案作为解决方案，使用jsFiddle=）Man，检查这个想法：独生子女很好！救了我一天！谢谢，这将选择并应用样式。OP希望将样式应用于if，并且仅当side也存在时才应用。正确且非常好地支持IE7。使用~和not+也是一种很好的方法，因为这样元素就不需要彼此相邻+1如果他能改变DOM，这个解决方案就行了。不幸的是，他写道：我不能改变HTML>的顺序，你说“仅CSS”，但你接着说“改变HTML元素的顺序”。这毫无意义。我的意思是这个解决方案不需要javascript，我可以理解标题不是100%正确，但我是说OP真的不想使用javascript，只需要CSS解决方案。这是javascript还是jQuery？jQuery是javasript库，使用calc（）是否可以保存？我喜欢它，但因为它只是一个候选人推荐，我想知道我们是否应该使用它。。。（）有一些人在使用它，但是没有兼容性的保证，而且它在一些浏览器中仍然有缺陷。我试过了，但有些地方不对劲。。。
section {
     max-width: 500px;
}
/* The STAR of the show */
section:only-child {
     max-width: 1000px;
}

<main>
    <section>
    </section>

    <aside>
    </aside>
</main>

main {
    width:100%;
}
main aside {
    width:300px;
    background:red;
    min-height:300px;
    float:left;
}
main section {
    width:100%;
    background:green;
    min-height:300px;
    float:left;
}
body.haveSidebar main section {
    width: calc(100% - 300px);
}

var sideBar = $('body > main > aside');
if (sideBar.length > 0) {
    $('body').addClass('haveSidebar');
} else {
    $('body').removeClass('haveSidebar');
}

main aside {
    width:300px;
    background:red;
    min-height:300px;
    position:relative;
}
main section {
    width:100%;
    background:green;
    min-height:300px;
    float:left;
}
.haveSidebar main section {
    margin-left:301px;
}