Question

我有一些代码，我想在链接中应用我的父级别的边框，但是我的CSS在两个跨度上应用css样式？

<div id="DownloadButton">
    <a href="DownloadMovie.php/?FileName=Assignment 1- Regular Expression (2).docx&MovieID=2179136">    
        <span>
            <span class="glyphicon glyphicon-download-alt" aria-hidden="true" style="float:left;">
            </span>
                Assignment 1- Regular Expression (2).docx
        </span>
    </a>
</div>

我的css代码

#DownloadButton a span{
    font-size: 13px;
    display:inline-block;
    font-weight: bold;
    width:auto;
    padding:0px 10px 0px 0px;
    border-radius: 05px 5px 05px 05px;
    border:1px solid red;
}

我的输出图片http://i58.tinypic.com/amea00.png

Answer 1

我认为您可以将CSS选择器更改为：

#DownloadButton a > span

Answer 2

使用子选择器指定：

#DownloadButton a > span {

Answer 3

我认为你不需要CSS中的a。您可以使用:not将其定位，以省略内部span，因为它有class。

#DownloadButton  span:not(.glyphicon) {
    font-size: 13px;
    display:inline-block;
    font-weight: bold;
    width:auto;
    padding:0px 10px 0px 0px;
    border-radius: 05px 5px 05px 05px;
    border:1px solid red;
}

<div id="DownloadButton">
   
  <a href="DownloadMovie.php/?FileName=Assignment 1- Regular Expression (2).docx&MovieID=2179136">    
        <span>
            <span class="glyphicon glyphicon-download-alt" aria-hidden="true" style="float:left;">
            </span>
                Assignment 1- Regular Expression (2).docx
        </span>
    </a>
</div>

跨度的样式也适用于其子跨度

3 个答案: