为什么 select:-moz-focusring 不删除此 bootstrap 导航栏中的 Firefox 虚线？

Question

我想去掉 bootstrap 导航栏中的 Firefox 虚线。

我在很多地方都读到，将此添加到 CSS 文件将摆脱它们：

    a:-moz-focusring {
        color: transparent;
        text-shadow: 0 0 0 #000;
    }

但在下面的代码中它们仍然出现。有谁知道为什么？

<html ng-app="mainApp">
    <head>
        <style type="text/css">
            [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
                display: none !important;
            }    
            select:-moz-focusring {
                color: transparent;
                text-shadow: 0 0 0 #000;
            }
        </style>
        <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-route.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
        <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
        <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet" />
    </head>    
    <body ng-cloak ng-controller="mainController">
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <div class="navbar-brand">AngularJS Routing</div>
                </div>
                <div>
                    <ul class="nav navbar-nav">
                        <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
                        <li><a href="#about"><i class="fa fa-shield"></i> About</a></li>
                        <li><a href="#contact"><i class="fa fa-comment"></i> Contact</a></li>
                    </ul>
                </div>
            </div>
        </nav>

        <div class="col-lg-12">
            <div ng-view></div>
        </div>        

        <script>
                            var mainApp = angular.module('mainApp', ['ngRoute']);
                            mainApp.config(function ($routeProvider) {
                                $routeProvider
                                        .when('/', {
                                            templateUrl: 'pages/home.htm',
                                            controller: 'mainController'
                                        })
                                        .when('/about', {
                                            templateUrl: 'pages/about.htm',
                                            controller: 'aboutController'
                                        })
                                        .when('/contact', {
                                            templateUrl: 'pages/contact.htm',
                                            controller: 'contactController'
                                        });
                            });
                            mainApp.controller('mainController', function ($scope) {
                                $scope.message = 'the home page';
                            });
                            mainApp.controller('aboutController', function ($scope) {
                                $scope.message = 'the about page';
                            });
                            mainApp.controller('contactController', function ($scope) {
                                $scope.message = 'the contact page';
                            });
        </script>
    </body>
</html>

Answer 1

以下应该有效——你应该使用标准的 :focus 伪 class 除非你有充分的理由使用非标准的 :-moz-focusring:

a:focus {
    outline: none;
}

color 和 text-shadow 影响文本，而不是焦点轮廓，因此它们不起作用。即使 MDN 也没有显示任何使用这些属性的示例，而是使用 outline。综上所述，使用 :focus.

还是比较可取的

但这里的实际问题是您在 <style> 元素之后包含了 Bootstrap。 Bootstrap 有一个启用焦点轮廓的 a:focus 规则，它会覆盖您的 CSS，因为它稍后会被包含在内。将它移到 <style> 元素上方将解决此问题：

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet" />

<style type="text/css">
    [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
        display: none !important;
    }    
    a:focus {
        outline: none;
    }
</style>

<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-route.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

一般来说，在 <style> 元素之前添加任何 <link> 和 @import 语句是个好主意，这样链接的样式表就不会无意中覆盖您的内部 CSS（尽管有特殊性）。

为什么 select:-moz-focusring 不删除此 bootstrap 导航栏中的 Firefox 虚线？

Why is select:-moz-focusring not removing Firefox dotted lines in this bootstrap nav bar?

css

firefox

twitter-bootstrap

angularjs