Build a Book Inventory App - Build a Book Inventory App

Chinese 中文 HTML-CSS
1

告诉我们发生了什么：

Why hasn’t the last *=selector passed, Help me please

到目前为止你的代码

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Book Inventory</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <h1>Book Inventory</h1>
  <table class="table">
    <thead>
    <tr>
      <th class="title">Title</th>
      <th class="author">Author</th>
      <th class="category">Category</th>
      <th class="status">Status</th>
      <th class="rate1">Rate</th>
    </tr>
    </thead>
    <tbody>
      <tr class="read">
        <td>The Three Musketeers</td>
        <td>Alexandre Dumas</td>
        <td>Historical Novel</td>
        <td><span class="status">Read</span></td>
        <td><span class="rate three"><span></span><span></span><span></span></span></td>
      </tr>
      <tr class="to-read">
        <td>The Plague</td>
        <td>Albert Camus</td>
        <td>	Philosofical Novel</td>
        <td><span class="status">To Read</span></td>
        <td><span class="rate"><span></span><span></span><span></span></span></td>      
      </tr>
      <tr class="read">
        <td>The Metamorphosis</td>
        <td>Franz Kafka</td>
        <td>Novella</td>
        <td><span class="status">Read</span></td>
        <td><span class="rate one"><span></span><span></span><span></span></span></td>       
      </tr>
      <tr class="read">
        <td>Dead Souls</td>
        <td>Nikolai Gogol</td>
        <td>Picaresque</td>
        <td><span class="status">Read</span></td>
        <td><span class="rate two"><span></span><span></span><span></span></span></td>       
      </tr>
      <tr class="in-progress">
        <td>Lord of the Flies</td>
        <td>William Golding</td>
        <td>Allegorical Novel</td>
        <td><span class="status">In Progress</span></td>
        <td><span class="rate"><span></span><span></span><span></span></span></td>       
      </tr> 
      </tr>
      <tr class="read">
        <td>Do Androids Dream of Electric Sheep?</td>
        <td>Philip K. Dick</td>
        <td>Science Fiction</td>
        <td><span class="status">Read</span></td>
        <td><span class="rate two"><span></span><span></span><span></span></span></td>       
      </tr>        
    </tbody>
  </table>
  </body>

</html>

/* file: styles.css */
.table {
      width: 100%;
      border: none;
      border-collapse: collapse;
    }
    .title {
      width: 35%;
    }
    .author, .category, .status, .rate1 {
      width: 16.25%;
    }
    thead {
      background-image: linear-gradient(to top, rgb(115,211,249), rgb(182,232,252));
    }
    tr {
      height: 40px;
    } 
    tr[class="read"] {
      background-image: linear-gradient(to top, rgb(151,255,151), rgb(205,255,205));
    }
    tr[class="to-read"] {
      background-image: linear-gradient(to top, rgb(212,227,212), rgb(241,246,241));
    }
    tr[class="in-progress"] {
      background-image: linear-gradient(to top, rgb(255,221,153), rgb(255,238,203));
    }
    span {
    display: inline-block;
    }
    tr[class="to-read"] span[class="status"] {
    border: 1px solid rgb(230,19,0);
    background-image: linear-gradient(to top, rgb(255,23,2), rgb(255,126,114));
    margin: 5px;
    border-radius: 10px;
    text-align: center;    
    }
    tr[class="read"] span[class="status"] {
    border: 1px solid rgb(29,201,29);
    background-image: linear-gradient(to top, rgb(37,224,37), rgb(138,232,138));
    margin: 5px;
    border-radius: 10px;
    text-align: center;
    }
    tr[class="in-progress"] span[class="status"] {
    border: 1px solid rgb(194,133,10);
    background-image: linear-gradient(to top, rgb(242,166,14), rgb(248,207,124));
    margin: 5px;
    border-radius: 10px;
    text-align: center;    
    }
    span[class="status"], span[class^="rate"] {
    height: 80%;
    width: 80%;
    padding: 5px;
    }
    span[class^="rate"] > span {
    border: 1px solid gray;
    border-radius: 10px;
    margin: 2px;
    height: 10px;
    width: 20%;
    background-color: whitesmoke;
    }
    span[class*="one"]  :first-child {
    background-image: linear-gradient(to top, rgb(255,214,7), rgb(255,227,90));
    } 
    span[class*="two"]  :nth-child(-n+2){
      background-image: linear-gradient(to top, rgb(255,214,7), rgb(255,227,90));
    } 
    span[class*="three"]  span{  
      background-image: linear-gradient(to top, rgb(255,214,7), rgb(255,227,90));  
    }

你的浏览器信息：

用户代理是： Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:146.0) Gecko/20100101 Firefox/146.0

挑战信息：

Build a Book Inventory App - Build a Book Inventory App

2

Welcome to the forum @jone1 !

While *= is working in this case, you may have to choose a different attribute selector.

As I know, the tests can´t handle the *= attribute selector. I had the same problem before.

3

But I tested other attribute selectors and it still doesn’t work :sob:

4

I can´t tell you the exact answer, but if you use this useful source: link
and inside the Syntax you can see the attribute selectors.
Please read their descriptions and find out, wich one finds you suitable for your code and try it out on all three selectors.

The tests will pass if you replace all three *= with the correct selector.
I tested it with your code.

side note: you have an extra tag in our html.

1 Like
5

Thank you very much. This solution worked.