如何使用CSS样式化html5 ul链接？

Question

试图更改ul中列表项的默认颜色。 CSS样式.ul_useful在代码块之前变灰了a：link，我认为我已经将颜色更改为白色，这正是我所需要的。尝试在ul中使用类，并且在ul中使用列表项均无济于事。任何帮助表示赞赏。

首先，这是样式表styles_p0.css：

body
    padding-top:5rem;
    background:url(/Users/king/proj_0/images/nylon_string_original.JPG);
    background-size: cover;
    overflow: hidden;
    font-family: Arial sans-serif;
    color: #ffffff;
    box-sizing: border-box;


div 
    font-family: Palatino, serif;
    padding: 3px;
    text-align: center;


h3 
    margin-top: 2%;
    margin-bottom: 0;


p 
    margin-bottom: 0;


table 
    margin: 1% auto 0 auto;
    border: 2px solid #ffffff;
    border-collapse: collapse;
    width: 50%;


th, td 
    border: 1px solid #ffffff;
    padding: 5px;
    text-align: center;


th 
    background-color: lightgray;


ul 
    list-style:none;


/* Smartphones (portrait and landscape) ---------- */
@media screen and (min-width: 320px) and (max-width: 480px)
    /* styles */

/* Smartphones (portrait) ---------- */
@media screen and (max-width: 320px)
    /* styles */

/* Smartphones (landscape) ---------- */
@media screen and (min-width: 321px)
    /* styles */

/* Tablets, iPads (portrait and landscape) ---------- */
@media screen and (min-width: 768px) and (max-width: 1024px)
    /* styles */

/* Tablets, iPads (portrait) ---------- */
@media screen and (min-width: 768px)
    /* styles */

/* Tablets, iPads (landscape) ---------- */
@media screen and (min-width: 1024px)
    /* styles */

/* Desktops and laptops ---------- */
@media screen and (min-width: 1224px)
    /* styles */

/* Large screens ---------- */
@media screen and (min-width: 1824px)
    /* styles */


.header_p 
        text-align:center;
        font-family: Arial sans-serif;
        text-shadow:5px 5px 10px #ffffff;


.join 
    padding:2px;
    margin-top: -20px;
    text-align: center;


.p > div 
        text-align: center;


.row > div 
    padding: 2px;



.section_d 
        padding: 2px;
        font-family: Palatino, serif;
        text-align:center;




.ul_useful 
/* unvisited link */
a:link 
      color: white;


/* visited link */
a:visited 
  color: green;


/* mouse over link */
a:hover 
  color: hotpink;


/* selected link */
a:active 
  color: white;



#footer_p 
    padding-top:2px;
    padding-left:4px;
    padding-right: 2px;
    margin-top: 2%;
    text-align:center;
    text-shadow:5px 5px 10px #ffffff;
    color: #FFFF00;


#Joe  /* image of joe */
    width:auto;
    height:auto;
    padding:0px;
    margin-right:2%;
    margin-top:2%;
    margin-bottom:0;
    border:2px solid #ffffff;


#why_play 
    margin-top: 0;

这里是html：

<!DOCTYPE html>
<html>
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="images/favicon_nylon.ico" type="image/x-icon" />
    <!-- Bootstrap core CSS -->
    <link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <!-- My styles for project0 -->
    <link rel="stylesheet" href="styles_p0.css">
    <title>Finger Style Guitar Club</title>
</head>
    <body>
        <nav class="navbar navbar-expand-lg fixed-top navbar-dark">
            <a class="navbar-brand" href="index.html">Home</a>
            <div class="container">
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
            <div class="collapse navbar-collapse" id="navbar1">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                    <a class="nav-link" href="about.html">About</a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="chart.html">Chart</a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="contact.html">Contact</a>
                    </li>
                </ul>
            </div>
            </div>
        </nav>
        <div>
            <h1>Finger Style Guitar Club</h1>
                    <h2>Drop That Pick!</h2>
                    <p class="header_p">It's gonna happen anyway...&#128526;</p>
        </div>
        <section>
            <div class="container">
                <div class="row">
                    <div class="col">
                        <h4 id="why_play">Connect with Joe</h3>
                            <a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
                            <img id="Joe" src="images/jam_smile_fgc175p.jpg" alt="Joe Mac">
                    </div>
                    <div class="col">
                        <h4>Useful Links:</h3>
                            <ul class="ul_useful">
                                <li class="ul_useful"><a href="https://www.jazzguitar.be/blog/walking-bass-lines/">Walking Bass Lines for Guitar</a></li>
                                <li class="ul_useful"><a href="https://www.fundamental-changes.com/walking-basslines-on-guitar/">Building Walking Bass Lines</a></li>
                                <li class="ul_useful"><a href="https://www.musicradar.com/tuition/guitars/acoustic-guitar-lessons-walking-basslines-489588">Acoustic Bass Lines</a></li>
                            </ul>
                    </div>
                    </div>
                </div>
            </div>
        <footer class="footer">
          <div class="container">
            <p id="footer_p">Copyright &copy; 2020 Joe Mac Inc. All rights reserved.</p>
          </div>
        </footer>
    </section>
   </body>
</html>