Question

我想在表中添加一些输入以满足对齐需求。但风格没有奏效并停止了。如何将td添加到此css样式中。例如，像这样：

                <p>Stuff you like:</p>
            <table>
                <tr>
                    <td>
                        <label for="css3">CSS3</label>
                    </td>
                    <td>
                        <input type="checkbox" value="css3" id="css3" /> 
                    </td>
                </tr>
            </table><!-- It does not work-->


            <p><input type="checkbox" value="HTML5" id="html5" />
<label for="html5">HTML5</label></p>
            <p><input type="checkbox" value="JavaScript" id="javascript" />
<label for="javascript">JavaScript</label></p>
            <p><input type="checkbox" value="Other" id="other" /> 
<label for="other">Other</label></p>
<!--But it work-->

/*CSS*/
input:hover + label, input:focus + label,
input + label:hover, input:focus + label{
text-shadow: 1px 1px 3px #000;
color: #2C7AD0; 
}

Answer 1

您的HTML代码在哪里？它看起来怎样？你尝试的不会给你带来结果。您是将输入放入标签标签还是倒置？这就是你的CSS代码的样子。并且“+”肯定仅用于javascript，而不是CSS。

由于您尚未发布HTML，我可以猜测，但您的CSS应该看起来像：

input:hover label, input:focus label,
input label:hover, input:focus label {
text-shadow: 1px 1px 3px #000;
color: #2C7AD0; 
}

或者很可能是

更新（使用此功能，这应该有效）：

input, input:hover, input:focus, label,
label:hover, label:focus {
text-shadow: 1px 1px 3px #000;
color: #2C7AD0; 
}

Answer 2

使用表格标记时，label元素与您的任何选择器都不匹配。 label和input元素根本不是兄弟姐妹。你需要一些不同的东西。对于“悬停”部分，下面的工作，通常是CSS注意事项：

tr:hover label { ... }

关于“焦点”部分，由于结构限制，我担心你不能使用纯CSS：你不能让元素的聚焦状态影响元素的渲染。您需要使用JavaScript。

Answer 3

使用jquery

检查此代码

var option = {
  x:      1, 
  y:      2, 
  radius: 3,
  color:  "#ccff00"
}

$("#yourelems").textShadow( option );
$("#yourelems").css("color","red");

如何为输入及其标签添加td到css样式？

3 个答案: