CSS 父元素具有特定 class 的子元素的选择器

Question

我需要在样式 sheet 文件中为 div 中的 strong 元素指定 CSS，如下面的代码所示。此 strong 元素位于父 div 内，其 class 为 commandBar.

<strong>Outside Div</strong>
<div class='commandBar'>
    <button class='dBtn'>Delete</button>
    <strong>My Name</strong>
    <button class='aBtn'>Add</button>
</div>

Answer 1

对于 select strong 元素是具有 class commandBar 的元素的后代，使用 descendant combinator along with a class selector:

.commandBar strong

为了仅 select 直接子 strong 元素，使用 child combinator, >:

.commandBar > strong

根据您的标记，您可能还想指定具有 class .commandBar（在本例中为 div）的元素类型：

div.commandBar strong

Answer 2

Descendant Selector The descendant selector matches all elements that are descendants of a specified element.

The following example selects all <p> elements inside <div> elements:

Example
div p {
    background-color: yellow;
}

http://www.w3schools.com/css/css_combinators.asp

所以在你的情况下你会使用：

.commandBar strong{
/* your css style here */
}

CSS 父元素具有特定 class 的子元素的选择器

CSS selector for a child element whose parent element has a certain class

css

css-selectors