Question

我有这个HTML代码，我无法更改或编辑，但我需要更改它的样子：

<form method="POST" id="go123pago">
    <div align="center" style="width:220px">
        <div style="float:left;padding:10px;width:190px">
            ....
        </div>
    </div>
</form>

我需要将padding: 30px 0 0 0设置为#go123pago第一个div，在这种情况下为220px，我该如何实现？

Answer 1

在纯CSS中你可以使用nth-of-type选择器，在你的情况下，它看起来像这样：

<强> HTML

<form method="POST" id="go123pago">
    <div align="center" style="width:220px">
        <div style="float:left;padding:10px;width:190px">
            ....
        </div>
    </div>
</form>

<强> CSS

#go123pago:nth-of-type(1) {
    padding: 30px 0 0 0
}

希望这有帮助！

Answer 2

我看到你标记了jQuery，所以这是一个使用它的解决方案。

$(document).ready(function(){
  $("#go123pago div").css("padding",  "30px 0 0 0");
})

的jsfiddle：

http://jsfiddle.net/4cjgLy0r/1/

Answer 3

您可以使用querySelector()（JS函数）查找给定CSS选择器的第一个匹配元素。

document.querySelector("div[style='width:220px']").style.padding = "30px 0 0 0";

但这仅适用于风格，而且只有width:220px。

现在我意识到你有jquery标签，你可以用jQuery更容易地做到这一点：

$("div[style='width:220px']").first().css("padding", "30px 0 0 0");

Answer 4

使用jQuery添加@David Poirier的答案，根据jQuery docs，.find()方法应该稍微快一点。

// Super-fast:
$( "#go123pago" ).find('div').css("padding",  "30px 0 0 0");

仅为一组匹配中的第一个div添加属性

4 个答案: