为什么我的 tr:nth 孩子不为网站表工作？

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

因此，我正在尝试为作业创建一个个人网站，并且出于某种原因执行代码，该网站上的表格无法将任何行识别为每个单独的行。我有 html 格式的表格布局和 CSS 格式。有什么办法可以解决这个问题吗？

网站上的方格桌（红色和黑色）。但是，我不断得到以下结果：我不断得到图表。

table{
    width: 40%;
    text-align: center;
}
table, th, td{
  border: 3px solid white;
  border-collapse: collapse;
  text-align: center;
  padding: 8px;
}
tr:nth-child (even) {background-color: red;}
tr:hover td {background-color: orange;}
<!-- Header Section -->
<header>
    <h1>Welcome to Babila Fofung's Website!</h1>
</header>

<!-- Link to CS Department -->
<nav>
    <a href="http://www.cs.gsu.edu/" target="_blank">GSU Computer Science Department</a>
</nav>

<!-- Profile Section -->
<section id="profile">
    <h2 style="text-align: center;">This is me!:</h2>
    <div style="text-align: center;">
        <img src="Professional Photo 2.jpg" class = "ProffesionalImage" alt="Your Photo">
    </div>
</section>

<!--Start of Column for front page -->
<div class = "column">
<!--Start of first row for front page -->
    <div class = "row">
    
<!-- Assignments and Projects Section with Zebra-striped table -->
<section id="assignments-projects">
<h2>Assignments/Classwork/Projects:</h2>
<table>
<!-- First row: Header -->
<tr>
<th>Assignments</th>
<th>Classwork</th>
<th>Projects</th>
<th>In Class Practice</th>
</tr>
<!-- Second row: Assignment 1 -->
<tr>
<td>Assignment 1 (This Page is HW1!)</td>
<td><a href = "https://codd.cs.gsu.edu/~bfofung1/WebPro/CW/CW0/index.html">Classwork 0</td>
<td></td>
<td><a href = "https://codd.cs.gsu.edu/~bfofung1/WebPro/testing/tabledemo.html">Practice 1</td>
</tr>
<!-- Third row: Assignment 2 -->
<tr>
<td></td>
<td><a href = "https://codd.cs.gsu.edu/~bfofung1/WebPro/CW/CW1/ClassWork1.html">Classwork 1</td>
<td></td>
<td><a href = "https://codd.cs.gsu.edu/~bfofung1/WebPro/testing/IC3/oatmeal_cookies.html">Practice 2</td>
</tr>
</table>
</section>
</div>

<div class = "row">
<!-- Hobbies and Interests Section -->
<section id="hobbies-interests">
    <h2>Hobbies and Interests</h2>
    <ul>
        <li>Movie Watcher</a></li>
    <h5> Top 5 Favorite Live Action Movies: </h5>
        <ol>
        <li>Predator</li>
        <li>Logan</li>
        <li>Baby Driver</li>
        <li>Kingsmen</li>
        <li>Steve Jobs</li>
        </ol>
        <p></p>
        <li> <a href = "https://www.adobe.com">Photoshopping</a></li>
        <li> <a href = "https://www.barnesandnoble.com/">Book/Manga Reading </a></li>
    </ul>
</section>
</div> <!--End of second row for front page -->

<!--Start of second row for front page -->
<div class = "row">
<!-- Education and Dream Job Section -->
<section id="education-dream-jobs">
    <h2>My Education:</h2>
    <ul>
        <li>Shiloh High School</li>
        <li>Georgia State University</li>
    </ul>

    <h2>Top 3 Dream Jobs:</h2>
    <ol>
        <li>Game Developer</li>
        <li>Cybersecurity Analyst</li>
        <li>Web Developer</li>
        <li>It Help Desk</li>
    <a href="Resume Fall September 2024.pdf" target="_blank">Personal Resume</a>
    </ol>
</section>
</div> <!--End of second row for front page -->
</div> <!--End of first column for front page -->

<!-- Favorite Quote Section -->
<div class = "famousquote">
    "The only limit to our realization of tomorrow is our doubts of today." - Franklin D. Roosevelt
</div>

<div class = "footer">
<!-- External Links Section -->
<section id="external-links">
    <h2>Websites of Interest:</h2>
        <a href="https://github.com/BillaVanilla?tab=repositories" target="_blank">
        <img src = "Github.png" class = "githubpic" alt = "Github Pic"></a>
        <a href="https://www.linkedin.com/in/babila-fofung-89377022b" target="_blank">
        <img src = "Linkedln.png" class = "linkedlnpic" alt = "Linkedln Pic"></a>
</section>
</div>

html css css-selectors
1个回答
0
投票

不要在 

tr:nth-child
和 
(even)
之间留有空格，而要使其为 
tr:nth-child(even)
。如果你修复它有效：

table{
    width: 40%;
    text-align: center;
}
table, th, td{
  border: 3px solid white;
  border-collapse: collapse;
  text-align: center;
  padding: 8px;
}
tr:nth-child(even) {background-color: red;}
tr:hover td {background-color: orange;}
<!-- Header Section -->
<header>
    <h1>Welcome to Babila Fofung's Website!</h1>
</header>

<!-- Link to CS Department -->
<nav>
    <a href="http://www.cs.gsu.edu/" target="_blank">GSU Computer Science Department</a>
</nav>

<!-- Profile Section -->
<section id="profile">
    <h2 style="text-align: center;">This is me!:</h2>
    <div style="text-align: center;">
        <img src="Professional Photo 2.jpg" class = "ProffesionalImage" alt="Your Photo">
    </div>
</section>

<!--Start of Column for front page -->
<div class = "column">
<!--Start of first row for front page -->
    <div class = "row">
    
<!-- Assignments and Projects Section with Zebra-striped table -->
<section id="assignments-projects">
<h2>Assignments/Classwork/Projects:</h2>
<table>
<!-- First row: Header -->
<tr>
<th>Assignments</th>
<th>Classwork</th>
<th>Projects</th>
<th>In Class Practice</th>
</tr>
<!-- Second row: Assignment 1 -->
<tr>
<td>Assignment 1 (This Page is HW1!)</td>
<td><a href = "https://codd.cs.gsu.edu/~bfofung1/WebPro/CW/CW0/index.html">Classwork 0</td>
<td></td>
<td><a href = "https://codd.cs.gsu.edu/~bfofung1/WebPro/testing/tabledemo.html">Practice 1</td>
</tr>
<!-- Third row: Assignment 2 -->
<tr>
<td></td>
<td><a href = "https://codd.cs.gsu.edu/~bfofung1/WebPro/CW/CW1/ClassWork1.html">Classwork 1</td>
<td></td>
<td><a href = "https://codd.cs.gsu.edu/~bfofung1/WebPro/testing/IC3/oatmeal_cookies.html">Practice 2</td>
</tr>
</table>
</section>
</div>

<div class = "row">
<!-- Hobbies and Interests Section -->
<section id="hobbies-interests">
    <h2>Hobbies and Interests</h2>
    <ul>
        <li>Movie Watcher</a></li>
    <h5> Top 5 Favorite Live Action Movies: </h5>
        <ol>
        <li>Predator</li>
        <li>Logan</li>
        <li>Baby Driver</li>
        <li>Kingsmen</li>
        <li>Steve Jobs</li>
        </ol>
        <p></p>
        <li> <a href = "https://www.adobe.com">Photoshopping</a></li>
        <li> <a href = "https://www.barnesandnoble.com/">Book/Manga Reading </a></li>
    </ul>
</section>
</div> <!--End of second row for front page -->

<!--Start of second row for front page -->
<div class = "row">
<!-- Education and Dream Job Section -->
<section id="education-dream-jobs">
    <h2>My Education:</h2>
    <ul>
        <li>Shiloh High School</li>
        <li>Georgia State University</li>
    </ul>

    <h2>Top 3 Dream Jobs:</h2>
    <ol>
        <li>Game Developer</li>
        <li>Cybersecurity Analyst</li>
        <li>Web Developer</li>
        <li>It Help Desk</li>
    <a href="Resume Fall September 2024.pdf" target="_blank">Personal Resume</a>
    </ol>
</section>
</div> <!--End of second row for front page -->
</div> <!--End of first column for front page -->

<!-- Favorite Quote Section -->
<div class = "famousquote">
    "The only limit to our realization of tomorrow is our doubts of today." - Franklin D. Roosevelt
</div>

<div class = "footer">
<!-- External Links Section -->
<section id="external-links">
    <h2>Websites of Interest:</h2>
        <a href="https://github.com/BillaVanilla?tab=repositories" target="_blank">
        <img src = "Github.png" class = "githubpic" alt = "Github Pic"></a>
        <a href="https://www.linkedin.com/in/babila-fofung-89377022b" target="_blank">
        <img src = "Linkedln.png" class = "linkedlnpic" alt = "Linkedln Pic"></a>
</section>
</div>

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