css - 我如何构建一个 CSS 选择器来突出显示/勾勒出焦点选项卡，同时不影响其他非选项卡小部件？

Question

问题:

用户可以使用“tab”键浏览页面并登陆“tabs”面板。但是，当它们最初落在“选项卡”面板上时 - 没有视觉指示(轮廓/突出显示/等)它们在那里。

-因此，他们认为他们的 Tab 键(或 Tab 面板)无法正常工作。

注意事项:

我怀疑这种新行为是由于从 1.8.x 升级到 1.10.x 时发生的 CSS 更改所致 - 但是，当然，我不确定。

我已经尝试了各种 css 条目来使焦点选项卡在视觉上勾勒/突出显示...-到目前为止，在选项卡上似乎具有视觉效果的是这个选择器:

    .ui-widget :focus     
    { 
        border-style: inset !important;
        border-width: 5px !important;
    }

...但是，此选择器过于宽泛，会影响页面上位于 tabs() DIV 之外的其他小部件。 --我只想在“选项卡”DIV 中“突出显示”重点选项卡。

问题:

如何构建一个 CSS 选择器来突出显示/勾勒出聚焦的选项卡，同时不影响其他非选项卡小部件？

(感谢您的帮助)

jquery脚本

    $(document).ready(function() {
        $('#tabdiv').tabs();  //<== tabs
        $( "input[type=submit], a, button" ).button().click(function( event ) {event.preventDefault();});        
        $( "#datepicker" ).datepicker();
    });

CSS

    .ui-widget :focus 
    { 
        border-style: inset !important;
        border-width: 3px !important;
    }   

HTML 片段

    <div>
        <h1>body-A</h1>
        <div id="tabdiv">
            <ul>
                <li><a href="#tabA">TabA</a></li>            
                <li><a href="#tabB">TabB</a></li>
                <li><a href="#tabC">TabC</a></li>
                <li><a href="#tabD">TabD</a></li>
            </ul>
            <div id="tabA">
                <div>
                    <span>tabA stuff</span>
                </div>
            </div>
            <div id="tabB">
                <div>
                    <span>tabB stuff</span>
                </div>
            </div>      
            <div id="tabC">
                <div>
                    <span>tabC stuff</span>
                </div>
            </div>
            <div id="tabD">
                <div>            
                    <span>tabD stuff</span>
                </div>
            </div>
        </div>
        <div>
            <p>Date: <input type="text" id="datepicker" /></p>

            <button>A button element</button> 
            <input type="submit" value="A submit button" /> 
            <a href="#">An anchor</a>        
        </div>
    </div>          

Answer 1

你可以使用下面的选择器

[id~=tab]:focus