Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/85.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html 覆盖列表项上的引导样式<;李>;行为不符合预期_Html_Css_Twitter Bootstrap - Fatal编程技术网

Html 覆盖列表项上的引导样式<;李>;行为不符合预期

Html 覆盖列表项上的引导样式<;李>;行为不符合预期,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我不是一个网络层的人,所以如果这是一个愚蠢的问题,我道歉 我试图在鼠标悬停时添加下划线boostrap下拉菜单项,但收到一个错误,表明我的属性值无效。我经历了一系列的循环,但当前的代码看起来是这样的 HTML: <li class="dropdown"><a href="#" class="dropdown-toggle header-link" data-toggle="dropdown">Clubs <span class

我不是一个网络层的人,所以如果这是一个愚蠢的问题,我道歉

我试图在鼠标悬停时添加下划线boostrap下拉菜单项,但收到一个错误,表明我的属性值无效。我经历了一系列的循环,但当前的代码看起来是这样的

HTML:

<li class="dropdown"><a href="#" class="dropdown-toggle header-link"
                    data-toggle="dropdown">Clubs <span class="caret"></span></a>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Rugby Clubs</title>

<link rel="stylesheet" type="text/css" href="../css/styles.css">
<link rel="stylesheet"
    href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script
    src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

</head>
<body>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Logo -->
            <div class="navbar-header">
                <a href="#" class="navbar-brand">RUGBY</a>
            </div>

            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
            </button>

            <div class="collapse navbar-collapse" id="mainNavBar">
            <ul class="nav navbar-nav">
                <li><a href="#">Home</a></li>
                <li class="dropdown"><a href="#" class="dropdown-toggle header-link"
                    data-toggle="dropdown">Clubs <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Womens Rugby</a></li>
                        <li><a href="#">Mens Rugby</a></li>
                        <li><a href="#">High School Girls Rugby</a></li>
                        <li><a href="#">High School Boys Rugby</a></li>
                    </ul></li>
                <li><a href="#">Events</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
              <li><a href="#">Sign In</a></li>
              <li><a href="#">Join</a></li>
            </ul>
            </div>
        </div>
    </nav>
</body>
</html>
任何帮助都将不胜感激

我想显示所有的HTML可能会有所帮助,所以

HTML:

<li class="dropdown"><a href="#" class="dropdown-toggle header-link"
                    data-toggle="dropdown">Clubs <span class="caret"></span></a>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Rugby Clubs</title>

<link rel="stylesheet" type="text/css" href="../css/styles.css">
<link rel="stylesheet"
    href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script
    src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

</head>
<body>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Logo -->
            <div class="navbar-header">
                <a href="#" class="navbar-brand">RUGBY</a>
            </div>

            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
            </button>

            <div class="collapse navbar-collapse" id="mainNavBar">
            <ul class="nav navbar-nav">
                <li><a href="#">Home</a></li>
                <li class="dropdown"><a href="#" class="dropdown-toggle header-link"
                    data-toggle="dropdown">Clubs <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Womens Rugby</a></li>
                        <li><a href="#">Mens Rugby</a></li>
                        <li><a href="#">High School Girls Rugby</a></li>
                        <li><a href="#">High School Boys Rugby</a></li>
                    </ul></li>
                <li><a href="#">Events</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
              <li><a href="#">Sign In</a></li>
              <li><a href="#">Join</a></li>
            </ul>
            </div>
        </div>
    </nav>
</body>
</html>

谢谢。

我假设通过嵌套,您使用的SCS更少。在这种情况下,请执行以下操作:

a.header-link {

    &:hover {
       text-decoration:underline;
    }
}
您所编写的将按如下方式编译:.header链接中包含一个类“hover”的锚标记子项。在HTML中没有这样的内容。您有一个图标;)

如果不使用LESS或SCS,则不要嵌套。这是我提到的处理器中唯一可以做的事情。改为这样做:

 a.header-link {  something }

 a.header-link:hover {
    text-decoration:underline !important;
 }

我假设通过嵌套,您使用的SCS更少。在这种情况下,请执行以下操作:

a.header-link {

    &:hover {
       text-decoration:underline;
    }
}
您所编写的将按如下方式编译:.header链接中包含一个类“hover”的锚标记子项。在HTML中没有这样的内容。您有一个图标;)

如果不使用LESS或SCS,则不要嵌套。这是我提到的处理器中唯一可以做的事情。改为这样做:

 a.header-link {  something }

 a.header-link:hover {
    text-decoration:underline !important;
 }
试试这个: 试试这个:
应该是这样的:

a.header-link:hover {
  text-decoration:underline;
}

应该是这样的:

a.header-link:hover {
  text-decoration:underline;
}


您使用的是像SASS或更少的CSS预处理器吗?您使用的是像SASS或更少的CSS预处理器吗?我没有使用预处理器库作为建议,我还在学习,还没有进入预处理器。我尝试了你的建议,但没有成功。如果我在firefox中使用开发工具,样式元素就不会出现。在chrome和firefox中,我仍然没有下划线。试试看!最后很重要。您可能会有其他CSS特性覆盖它。我编辑了我的答案。使用!重要规则在大多数情况下,请确保您可以使用它,但对于将来的使用,您需要确保您了解它的编写原因,并对使用它有一个很好的解释。否则,在您阅读CSS代码之后出现的程序员可能不理解为什么会出现CSS代码,并且会使用其他特定规则来覆盖它(例如在标记中写入规则等)。您是对的,我通常不会建议您!重要规则。几个月没有了。但在这种情况下,特异性不起作用。如果你想解释这件事!对于下一个程序员来说,重要的规则很难,请尝试解释3、4或更多级别的特殊性。如果它是我的网站,我会找到它的特异性并纠正它。我看不到他的整个网站,所以我不知道我没有使用预处理器来提供建议,我还在学习,还没有转到预处理器。我尝试了你的建议,但没有成功。如果我在firefox中使用开发工具,样式元素就不会出现。在chrome和firefox中,我仍然没有下划线。试试看!最后很重要。您可能会有其他CSS特性覆盖它。我编辑了我的答案。使用!重要规则在大多数情况下,请确保您可以使用它,但对于将来的使用,您需要确保您了解它的编写原因,并对使用它有一个很好的解释。否则,在您阅读CSS代码之后出现的程序员可能不理解为什么会出现CSS代码,并且会使用其他特定规则来覆盖它(例如在标记中写入规则等)。您是对的,我通常不会建议您!重要规则。几个月没有了。但在这种情况下,特异性不起作用。如果你想解释这件事!对于下一个程序员来说,重要的规则很难,请尝试解释3、4或更多级别的特殊性。如果它是我的网站,我会找到它的特异性并纠正它。我看不到他的整个网站,所以我不知道这是我尝试的迭代之一。在FirefoxDeveloper中,它使css元素完全消失。在Chrome和Firefox中,我仍然没有下划线。你能提供一个演示吗?我现在把所有的东西都放在帖子里了。这就是我正在运行的全部内容。谢谢这是我尝试的迭代之一。在FirefoxDeveloper中,它使css元素完全消失。在Chrome和Firefox中,我仍然没有下划线。你能提供一个演示吗?我现在把所有的东西都放在帖子里了。这就是我正在运行的全部内容。谢谢