CSS检查不工作答案

【问题标题】：CSS checked not workingCSS检查不工作
【发布时间】：2015-10-29 17:45:12
【问题描述】：

HTML 元素：

<p> <input type="button"> id="edit" value="edit page" /> </p>

此 div 已被 display:none 隐藏，我想将可见性切换为 display:normal。

@Html.EditorFor(
    modelItem => model.user, 
    new {
        htmlAttributes = new {
            @ class = "user" 
        } 
    } 
)

“用户”类具有以下属性：

.user {
    width:200px;
    margin-left:3px;
    display:none;
}

由于某种原因，我检查的 CSS 不起作用：

#edit:hover + user {
    color:black;
}

#edit:checked + user {
    display:normal;
}

我不想使用任何 Javascript 来切换可见性，我希望它在纯 CSS3 中完成。

【问题讨论】：

#edit:checked + user { display:normal; } 这不是一个有效的，
嗨 @Aqib 欢迎来到 StackOverflow。您发布的 HTML 似乎无效，您似乎在 type 和 id 属性之间有一个额外的“>”。另外，您能否发布任何您已经尝试过的javascript，这将有助于我们更清楚地回答这个问题。
额外的 ">" 不在代码中，我输入了这个并犯了这个错误，我没有尝试任何 Javascript，因为我希望基于 CSS3。

【解决方案1】：

这里有几个 CSS 问题：

显示值

在 CSS 中，display 没有 normal 值。

使用block、inline 或其他适合您需要的值：http://www.w3.org/wiki/CSS/Properties/display

要在 CSS 中使用 + 选择器，您的 div 必须紧跟在 input 之后，因此您必须删除 input 周围的 p：http://www.w3.org/wiki/CSS/Selectors/combinators/adjacent

选择器:checked仅适用于radio和checkboxinput，不能与button一起使用input：http://www.w3.org/wiki/CSS/Selectors/pseudo-classes/:checked

所有这些，你可以检查这个working JSFiddle

【讨论】：

【解决方案2】：

<p> <input type="button" id="edit" value="edit page" /> </p>

#edit:checked + user {
display:block;
}

看看

【讨论】：

请考虑编辑您的帖子，以添加更多关于您的代码的作用以及它为何能解决问题的说明。一个大部分只包含代码的答案（即使它正在工作）通常不会帮助 OP 理解他们的问题。如果只是猜测，还建议您不要发布答案。一个好的答案将有一个合理的理由说明它为什么可以解决 OP 的问题。