CSS3 如何清除 a:-webkit-any-link 中的下划线

我只会在图片中描述我的问题。https://snag.gy/jIilU4.jpg有什么解决方案可以去除这种文字装饰吗？我试图添加文本装饰：无;但这对我不起作用。我想这很容易解释，但我对 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>

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

.logo a{
    text-decoration: none;
}

你在使用css选择器时遇到问题。您不要在ul li之前提及父类或Id，以及您为菜单设置的标签。所以这些标签会影响你的html页面上的所有ul，li。阅读此内容

 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>

css 选择是错误的。超链接是"a"标签，所以如果你想从整个页面中删除它，而不仅仅是一个部分，请使用{ ... }，或者如果它是一个特定的部分，例如.logo a { ... }。

相关内容

最新更新

热门标签：