是否有可能让某个元素“通过”结构规则？

我将用一个例子开始是否有可能让某个元素“通过”结构规则？

.Item { 
 
    width:100px; 
 
    height:100px; 
 
    margin:20px; 
 
    background-color:rgb(255,0,0); 
 
    } 
 

 
#AllStuffs { 
 
    display:flex; 
 
    flex-direction:row; 
 
    }

<div id="AllStuffs"> 
 
    <div class="Item">I am static</div> 
 
    <div id="DynamicTexts"> 
 
    <div class="Item">Lets pretend</div> 
 
    <div class="Item">that we are dynamic</div> 
 
    </div> 
 
</div>

基本上，这将是方便我有分离出来，从静态的动态元素（或者动态元素来自多个来源的要素或者其他），在这种情况下是“DynamicTexts”。

同时，我希望该分隔符元素对文档结构完全不可见并遵守css规则，就好像所有“item”分类元素都是“AllStuffs”元素的直接子元素，在这种情况下导致连续3个红色框。

有没有办法强制这个“通过”模式的元素？

注意：对假设问题的其他解决方案不感兴趣，只关心这种特定方法是否可行。

来源

2016-10-15 user81993

你可能会看看https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM – eithed

为什么你不能只添加单独的类到静态和动态元素？ –

@SalmanA我可以，但那不是重点。 – user81993

在这里，用浮筒：

.Item { 
 
    width:100px; 
 
    height:100px; 
 
    margin:20px; 
 
    background-color:rgb(255,0,0); 
 
    float: left; 
 
    } 
 
#AllStuffs, #DynamicTexts { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    } 
 
#AllStuffs { 
 
    overflow: auto; // clearfix the floats inside 
 
    }

<ul id="AllStuffs"> 
 
    <li class="Item">I am static</div> 
 
    <li> 
 
    <ul id="DynamicTexts"> 
 
     <li class="Item">Lets pretend</li> 
 
     <li class="Item">that we are dynamic</li> 
 
    </ul> 
 
    </li> 
 
</ul>

虽然解决您的问题，它不是必需的，我转换容器列表和项目列表项，以提高语义。

来源

2016-10-15 07:23:09 elektronik

我不确定我是否了解您的描述。但是，根据第一个答案解决方案，我在做类似的Flexbox的：

.Item { 
 
    width:100px; 
 
    height:100px; 
 
    margin:20px; 
 
    background-color:rgb(255,0,0); 
 
    } 
 

 
#AllStuffs { 
 
    display:flex; 
 
    flex-direction:row; 
 
} 
 
#DynamicTexts { 
 
    display:flex; 
 
    flex-direction:row; 
 
}

<div id="AllStuffs"> 
 
    <div class="Item">I am static</div> 
 
    <div id="DynamicTexts"> 
 
    <div class="Item">Lets pretend</div> 
 
    <div class="Item">that we are dynamic</div> 
 
    </div> 
 
</div>

来源

2016-10-15 07:51:18 thigrand

你想要的动箱不被在DOM。例如，您想将以下css规则应用于所有框，对吗？

AllStuffs>Item 
{ 
    color: green; 
}

在这种情况下无法绕过DynamicText元素。要解决此问题，您必须使用JS，因为您要更改网站的DOM。

如果您只想更改浮动，请参阅其他答案。

希望这是，你在问什么。

来源

2016-10-15 08:32:40 Merschi

是否有可能让某个元素“通过”结构规则？

回答

相关问题