Question

我一直在关注如何创建WP主题的YouTube教程。在这种情况下，我不明白div类的命名是如何工作的。

    <div id="container">
        <header>
            <div class="five columns clearfix">
                <a href="<?php echo get_option('home'); ?>"><img src="<?php bloginfo('template_url'); ?>/img/templogo.png" title="<?php bloginfo('title'); ?>"></a>
            </div><!--#five columns clearfix-->

            <div class="sixteen columns nav-bar">
                <?php wp_nav_menu( array('container_class' => 'main-nav', 'container' => 'nav')); ?>
            </div><!--#sixteen columns nav-bar-->                   
        </header>
    </div><!--#container-->

我只能猜测真正的nav类之前的“n列”是我们使用的skeleton.css。所以继续我的问题，当我们开始做CSS时，我们只将CSS中的“十六列导航栏”编辑为“.nav-bar”，为什么呢？我原以为我们会使用“.sixteen columns nav-bar”，因为它是div类。

我再次感谢任何帮助和一些解释。感谢提前社区！

Answer 1

此CSS分配：<div class="sixteen columns nav-bar">表示div有3个类：.sixteen，.columns和.nav-bar。

如果你要覆盖，你想在你的CSS中引用.sixteen.columns.nav-bar。

如果您将其引用为此.sixteen columns nav-bar，则CSS解析器将查找类.sixteen的DOM节点，该节点包含名为columns的标记，该标记包含另一个名为{{的标记1}}。

Answer 2

您应该始终尝试单独保留基本样式。十六和列是网格应该如何工作的核心样式。你最好不要覆盖那些风格。

如果您需要在导航栏中添加样式，我会继续使用

.nav杆要么 div.nav杆

我还建议您在向导航栏添加样式时不要更改大小。同样，你想离开网格去做它本来应该做的事情。我建议只添加样式，如背景，颜色等，但远离宽度

命名Div和Skeleton CSS

2 个答案: