gpt4 book ai didi

css3 nth-child 特异性

转载 作者:行者123 更新时间:2023-11-28 13:34:15 25 4
gpt4 key购买 nike

为什么这两个结果不等价?第一个显示绿色行,而第二个不显示。唯一不同的是html c 还有,nth-child选择器的特殊性是什么?

<!DOCTYPE html>
<html>
<head>
<title>Stripe Test</title>
<style type='text/css'>
tr:nth-child(2n+1)
{
background-color: red;
}
tr.c
{
background-color: green;
}
</style>
</head>
<body>
<table class='stripe'>
<tr class='c'>
<td>one</td>
</tr>
<tr>
<td>two</td>
</tr>
<tr>
<td>three</td>
</tr>
</table>
</body>
</html>

-对比-

<!DOCTYPE html>
<html>
<head>
<title>Stripe Test</title>
<style type='text/css'>
tr:nth-child(2n+1)
{
background-color: red;
}
tr .c
{
background-color: green;
}
</style>
</head>
<body>
<table class='stripe'>
<tr class='c'>
<td>one</td>
</tr>
<tr>
<td>two</td>
</tr>
<tr>
<td>three</td>
</tr>
</table>
</body>
</html>

最佳答案

第二个是完全不同的选择器。 tr .c中间有一个空格查找具有祖先 <tr> 的类名称为“c”的元素元素。第一个tr.c寻找 <tr>具有类名“c”的元素。

这与特异性无关,而是你对 CSS 的理解。

关于css3 nth-child 特异性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10393718/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com