Question

我想编辑＆＃34; p＆＃34;在我的购物车页面上的内容div中的内容。

由于内容div出现在每个页面上，我不希望只是去内容+ p＆＃34;

是否有我可以使用的属性＆＃34;选择购物车模块上方div中的所有p标签＆＃34;

 <div class="content">
   <p>The content I want to edit<./p>

<div class="cart-module">
<div class="cart-total">

此外，属性规则是否存在减慢页面速度的问题？

Answer 1

如果结构始终如您在问题中描述的那样，那么您可以使用第一个子选择器：

.content > p:first-child { 
    background-color: red;
}

只有当内容位于内容的第一位时才能获得内容中的p。

关于第二个问题，它将始终取决于您在每个页面上使用的属性和数量。属性选择器比id或类慢，因为后者由浏览器索引，正是因为这个原因。无论如何，如果你没有大量使用它们，你肯定不会注意到它们之间的差异。

当然，如果您有权修改html结构，最简单的方法是将类添加到您要选择的p标签中......

Answer 2

纯CSS无法实现。如果你想在cart-module＆＃34;上方的div中设置所有p标签，请改为使用JQuery。

首先，定义一块CSS：

.my-custom-css {
    color: chucknorris;
}

然后使用JQuery prevAll()

$(".cart-module").prevAll().addClass("my-custom-css");
// Or do something with p tag
$(".cart-module").prevAll().find("p").addClass("my-custom-css");
// Edit content
$(".cart-module").prevAll().find("p").text("Thank God It's Friday");

哦，你想修改那些＆＃34;在cart-module＆＃34;上面的div中的所有p标签之类的内容，只需对prevAll()进行同样的操作。

使用属性选择上面的div

2 个答案: