Question

我使用网站http://bootstrapdesigntools.com/tools/bootstrap-menu-builder/（非常有帮助 - 如果你还没有，请查看它）来创建一个响应式菜单栏。但是，我在编辑它的某些方面时遇到问题，因为我自己没有创建代码。我试图对代码进行逆向工程（不确定这个术语是否适用于编码）并且有九个问题。对不起，问题的数量。随意只回答几个。我昨晚发布了这个，但它很乱，所以重新发布一个更简单的版本。

1.。）如何为菜单的活动标签设置不同的颜色？

2。）什么是CSS选择器，如下面的定位？

#custom-bootstrap-menu.navbar-default .navbar-brand

3.。）为什么“.navbar-default”和“.navbar-brand”之间有空格，而上面代码中没有“#custom-bootstrap-menu.navbar-default”？

4.。）为什么背景在代码块中定义了三次，如下所示？这是旧版浏览器的备份吗？

   background-color: rgba(47, 196, 116, 1);
    background: -webkit-linear-gradient(top, rgba(54, 135, 2, 1) 0%, rgba(47, 196, 116, 1) 100%);
    background: linear-gradient(to bottom, rgba(54, 135, 2, 1) 0%, rgba(47, 196, 116, 1) 100%);

5.。）以下代码样式的结尾部分是什么？作为navbar-nav类的子项的列表项的子项的链接？

#custom-bootstrap-menu.navbar-default .navbar-nav>li>a

6。）设置完全透明的背景颜色有什么意义，如下面的代码所示？

#custom-bootstrap-menu.navbar-default .navbar-nav>li>a {
    color: rgba(255, 255, 255, 1);
    background-color: rgba(248, 248, 248, 0);

7.。）用逗号分隔两个目标是否只是使括号内的代码适用于两者？

#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:focus {

8。）在上面的代码中，我知道悬停是指用户将鼠标放在元素上。焦点有什么作用？我读过的描述就像“当某些事情获得焦点”时所写的那样。获得焦点究竟意味着什么？

9。）使用bootstrap类切换来定位navbar元素时，这是否意味着仅在屏幕调整大小时才进行更改？

#custom-bootstrap-menu.navbar-default .navbar-toggle:hover,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus

相关HTML：

    <div id="custom-bootstrap-menu" class="navbar navbar-default " role="navigation">
    <div class="container-fluid">
        <div class="navbar-header"><a class="navbar-brand" href="#">Brand Logo</a>
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse navbar-menubuilder">
            <ul class="nav navbar-nav navbar-left">
                <li><a href="#">Home</a>
                </li>
                <li><a href="/products">Products</a>
                </li>
                <li><a href="/about-us">About Us</a>
                </li>
                <li><a href="/contact">Contact Us</a>
                </li>
            </ul>
        </div>
    </div>
</div>

Answer 1

该工具可以通过＆＃34;活动样式＆＃34;
#custom-bootstrap-menu.navbar-default .navbar-brand将定位文字＆＃34;品牌＆＃34;或标记放在此标记
空格意味着下一个元素是前一个元素。当它们没有用空格分隔时，这意味着两个类/ id属于一个元素。
是的，第一个对所有浏览器都有效，并且备份到这些浏览器，这些浏览器无法应用渐变。基于webkit的浏览器需要-webkit-。
是的，直接儿童的链接。
-
是
焦点是单击元素的时间，就像单击输入以进行写入一样。

Answer 2

让我试着回答你的问题。

1.。）如何为菜单的活动标签设置不同的颜色？

应该有一个类（通常是.active）来应用当前活动的菜单项或选项卡。你只需要覆盖它的风格。

2。）什么是CSS选择器，如下面的定位？

#custom-bootstrap-menu.navbar-default .navbar-brand

这会定位具有类navbar-brand的所有元素 CHILDREN是一个标识为custom-bootstrap-menu和a的元素课程navbar-default适用于此。

3.。）为什么“.navbar-default”和“.navbar-brand”之间有空格，而上面代码中没有“#custom-bootstrap-menu.navbar-default”？

基本上，当选择器之间有space时，它指的是a 与#custom-bootstrap-menu.navbar-default .navbar-brand中的父子关系一样，此处.navbar-brand指的是子元素 #custom-bootstrap-menu.navbar-default。而当选择者没有空间，如#custom-bootstrap-menu.navbar-default，这意味着在这种情况下，AND操作<id>and<class>。

4.。）为什么背景在代码块中定义了三次，如下所示？这是旧版浏览器的备份吗？

这是针对不同类型的浏览器。基于WebKit的喜欢铬和野生动物园等。当你看到一些东西开始使用-webkit-表示我们的目标是基于WebKit的浏览器。

5.。）以下代码样式的结尾部分是什么？作为navbar-nav类的子项的列表项的子项的链接？

#custom-bootstrap-menu.navbar-default .navbar-nav>li>a

是。差不多正确。只是它指的是，链接即 immidiate children列表项的immidiate children 类navbar-nav`

6。）设置完全透明的背景颜色有什么意义，如下面的代码所示？

#custom-bootstrap-menu.navbar-default .navbar-nav>li>a {
    color: rgba(255, 255, 255, 1);
    background-color: rgba(248, 248, 248, 0);

当您希望字体颜色完全不透明时，通常会执行此操作与背景相比。

7.。）用逗号分隔两个目标是否只是使括号内的代码适用于两者？

#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:focus {

是的。这是正确的。这是您重用CSS并将其应用于各种CSS的方法元件。

8。）在上面的代码中，我知道悬停是指用户将鼠标放在元素上。焦点有什么作用？我读过的描述就像“当某些事情获得焦点”时所写的那样。获得焦点究竟意味着什么？

焦点使当前元素处于活动状态。例如，如果你是填写表单，然后在第一个文本字段中输入，然后输入第一个文本字段据说具有focus或者它是元素用户正在与之互动。他不一定要把鼠标放在上面那个领域，但他正在使用他的键盘与它进行交互。同样，当您通过点击使用键盘导航网页时多次Tab键，实际上你正在改变 focus从一个元素到另一个元素。但是，这是一个重要的观点请注意，并非所有HTML元素都能获得焦点。

9。）使用bootstrap类切换来定位navbar元素时，这是否意味着仅在屏幕调整大小时才进行更改？

这不会对屏幕调整大小生效，这可能意味着打开 - 关闭操作，根据需要添加或删除切换类在navbar元素的状态。

唷！那很长。 :)希望我能帮你理解这些东西。

Answer 3

使用代码检查器（如firebug for Firefox）或右键单击inspect element i Safari来查看CSS规则对不同元素的影响。如果单击源代码元素，它甚至会在您的css文件中显示行号以查找要更改的规则。

#menu-builder-navigation.navbar-default .navbar-nav>.active>a {}
#custom-bootstrap-menu.navbar-default .navbar-brand {}定位带有id的元素中带有“navber-brand”类的元素 “定制引导菜单”
#custom-bootstrap-menu.navbar-default {}定位元素同时使用ID custom-bootstrap-menu和类navbar-default
background: linear-gradient...是现代浏览器中展示的内容。另一个是旧浏览器的后备。
这通常意味着菜单一级*
您可以稍后使用简单的规则，jQuery或更改仅更改不透明度 JavaScript的。如果没有，您可以使用background:tansparent;
是的，用逗号分隔的两个目标都是两个类。
焦点是当元素被使用或有针对性地使用时 - 当你是在输入字段中写入它是目标。
在此示例中，悬停和目标具有相同的规则集。我想在这种情况下单击元素之后，目标规则集就开始了。

[edit] *对5号的回答有点不准确。

#custom-bootstrap-menu.navbar-default .navbar-nav li a

和

#custom-bootstrap-menu.navbar-default .navbar-nav>li>a

通常做同样的事情，除非它们之间有其他元素，如：<li><ol><li><a href="#"></a></li></ol></li>或菜单是多层次的。

如果你有一个多级菜单，这个css代码将针对不同的级别：

#custom-bootstrap-menu.navbar-default .navbar-nav>li>a（第1级）

#custom-bootstrap-menu.navbar-default .navbar-nav>li>ul>li>a（第2级）

#custom-bootstrap-menu.navbar-default .navbar-nav>li>ul>li>ul>li>a（第3级）

或

#custom-bootstrap-menu.navbar-default .navbar-nav li a（所有级别）

#custom-bootstrap-menu.navbar-default .navbar-nav li ul li a（第2级覆盖）

#custom-bootstrap-menu.navbar-default .navbar-nav li ul li ul li a（第3级覆盖）

逆向工程Bootstrap菜单栏

3 个答案: