圆角并突出显示所选的答案

【问题标题】：rounded corners and highlight the selected one圆角并突出显示所选的
【发布时间】：2016-12-03 05:22:54
【问题描述】：

我正在开发 angularJS 应用程序。我有一个网页，其中包含使用 angularJs 创建的多个选项卡。请找到工作标签示例：http://plnkr.co/edit/jHsdUtw6IttYQ24A7SG1?p=preview

我想用圆角显示所有选项卡的边框并突出显示选定的选项卡，如下图所示。我尝试使用 css 但无法达到预期的效果。请建议。

代码：

<html>   
   <head>
        <script data-require="angular.js@1.1.5" data-semver="1.1.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
        <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.5.0.js"></script>
        <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
        <style>
            .nav-tabs>.active>a, .nav-tabs>.active>a:hover, .nav-tabs>.active>a:focus {
                background-color: pink;
            }
            .pageSecTitle,.sel td:nth-child(2) {
                border: 0;
            }
            td select {
                vertical-align: top;
            }

       </style>
        <script>
            //controller for tabs
            var app = angular.module('plunker', ['ui.bootstrap']);
            app.controller("TabsParentController", function ($scope) {
                var setAllInactive = function() {
                    angular.forEach($scope.workspaces, function(workspace) {
                        workspace.active = false;
                    });
                };
                $scope.workspaces =
                        [
                            { id: 1, name: "Tab1", active:true},
                            { id: 2, name: "Tab2", active:false},
                            { id: 3, name: "Tab3", active:false}
                        ];
                $scope.addWorkspace = function () {
                    setAllInactive();
                };
            });
            app.controller ("TabsChildController", function($scope, $log){
            });
         </script>
    </head>
    <body>
    <br><br>
    <div ng-controller="TabsParentController">
        <tabset>
            <tab ng-repeat="workspace in workspaces"
                 heading="{{workspace.name}}"
                 active=workspace.active>
                <div ng-controller="TabsChildController">
                    --some dynamic content here--
                </div>
             </tab>
        </tabset>
    </div>
    </body>
    </html>

【问题讨论】：

在你的css中你试过添加'！important'吗？像这样：.nav-tabs>.active>a, .nav-tabs>.active>a:hover, .nav-tabs>.active>a:focus { background-color: pink !important; }
@Mickers - 是的，我正在尝试标签在附件图像中的圆角外观，并突出显示我无法实现的选定标签。
尽可能避免使用!important。
不！不要使用!important，始终避免使用它。它旨在用于 user 样式表，而不是 author 样式表。如果您必须使用 important，那么您需要了解更多关于选择器特异性的知识。
图片中的斜边需要超过border-radius。有几种技术，包括:before 和:after，或使用CSS 3D 变换。这里有几个之前的 SO 问题：stackoverflow.com/questions/16825042/… 和 stackoverflow.com/questions/8895273/…

标签： javascript html css angularjs

【解决方案1】：

尝试将此 css 规则添加到您已有的 css 中：

.nav-tabs>li>a, .nav-tabs>li>a:hover, .nav-tabs>li>a:focus {
    border: 1px solid red;
}

它应该为所有非活动标签添加一个红色边框。您可以通过添加当前用于设置背景粉红色的 css 规则来为活动选项卡添加边框。

【讨论】：