Ориентация на первую строку таблицы с двумя строками таблицы с помощью селекторов CSS. Как? - PullRequest
Новая
       3

Ориентация на первую строку таблицы с двумя строками таблицы с помощью селекторов CSS. Как?

0 голосов
/ 12 сентября 2018

Контекст: я пытаюсь редактировать только первую первую строку таблицы, содержащую только две строки.Это в настоящее время цель всех tr.Я включил весь HTML внизу под CSS.

Проблема 1: первый блок кода в настоящее время нацеливается на первый заголовок таблицы в обеих строках.Мне нужно, чтобы он был предназначен только для первого заголовка таблицы в первой строке.

Проблема 2: Второй блок кода в настоящее время нацелен на каждый заголовок таблицы в каждой строке, кроме первой в каждой строке.Мне нужен второй блок кода, предназначенный только для последних 4 заголовков таблицы в первой строке таблицы.

Это мой CSS для HTML.

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 &mdash; 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>

Ответы [ 2 ]

0 голосов
/ 12 сентября 2018

Я верю, что это помогает ... 

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>
0 голосов
/ 12 сентября 2018

проблема в том, что вы используете :first-of-type для элемента th (thead > tr th:first-of-type), что означает, что он будет применять стили для первого элемента th внутри каждого элемента tr.

Решение состоит в том, чтобы применить :first-of-type к элементу tr, затем он нацелится на ваш первый tr, а затем будет применять стиль только для первого типа :).Также для стилизации первого элемента вашего tr вы можете использовать CSS Selector :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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...