使用没有ID或类的css设置div的样式

I'm looking for a way to style a div that has no ID or class association. I'm not looking for comments suggesting that I apply an ID or a class to the div's myself as the code I'm looking to modify is part of a wordpress plugin, which when updated would reset any styles I apply.

我正在寻找一种方式来设置一个没有ID或类关联的div。我不是在寻找建议我将自己的ID或类应用于div自己的评论,因为我想要修改的代码是wordpress插件的一部分,更新时会重置我应用的任何样式。

The code that I'm trying to modify is:

我试图修改的代码是:

<div class="gallery_detail_box">
    <div><?php echo $post->post_title; ?></div>
    <div><?php echo the_excerpt_max_charlength(100); ?></div>
    <a href="<?php echo $permalink; echo basename( get_permalink( $post->ID ) ); ?>"><?php echo $gllr_options["read_more_link_text"]; ?></a>
</div>

I have tried targeting the div containing "post_title" as I want to make that bold and have tried several different ways but to no avail, my last attempt at targeting that div was:

我已经尝试将包含“post_title”的div作为目标,因为我想使其变得粗体并尝试了几种不同的方法但无济于事,我最后一次尝试定位该div是:

.gallery_detail_box > #div {
    font-weight:bold;
}

.gallery_detail_box #div #div {
    font-weight:normal;
}

Where am I going wrong?

我哪里错了?

6 个解决方案

#1

To target each of the child DIVs Try this:

定位每个孩子DIV试试这个:

div.gallery_detail_box div:nth-child(1) {....}
div.gallery_detail_box div:nth-child(2) {....}

Good Luck.

#2

# is used when referencing IDs. A div is not an ID but a tag.

引用ID时使用#。 div不是ID而是标签。

Try

.gallery_detail_box div {
   font-weight: bold;
 }

#3

Take out the # sign. When targeting a type selector you just use the selector name without any prefix.

取出#号。在定位类型选择器时,您只需使用不带任何前缀的选择器名称。

#4

Depending on what browser you are using this may or may not work. It will not work in older versions of IE(7,8), or any other browsers that don't support CSS 3.

根据您使用的浏览器,这可能有效,也可能无效。它不适用于旧版本的IE(7,8)或任何其他不支持CSS 3的浏览器。

.gallery_detail_box {
    font-weight:normal;
}

.gallery_detail_box div:nth-child(1){
    font-weight:bold;
}

For older browser

对于旧版浏览器

.gallery_detail_box {
    font-weight:normal;
}

.gallery_detail_box div:first-child{
    font-weight:bold;
}

To then apply custom styles to the second, third, etc nested div in the older browsers you would do:

然后将自定义样式应用于旧版浏览器中的第二个,第三个等嵌套div:

.gallery_detail_box div:first-child + div{
    font-weight:bold;
}
/*(second)*/
.gallery_detail_box div:first-child + div + div{
    font-weight:bold;
}
/*(third)*/

etc.

#5

Easiest way to do this will be with a first-child psuedoselector.

最简单的方法是使用第一个孩子的psuedoselector。

.gallery_detail_box div:first-child {
    font-weight: bold;
}

This has ramifications for older browsers. Check the MDN compatibility chart to see if any of your target browsers are affected: https://developer.mozilla.org/en-US/docs/CSS/:first-child

这对旧版浏览器有影响。检查MDN兼容性图表以查看是否有任何目标浏览器受到影响:https://developer.mozilla.org/en-US/docs/CSS/:first-child

If you need to target child elements beyond the first, you can use the :nth-child(2) psuedoselector.

如果需要将子元素作为第一个以外的子元素,则可以使用:nth-child(2)psuedoselector。

The other option would be to use JavaScript, which would work reliably in, well, any browser with JavaScript support.

另一个选择是使用JavaScript,它可以在任何支持JavaScript的浏览器中可靠地工作。

#6

Give your div a class. Its poor browser optimization to do:

给你的div上课。它糟糕的浏览器优化做:

.class div{}

Because the browser does a reverse search through the dom when adding css to elements.

因为浏览器在向元素添加css时通过dom进行反向搜索。

https://developers.google.com/speed/docs/best-practices/rendering

#1