CSS: 从ID中选择孙子Anchors

Question

我只想将 CSS 应用于锚点，以便删除边框并使其背景透明。不幸的是 HTML 是自动生成的，因此我无法删除或编辑它们 class。仅在显示时覆盖。

此处为生成代码（为防止共享公司私有代码而修改）。

    <div class="ui-content" role="main">
        <div class="voOutput" id="titlePrompt">
            <div style="padding:30px;">
                Welcome:
            </div>
        </div>
        <div data-role="controlgroup" id="groupDiv" class="ui-controlgroup ui-controlgroup-vertical ui-corner-all">
            <div class="ui-controlgroup-controls ">
                <a class="ui-btn ui-shadow ui-corner-all ui-first-child" href="..." id="menu_00MenuAuth_Continue">
                    <button class="bgGreen ui-btn ui-shadow ui-corner-all">Continue</button>
                </a>
                <a class="ui-btn ui-shadow ui-corner-all voMenuItem" href="..." id="menu_00MenuAuth_No">
                    <button class="bgRed ui-btn ui-shadow ui-corner-all ui-last-child">No</button>
                </a>
            </div>
        </div>
        <div class="voOutput" id="finalPrompt">Our policy of... <a href="https://www.w3schools.com" target="_blank" class="ui-link">here</a>.
        </div>
    </div>

方法一

我正在尝试应用 CSS

.transparentAnchor {
    background: rgba(255,255,255,0);
    color: red;
    border-width: 0 0 0 0;
}

HTML

                <a class="ui-btn ui-shadow ui-corner-all ui-first-child transparentAnchor " href="..." id="menu_00MenuAuth_Continue">
                    <button class="bgGreen ui-btn ui-shadow ui-corner-all">Continue</button>
                </a>
                <a class="ui-btn ui-shadow ui-corner-all voMenuItem transparentAnchor " href="..." id="menu_00MenuAuth_No">
                    <button class="bgRed ui-btn ui-shadow ui-corner-all ui-last-child">No</button>
                </a>

但是，它对我不起作用！！！

方法 2

我可以select#groupDiv

<style>
    #groupDiv > div:* {
      background: rgba(255,255,255,0);
      color: red;
      border-width: 0 0 0 0;
    }
</style>

问题：

我必须如何使用方法 1 定义 class？

如何select Id groupDiv 的Anchors（孙子的）？ 显然我的方法2 定义错误！（我有Id，我想申请第一个<div...>儿子的主播<a...>children。

Answer 1

有些问题，为什么 <a> 中需要一个按钮？

但是，你可以这样解决：

 #groupDiv > div a:first-child {
      opacity:.5
 }

    <div class="ui-content" role="main">
        <div class="voOutput" id="titlePrompt">
            <div style="padding:30px;">
                Welcome:
            </div>
        </div>
        <div id="groupDiv" class="ui-controlgroup ui-controlgroup-vertical ui-corner-all">
            <div class="ui-controlgroup-controls ">
                <a class="ui-btn ui-shadow ui-corner-all ui-first-child">
                    <button class="bgGreen ui-btn ui-shadow ui-corner-all">Continue</button>
                </a>
                <a class="ui-btn ui-shadow ui-corner-all voMenuItem">
                    <button class="bgRed ui-btn ui-shadow ui-corner-all ui-last-child">No</button>
                </a>
            </div>
        </div>
    </div>

CSS: 从ID中选择孙子Anchors

CSS: Selecting Grandsons Anchors from ID

html

css

anchor