Question

I need to change the style of a hyperlink that is echoed in php.

This is how the line of code currently looks:

<div id='letter'>
  </br>A</div>
    </br>

    <?php
    $result = mysqli_query($con,"SELECT * From Artist WHERE ArtistNamn LIKE 'a%'");
    while($row = mysqli_fetch_array($result)) {
        echo "<div id='artistlista'>";
        echo "<ul><li><a href='getArtistSongs.php?artistid=" . $row['ID'] . "'>" . $row['ArtistNamn'] .  "</a></li></ul>";
        echo "</div>";
    }

    ?>


    <div id='letter'>
  </br>B</div>

Code itself works as intended and extracts from the database correctly however the problem is, the link which is echoed shows up as a regular hyperlink and ignores my css id artistlista.

This is how it looks in the css file:

#artistlista {
  color: #ffffff;
  text-decoration: none;
  display: block;
  padding: 15px 25px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14px;
  position: relative;
  -webkit-transition: color .25s;
  -moz-transition: color .25s;
  -ms-transition: color .25s;
  -o-transition: color .25s;
  transition: color .25s;
}

#artistlista ul li a {
  color: #ffffff;
  text-decoration: none;
  display: block;
  padding: 15px 25px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14px;
  position: relative;
  -webkit-transition: color .25s;
  -moz-transition: color .25s;
  -ms-transition: color .25s;
  -o-transition: color .25s;
  transition: color .25s;
}
#artistlista ul li a:hover {
  color: #333333;
}

Now, as you may see from the code I have another div with the ID letter. What I find very strange is if i simply change the id in the php code to id "letter" it does not ignore it and actually formats it correctly.

<?php
    $result = mysqli_query($con,"SELECT * From Artist WHERE ArtistNamn LIKE 'a%'");
    while($row = mysqli_fetch_array($result)) {
        echo "<div id='letter'>";
        echo "<ul><li><a href='getArtistSongs.php?artistid=" . $row['ID'] . "'>" . $row['ArtistNamn'] .  "</a></li></ul>";
        echo "</div>";
    }

    ?>

And this is what it looks like in the css

#letter {
  color: #ffffff;
  text-decoration: none;
  display: block;
  padding: 15px 25px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 70px;
  position: relative;
  -webkit-transition: color .25s;
  -moz-transition: color .25s;
  -ms-transition: color .25s;
  -o-transition: color .25s;
  transition: color .25s;
}

I have tried a couple of things: using a .class instead of #id results in the same problem. I tried using the php code inside the div instead of echoing it out. Results in the same problem, works with "letter" but not with "artistlista".

Is there something that I'm missing or overlooking?

Edit:

I took Alexanders advice and removed the for 25 other elements and tried making artistlista as .class to no avail. However, I noticed something strange. If I change the name of id #letter in css file to for example #test and do the same with the div to format is ignored and I cannot see the text unless it is highlighted. I do not have another row in the css with "letter" in it so the problem is not there. I have a feeling that this might be related to my original question. It seems like id/classes won't be created correctly?

Answer 1

您不应该有多个具有相同ID的元素。尝试将您共享的代码段中的所有ID切换到类，看看它是否有效。拥有相同ID的多个元素会导致浏览器出现不可预测的行为，因此您的样式可能会也可能不会应用。

Answer 2

好的，我发现了这个问题。就像我从一开始就怀疑它是非常简单的。代码是正确的，但我接受了Alexanders的建议，并决定为每个字母回显div，而不是直接在HTML中，这也提供了更好的结构。问题本身就是网站缓存，因为我在本地运行网站（我可能应该在OP中提到它）缓存会覆盖新文件并保留旧设置。在隐姓埋名中运行它解决了它，现在一切正常。

需要更改支持Java 8的回显<a href=""> in php

2 个答案: