没有类/ID的父级的CSS

Posted 2023-03-06

【中文标题】没有类/ID的父级的CSS

【英文标题】：css for parent without class/id

【发布时间】：2013-12-06 02:43:38

【问题描述】：

我有：

<form id="commentform">
    <p class="class1">
    <p class="class2">
    <p>
        <input id="captcha_code"></input>
    </p>
</form>

我想为既没有也没有类的“p”设置样式，我想以一种不设置其他“p”标签的方式来做。 我的“p”有一个 id (#captcha_code) 的孩子。我想，如果我可以设置#captcha_code parent 的样式，它不会涉及其他人......但我不知道该怎么做......

【问题讨论】：

CSS selector - element with this child 的可能重复项

【参考方案1】：

目前没有一种方法可以根据元素是否包含特定子元素来设置其样式。在您的情况下，我认为设置 <p> 样式的最佳方法是：

#commentform p:not([class])

结束你的段落isn't completely necessary，但它总是更好读。此外，you shouldn't add a closing tag 用于 html 格式的 input：

<form id="commentform">
    <p class="class1"></p>
    <p class="class2"></p>
    <p>
        <input id="captcha_code">
    </p>
</form>

JSFiddle

【讨论】：

实际上，关闭 p 元素并不总是需要在 HTML5 中完成，在 HTML4.01 中它是可选的，尽管我总是觉得这样做更安全。

参考：w3.org/html/wg/drafts/html/master/…

奇怪的是，你在 HTML 中不允许做的是有一个结束 </input> 标签。

谢谢@BoltClock 具有讽刺意味的是，我在问题中分享的答案是你写的，我什至没有意识到。

@oGeez：哈。我忘了我什至写了那个答案。

【参考方案2】：

试试这个：

p > input 
  // style for that..

使用它，样式将应用于input 的父级。

为此提琴：http://jsfiddle.net/afzaal_ahmad_zeeshan/WyV7A/

【讨论】：

这将设置所有 p 标签的样式，OP 要求仅使用 id captcha_code 设置输入的父级样式

对不起，我错过了父部分！ @Mauro，现在检查一下 :)

选择器存在，这意味着所有inputs 都是p 标签的直接子代。

当我说它不存在时我的错误我想说这里没有选择父级...“将应用于输入的父级”这是错误的

"样式将应用于input的父级。"没有。

【参考方案3】：

为了简单起见，这是无法做到的。

与子选择器 > 不同，css 中没有（并且可能永远不会）父选择器 <。

查看this article 了解原因。

【讨论】：

你错了。看看我回答中的小提琴！ :) 你会看到有一个标志..

@AfzaalAhmadZeeshan Nop 抱歉，您使用的是子选择器，而不是父选择器 :)