上下文：我试图编辑只有两行的表的第一行。目前是所有tr的目标。我在CSS下方的底部都包含了所有HTML。
问题1：当前，第一个代码块以两行中的第一个表头为目标。我只需要将第一行中的第一个表头作为目标。
问题2：第二个代码块当前针对每行中的每个表头，但每行的第一个除外。我需要第二个代码块才能仅定位第一表行的最后4个表头。
这是我的HTML CSS。
thead > tr th:first-of-type{
font-size: 2em;
}
thead > tr th:not(:first-of-type){
background-color: transparent;
color: black;
}
这是我的HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Marlin Internet</title>
<link href="mi_reset.css" rel="stylesheet" />
<link href="mi_styles.css" rel="stylesheet" />
<link href="mi_tables.css" rel="stylesheet" />
</head>
<body>
<header>
<img src="mi_logo.png" alt="Marlin Internet" id="logoimg" />
<nav>
<a id="navicon" href="#"><img src="mi_navicon.png" alt="" /></a>
<ul>
<li><a href="#">Internet</a></li>
<li><a href="#">Home Networking</a></li>
<li><a href="#">My Account</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Support</a></li>
</ul>
</nav>
</header>
<article>
<h1>Accelerate with No Speed Traps</h1>
<p>How do you use the web? Whether it's just you on your PC or your extended
family simultaneously accessing the Internet for gaming, movie watching,
surfing, or music; we have the speed for you — with no hidden fees,
service charges, or other traps. <strong>Marlin Internet</strong> provides a broad variety
of access plans at affordable prices with our exclusive ITIS 2.0 technology.
We provide more than fast access. Take advantage of our 24/7 customer support
(personal help is <em>always</em> on the line), free security tools, email accounts
for the whole family, and exclusive online content.</p>
<table id="pricing">
<colgroup>
<col id="firstCol" />
<col span="4" class="dataCols" />
</colgroup>
<thead>
<tr>
/*I am trying to change this header with the first block of code*/
<th rowspan="2"> select a plan </th>
/* I am tying to change these four headers below with the second block of code*/
<th> Starter </th>
<th> Prime </th>
<th> Prime Plus </th>
<th> Ultra </th>
</tr>
<tr>
<th> $19.95 <br/> per month </th>
<th> $29.95 <br/> per month </th>
<th> $49.95 <br/> per month </th>
<th> $69.95 <br/> per month </th>
</tr>
</thead>
<tfoot>
<tr>
<th> Summary </th>
<td>
Just the speed you need to send emails, download map directions, and search the Internet for restaurant reviews.
</td>
<td>
A great speed at a great price for the family: kids can play games, adults can pay bills, and everyone can surf at the same time.
</td>
<td>
Super speeds for multiple tasks that require more broadband capacity; ideal for gamers who need fast response times.
</td>
<td>
Perfect for a small business running multiple media streams, demanding reduced lag time and fast data delivery.
</td>
</tr>
</tfoot>
<tbody>
<tr>
<th>Dowload Speed</th>
<td> 3 Mbps </td>
<td> 15 Mbps </td>
<td> 25 Mbps </td>
<td> 50 Mbps </td>
</tr>
<tr>
<th> Upload Speed </th>
<td> 512 Kbps </td>
<td> 6 Mbps </td>
<td> 10 Mbps </td>
<td> 20 Mbps </td>
</tr>
<tr>
<th> Cloud Storage </th>
<td> 2 GB </td>
<td> 5 GB </td>
<td> 15 GB </td>
<td> 40 GB </td>
</tr>
<tr>
<th> E-mail Accounts </th>
<td> 2 Accounts </td>
<td> 3 Accounts </td>
<td> 5 Accounts </td>
<td> 10 Accounts </td>
</tr>
<tr>
<th> 24/7 Support </th>
<td> Yes </td>
<td> Yes </td>
<td> Yes </td>
<td> Yes </td>
</tr>
</tbody>
</table>
</article>
<footer>
<nav>
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Parental Controls</a></li>
<li><a href="#">Our Locations</a></li>
</ul>
<ul>
<li><a href="#">Internet</a></li>
<li><a href="#">TV</a></li>
<li><a href="#">TiVo</a></li>
<li><a href="#">Home Security</a></li>
<li><a href="#">Phone</a></li>
</ul>
<ul>
<li><a href="#">Web Mail</a></li>
<li><a href="#">My Account</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
<img src="mi_art.png" alt="" class="clipart" />
</footer>
</body>
</html>
答案 0 :(得分：2)
我相信这可以解决问题...
thead > tr:first-of-type th:first-of-type{
font-size: 2em;
color:red;
}
thead > tr:first-of-type th:not(:first-of-type){
background-color: transparent;
color: blue;
} <table id="pricing">
<colgroup>
<col id="firstCol" />
<col span="4" class="dataCols" />
</colgroup>
<thead>
<tr>
/*I am trying to change this header with the first block of code*/
<th rowspan="2"> select a plan </th>
/* I am tying to change these four headers below with the second block of code*/
<th> Starter </th>
<th> Prime </th>
<th> Prime Plus </th>
<th> Ultra </th>
</tr>
<tr>
<th> $19.95 <br/> per month </th>
<th> $29.95 <br/> per month </th>
<th> $49.95 <br/> per month </th>
<th> $69.95 <br/> per month </th>
</tr>
</thead>
<tfoot>
<tr>
<th> Summary </th>
<td>
Just the speed you need to send emails, download map directions, and search the Internet for restaurant reviews.
</td>
<td>
A great speed at a great price for the family: kids can play games, adults can pay bills, and everyone can surf at the same time.
</td>
<td>
Super speeds for multiple tasks that require more broadband capacity; ideal for gamers who need fast response times.
</td>
<td>
Perfect for a small business running multiple media streams, demanding reduced lag time and fast data delivery.
</td>
</tr>
</tfoot>
<tbody>
<tr>
<th>Dowload Speed</th>
<td> 3 Mbps </td>
<td> 15 Mbps </td>
<td> 25 Mbps </td>
<td> 50 Mbps </td>
</tr>
<tr>
<th> Upload Speed </th>
<td> 512 Kbps </td>
<td> 6 Mbps </td>
<td> 10 Mbps </td>
<td> 20 Mbps </td>
</tr>
<tr>
<th> Cloud Storage </th>
<td> 2 GB </td>
<td> 5 GB </td>
<td> 15 GB </td>
<td> 40 GB </td>
</tr>
<tr>
<th> E-mail Accounts </th>
<td> 2 Accounts </td>
<td> 3 Accounts </td>
<td> 5 Accounts </td>
<td> 10 Accounts </td>
</tr>
<tr>
<th> 24/7 Support </th>
<td> Yes </td>
<td> Yes </td>
<td> Yes </td>
<td> Yes </td>
</tr>
</tbody>
</table>
答案 1 :(得分：1)
问题是您在:first-of-type元素（th）上使用thead > tr th:first-of-type，这意味着它将对内部的第一个th元素应用样式每个tr元素。
解决方案是将:first-of-type应用于您的tr元素，然后以您的第一个tr为目标，然后仅将样式应用于第一个类型:)。同样，要设置tr的第一个元素的样式，您可以使用CSS选择器:fisrt-child
thead > tr:first-of-type th{
background-color: transparent;
color: black;
}
thead > tr:first-of-type th:first-child {
font-size: 2em;
}
thead > tr:first-of-type th{
background-color: transparent;
color: black;
}
thead > tr:first-of-type th:first-child {
font-size: 2em;
}<table id="pricing">
<colgroup>
<col id="firstCol" />
<col span="4" class="dataCols" />
</colgroup>
<thead>
<tr>
<th rowspan="2"> select a plan </th>
<th> Starter </th>
<th> Prime </th>
<th> Prime Plus </th>
<th> Ultra </th>
</tr>
<tr>
<th> $19.95 <br/> per month </th>
<th> $29.95 <br/> per month </th>
<th> $49.95 <br/> per month </th>
<th> $69.95 <br/> per month </th>
</tr>
</thead>
<tfoot>
<tr>
<th> Summary </th>
<td>
Just the speed you need to send emails, download map directions, and search the Internet for restaurant reviews.
</td>
<td>
A great speed at a great price for the family: kids can play games, adults can pay bills, and everyone can surf at the same time.
</td>
<td>
Super speeds for multiple tasks that require more broadband capacity; ideal for gamers who need fast response times.
</td>
<td>
Perfect for a small business running multiple media streams, demanding reduced lag time and fast data delivery.
</td>
</tr>
</tfoot>
<tbody>
<tr>
<th>Dowload Speed</th>
<td> 3 Mbps </td>
<td> 15 Mbps </td>
<td> 25 Mbps </td>
<td> 50 Mbps </td>
</tr>
<tr>
<th> Upload Speed </th>
<td> 512 Kbps </td>
<td> 6 Mbps </td>
<td> 10 Mbps </td>
<td> 20 Mbps </td>
</tr>
<tr>
<th> Cloud Storage </th>
<td> 2 GB </td>
<td> 5 GB </td>
<td> 15 GB </td>
<td> 40 GB </td>
</tr>
<tr>
<th> E-mail Accounts </th>
<td> 2 Accounts </td>
<td> 3 Accounts </td>
<td> 5 Accounts </td>
<td> 10 Accounts </td>
</tr>
<tr>
<th> 24/7 Support </th>
<td> Yes </td>
<td> Yes </td>
<td> Yes </td>
<td> Yes </td>
</tr>
</tbody>
</table>