如何使用 CSS 选择进入另一个项目的项目？答案

【问题标题】：How to select an item that is into another item using CSS?如何使用 CSS 选择进入另一个项目的项目？
【发布时间】：2014-02-11 02:11:40
【问题描述】：

在 HTML 中我有以下结构：

    <div class="row" id="info-section">
        <div class="col-sm-4">

            <div class="panel panel-default">
                <div class="panel panel-default">
                    <div class="panel-heading"><h4>Calendario Eventi</h4></div>
                    <div class="panel-body">
                        <?php
                            // 'My_Widgtet_Area' area, where the id is called:
                            if (is_active_sidebar('calendar_widget_zone')) : ?>

                                <div id="widget-sidebar">
                                    <ul>
                                        <?php dynamic_sidebar('calendar_widget_zone'); ?>
                                    </ul>
                                </div><!-- #widget-sidebar .widget-area -->

                            <?php endif; ?>
                    </div>
                </div>
            </div>

        </div>

现在，我想使用 CSS 选择（更改值） #info-section div

中的 .panel-heading 类>

如何仅选择嵌套在 #info-section div 中的 .panel-heading 项？

Tnx

安德烈亚

【问题讨论】：

你应该去阅读一些文献或学习 css 教程。我相信这个问题已经被问过数千次了，快速搜索就足以获得您需要的信息。

标签： html css xhtml

【解决方案1】：

您可以使用嵌套选择器或 in 选择器：

#info-section .panel-heading {
  /* css */
}

或者你可以使用子选择器（这意味着它应该在容器内，而不是在他们的孩子之一内）

#info-section > .panel-heading {
  /* css */
}

【讨论】：

【解决方案2】：

只需使用 CSS 选择器：

#info-section .panel-heading{
  //css stuff here
}

【讨论】：

【解决方案3】：

沿着黄砖路走:)

CSS

#info-section .panel-heading { 
    /* CSS STYLES */
}

【讨论】：

【解决方案4】：

CSS

#info-section .panel-heading{
  //Your Style
}

【讨论】：