CSS3如何从-webkit-any-link清除下划线

问题描述 投票：1回答：3

我将在图片中描述我的问题。 https://snag.gy/jIilU4.jpg有没有解决方案来摆脱这种文字装饰？我试着添加text-decoration：none;但它对我不起作用。我想这很容易解释，但我对CSS很新。

 body {
    background-image: url(img/bg.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: top;
    max-width: 100%;
    height: auto;
    background-size: cover;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #4CAF50;
}

.logo {
    text-align: center;
}

.logo img {
    height: auto;
    width: auto;
    max-width: 300px;
    max-height: 300px;
    overflow: hidden;
    transition-duration: 0.8s;
    transition-property: transform;
}

.logo img:hover {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
}

.logo a {
    text-decoration: none;
}

#slideshow {
    margin: 0 auto;
    position: relative;
    width: 240px;
    height: 240px;
    padding: 10px;
    display: box;
    flex-align: center;
    flex-pack: center;
}

#slideshow > div {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
}

有一个HTML代码：

 <!DOCTYPE html>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">

<head>

    <title>How to align the items of the flexible element</title>
    <link rel="stylesheet" type="text/css" href="css/styles.css" />
</head>

<body>
    <div class="menu">
        <ul>
            <li><a class="active" href="#home">Home</a></li>
            <li><a href="#contact">Account</a></li>
            <li><a href="#about">Library</a></li>
            <li><a href="#about">Download</a></li>
            <li><a href="#about">Community</a></li>
            <li><a href="#about">Highscores</a></li>
            <li><a href="#about">Premium</a></li>
            <li><a href="#about">Forum</a></li>
        </ul>
    </div>
    <div class="logo">
        <a href="/" title="Medivia Online">
            <img src="css/img/medivia.png" alt="Medivia Logo">
        </a>
    </div>

    <div style="width:800px; margin:0 auto;" id="slideshow">

        <div>
            <img src="css/img/chimera.png">
        </div>
        <div>
            <img src="css/img/queens_follower.png">
        </div>
        <div>
            <img src="css/img/player_killing.png">
        </div>
        <div>
            <img src="css/img/general.png">
        </div>
        <div>
            <img src="css/img/hydra.png">
        </div>
        <div>
            <img src="css/img/ogre_death.png">
        </div>
        <div>
            <img src="css/img/raid.png">
        </div>
        <div>
            <img src="css/img/icenhaal.png">
        </div>

    </div>

    <script src="js/jquery-3.1.1.min.js">
    </script>
    <script>
        $("#slideshow > div:gt(0)").hide();

        setInterval(function () {
            $('#slideshow > div:first')
                .fadeOut(1000)
                .next()
                .fadeIn(1000)
                .end()
                .appendTo('#slideshow');
        }, 3000);
    </script>
</body>
html css css3
3个回答
0
投票

你有css选择器的问题。您不要在ul li之前提及父类或Id以及为菜单设置的标记。所以那些标签会影响你的html页面上的所有ul，li，a。 Read This

 body {
background-image: url(img/bg.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top;
max-width: 100%;
height: auto;
background-size: cover;
}

.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

.menu li {
float: left;
}

.menu li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

.menu a:hover:not(.active) {
background-color: #111;
}

.active {
background-color: #4CAF50;
}

.logo {
text-align: center;
}

.logo img {
height: auto;
width: auto;
max-width: 300px;
max-height: 300px;
overflow: hidden;
transition-duration: 0.8s;
transition-property: transform;
}

.logo img:hover {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}

.logo a {
text-decoration: none;
}

#slideshow {
margin: 0 auto;
position: relative;
width: 240px;
height: 240px;
padding: 10px;
display: box;
flex-align: center;
flex-pack: center;
}

#slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
 <!DOCTYPE html>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">

<head>

<title>How to align the items of the flexible element</title>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
</head>

<body>
<div class="menu">
    <ul>
        <li><a class="active" href="#home">Home</a></li>
        <li><a href="#contact">Account</a></li>
        <li><a href="#about">Library</a></li>
        <li><a href="#about">Download</a></li>
        <li><a href="#about">Community</a></li>
        <li><a href="#about">Highscores</a></li>
        <li><a href="#about">Premium</a></li>
        <li><a href="#about">Forum</a></li>
    </ul>
</div>
<div class="logo">
    <a href="/" title="Medivia Online">
        <img src="css/img/medivia.png" alt="Medivia Logo">
    </a>
</div>

<div style="width:800px; margin:0 auto;" id="slideshow">

    <div>
        <img src="css/img/chimera.png">
    </div>
    <div>
        <img src="css/img/queens_follower.png">
    </div>
    <div>
        <img src="css/img/player_killing.png">
    </div>
    <div>
        <img src="css/img/general.png">
    </div>
    <div>
        <img src="css/img/hydra.png">
    </div>
    <div>
        <img src="css/img/ogre_death.png">
    </div>
    <div>
        <img src="css/img/raid.png">
    </div>
    <div>
        <img src="css/img/icenhaal.png">
    </div>

</div>

<script src="https://code.jquery.com/jquery-3.1.1.min.js">
</script>
<script>
    $("#slideshow > div:gt(0)").hide();

    setInterval(function () {
        $('#slideshow > div:first')
            .fadeOut(1000)
            .next()
            .fadeIn(1000)
            .end()
            .appendTo('#slideshow');
    }, 3000);
</script>
</body>
2
投票

您的目标是div而不是链接（标记）。

.logo a{
    text-decoration: none;
}
0
投票

css的选择是错误的。超链接是“a”标签，因此如果您希望从整个页面中删除它，不只是一个部分使用{...}或者如果它是一个特定部分，例如.logo a {...}。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.