Html CSS选择紧跟在具有不同属性值的元素之后的所有元素
HTML:Html CSS选择紧跟在具有不同属性值的元素之后的所有元素,html,css,css-selectors,Html,Css,Css Selectors,HTML: 测试 测试 测试 测试 在本例中,我只想选择第三个。属性名称是固定的,但其值是动态的,并且事先不知道。的数量也是动态的。这可以用纯CSS实现吗?我认为这可以通过使用第n-child()选择器来实现: <ul> <li attribute_name='a'>Test</li> <li attribute_name='a'>Test</li> <li attribute_name='b'>Test&
- 测试
- 测试
- 测试
- 测试
在本例中,我只想选择第三个
。属性名称是固定的,但其值是动态的,并且事先不知道。
的数量也是动态的。这可以用纯CSS实现吗?我认为这可以通过使用第n-child()选择器来实现:
<ul>
<li attribute_name='a'>Test</li>
<li attribute_name='a'>Test</li>
<li attribute_name='b'>Test</li>
<li attribute_name='b'>Test</li>
</ul>
是否有解决方案取决于您的标记 由于选择器大多是静态的,并且没有变量,因此在事先不知道值的情况下,无法使用选择器根据具有相同属性值的另一个元素(或缺少该元素)将任何元素与特定属性值相匹配。如果无法确定此属性的可能值,则没有纯CSS解决方案 如果该属性只存在一组有限的值,并且您事先知道这些值,则可以为每个可能的值编写选择器,但需要对其中的每个值进行硬编码。这样的选择器将使用
:not()
伪类和相邻的兄弟组合器+
构造,我使用了一种技术:
正如您所知,如果您有许多不同的可能值,那么您的选择器将快速增长。但这是使用纯CSS实现这一点的唯一真正方法,即使这样,它仍然需要事先知道可能的值。从问题中可以看出,元素的数量和属性值是动态的,因此
:nth-child()
将无法按预期工作。
p:nth-child(2)
{
background:#ff0000;
}
li:not([attribute_name='a']) + li[attribute_name='a'],
li:not([attribute_name='b']) + li[attribute_name='b']