个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
27
4
我正在尝试创建一个动态表。用户将选择复选框，这些复选框将根据用户选择的复选框切换列标题。此外，我正在尝试使用 CSS 为用户生成第一行空白输入。复选框不选择分组的列(如偶数、奇数或前 5 等)，并且在选择复选框 1-4 后显示的列之间存在重叠。这是我的代码示例:
<body>
<input type="checkbox" id="checkbox">
<label>checkbox</label>
<table id="table">
<tr>
<th>a</th>
<th>b</th>
<th>c</th>
<th>d</th>
</tr>
</table>
</body>
</html>
和 CSS；
/*------------------------Initialize with just checkbox for user selection*/
table th, td
{
display: none;
}
/*-------------------------Show columns based on user checkbox selection*/
#checkbox:checked ~
#table th:nth-child(1)
{
display: inline-block;
}
#checkbox:checked ~
#table th:nth-child(2)
{
display: inline-block;
}
#checkbox:checked ~
#table th:nth-child(3)
{
display: inline-block;
}
/*------------------------Generate first row*/
#checkbox:checked ~
#table td:nth-child(1)
{
display: inline-block;
}
#checkbox:checked ~
#table td:nth-child(2)
{
display: inline-block;
}
#checkbox:checked ~
#table td:nth-child(3)
{
display: inline-block;
}
/*------------------------Drown in wetness*/
这是我读过的 CSS should工作，但我还没能开始工作:
/*-------------------------Show user specific columns*/
#checkbox:checked ~
#table th:nth-child(1),
#table th:nth-child(2),
#table th:nth-child(3)
{
display: inline-block;
}
/*------------------------Generate first row*/
#checkbox:checked ~
#table td:nth-child(1),
#table td:nth-child(2),
#table td:nth-child(3)
{
display: inline-block;
}
我是初学者，如果可能的话，我想为此使用 CSS。但是，如果有更优雅的 JS 或 JQuery 解决方案，我愿意接受。用户输入的数据将根据标题类别添加在一起，我需要一种方法来确定在给定标题下输入了哪些数据。
在此先感谢您的帮助。
最佳答案
您非常接近解决方案，对于这项工作，您必须从以下位置更新第二组 CSS:
#checkbox:checked ~
#table th:nth-child(1),
#table th:nth-child(2),
#table th:nth-child(3)
{
display: inline-block;
}
收件人:
#checkbox:checked ~ #table th:nth-child(1),
#checkbox:checked ~ #table th:nth-child(2),
#checkbox:checked ~ #table th:nth-child(3) {
display: inline-block;
}
https://jsfiddle.net/koralarts/2b2h2f0g/
发生这种情况是因为当您通过逗号组合多个 CSS 选择器时，它们会被单独考虑。
#checkbox:checked ~ #table th:nth-child(1),
#table th:nth-child(2)
对比
#checkbox:checked ~ #table th:nth-child(1),
#checkbox:checked ~ #table th:nth-child(2)
关于javascript - 无法在 :checked pseudo code with selector in CSS 中使用多个 ':nth-child'，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44866251/
27
4
0
:nth-child(2) 似乎选择了 child 1 内部的东西。 child 1 和 child 3 工作正常。 好像不涉及tag的类型，几个类似但不同的问题都有。我没有看到问题。 https:/
我想用 javascript 隐藏一个特定的 child : #table-detail > tbody > tr:nth-child(10) 基于另一个特定的前一个 child 的内容: #tabl
在我自学 CSS 的过程中，我遇到了伪选择器 :nth-child() (以及它相关的选择器 :nth-last-child() 和 :nth-of-type())。 我已经对它进行了足够的研究，以了
在自学 CSS 的过程中，我遇到了伪选择器 :nth-child() (以及它的相关选择器 :nth-last-child() 和 :nth-of-type())。 我已经对它进行了足够的研究以理解语
我对 nth-of-type 有点困惑伪类，以及它应该如何工作——尤其是与 nth-child 相比类。 也许我的想法是错误的，但是考虑到这个结构 A B 1 2
我对 nth-of-type 有点困惑伪类，以及它应该如何工作——尤其是与 nth-child 相比类。 也许我的想法是错误的，但是考虑到这个结构 A B 1 2
我对 nth-of-type 有点困惑伪类，以及它应该如何工作——尤其是与 nth-child 相比类。 也许我的想法是错误的，但是考虑到这个结构 A B 1 2
我对 nth-of-type 有点困惑伪类，以及它应该如何工作——尤其是与 nth-child 相比类。 也许我的想法是错误的，但是考虑到这个结构 A B 1 2
我对 nth-of-type 有点困惑伪类，以及它应该如何工作——尤其是与 nth-child 相比类。 也许我的想法是错误的，但是考虑到这个结构 A B 1 2
我想避免在自定义 Wordpress 模板中使用函数或循环来为特定元素显示不同的背景颜色。我的问题是需要更改的容器及其父容器。 每个第 1、4、7 等配置文件类都需要有蓝色背景色。每个第 2、5、8
这个问题在这里已经有了答案: What does a space mean in a CSS selector? i.e. What is the difference between .clas
我有 3 个按钮，对于第二个按钮，我试图为其添加额外的边距，但出于某种原因，nth-child 和 nth-of-type 根本没有改变外观。我想我只是不明白它们是如何工作的，所以如果有人可以传播一点
我对 nth-of-type 有点困惑伪类，以及它应该如何工作——尤其是与 nth-child 相比类。 也许我的想法是错误的，但是考虑到这个结构 A B 1 2
我需要在 x 数量的元素之后插入一个 clearfix div，以便我可以获得格式良好的列。 我已经尝试了 :nth-child 和 :nth-of-type 并且我只在前 x 个项目之后添加了一个
遇到一个我想不通的问题。我正在尝试做的一个简单示例: 在类 .row 下第一个“跨度”的每次出现都以红色突出显示，除了第一次出现，它应该以黄色突出显示。 .row span:nth-of-type(1
什么 CSS 选择器可用于选择父元素中的所有奇数元素，但不一定是兄弟元素？ A A A
我正在尝试更改 div 内的奇数 div 的样式。出于某种原因，当 nth-of-type(odd) 在另一个 div 中时，它会影响我的所有 div。这是我的常规 div 和奇数 div 的代码:
这个问题在这里已经有了答案: Can I combine :nth-child() or :nth-of-type() with an arbitrary selector? (9 个回答) Wh
我正在尝试更改 div 内的奇数 div 的样式。出于某种原因，当 nth-of-type(odd) 在另一个 div 中时，它会影响我的所有 div。这是我的常规 div 和奇数 div 的代码:
我有这个 html 代码: CSS: .productWarp .productLine { background-color
我是一名优秀的程序员,十分优秀！