CSS中id和class的引⽤
今天在学习过程中，遇到了class和id在css⽂件中的引⽤问题，被搞得很晕
如果想要指定在⼀个id⾥⾯的某⼀种元素，在CSS中应该⽤空格隔开，⽽不是像其他编程语⾔⼀样⽤“.”隔开，⽐如
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>fuck</title>
<link rel="stylesheet" href="mycss.css" type="text/css">
</head>
<body>
<table id="tb">
<tr id="head">
<th>姓名</th>
<th>年龄</th>
<th>学号</th>
</tr>
<tr>
<td>⽼王</td>
<td>20</td>
<td>10011</td>
</tr>
<tr class="alt">
<td>⽼王</td>
<td>20</td>
<td>10011</td>
</tr>
<tr>
<td>⽼王</td>
<td>20</td>
<td>10011</td>
</tr>
<tr class="alt">
cssclass属性<td>⽼王</td>
<td>20</td>
<td>10011</td>
</tr>
</table>
<table id="tb2">
<tr id="head2">
<th>姓名</th>
<th>年龄</th>
<th>学号</th>
</tr>
<tr>
<td>⽼王</td>
<td>20</td>
<td>10011</td>
</tr>
<tr class="alt">
<td>⽼王</td>
<td>20</td>
<td>10011</td>
</tr>
<tr>
<td>⽼王</td>
<td>20</td>
<td>10011</td>
</tr>
<tr class="alt">
<td>⽼王</td>
<td>20</td>
<td>10011</td>
</tr>
</table>
</body>
</html>
mycss.css⽂件如下：
#tb{
border-collapse: collapse;
width: 500px;
}
#tb td,#tb th {
border: 1px solid violet;
}
#head{
color: white;
background-color: grey;
}
#tb tr.alt td{
background-color: aquamarine;
}
最终效果如下：
可以看到，只有上⾯这表格被更改了属性，因为底下那个表格的id是tb2,。id必须是唯⼀的，⽽class是⼀个类，不⼀定是唯⼀的。
⽽如果我们将CSS⽂件中第⼆个项的#tb删除：
#tb{
border-collapse: collapse;
width: 500px;
}
td,th {
border: 1px solid violet;
}
#head{
color: white;
background-color: grey;
}
#tb tr.alt td{
background-color: aquamarine;
}
效果如下：
可以看到第⼆个表格的某些属性也跟着发⽣了变化。因为此时没有#tb的限定，只有td和th，默认就是所有的标签均被修改。然后为了实现隔⼀⾏颜⾊变⼀次的效果，我们将某些tr标签设置为“alt”类，alt类的颜⾊属性重新设置。
⽽为了获取到标签中的这些alt类，我们采⽤了这样的写法：#tb tr.alt td，⽤"."间隔来获取到他们。
总之就是id前⾯加#号，class前⾯加.号，什么都不加的话默认当前范围内的全部某种标签，它们中间都⽤空格隔开。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。