非官方，个人练习，如有错误，欢迎指正。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 10px;
}
table{
width: 800px;
border-collapse: collapse; /* 移除单元格之间的间隔 */
}
table tr th,td{
border: 1px solid black;
}
#tdimpantant{
color:red; !important
}
#idselect{
color: blueviolet;
}
.clsdemo{
color:chartreuse
}
ul li{
list-style: none;
font-size: 16px;
font-weight: bold;
margin: 0;
padding: 0;
}
/*看权重如何选择 */
/* 第一种情况:第一是class选择器,权重:10;第二个是标签选择器,权重是1;简单相加:101 */
#div1 p{
color: red;
background-color: greenyellow;
}
/*第2中情况:第一个是标签选择器,权重是1;第2个是class选择器,权重是100;第3个是id选择器,权重是1000;三个相加后是1101*/
div .clsp#idp{
color:blue;
width: 50px;
height: 50px;
}
/* 第1种情况和第2情况虽然权重不同,但是只是覆盖了相同的color属性值;其他独立的background-color/width/height都互不干涉 */
/* 第3中情况:将第1种情况和第2种情况使用逗号将其作为并列选择器来使用
*/
div .clsp#idp,div .clsp#idp{
color:#f40
}
</style>
</head>
<body>
<h2>
选择器的几种类型:
</h2>
<h3>
1.权重的大小及使用方式.(256进制)
</h3>
<table id="tbl">
<tr>
<th>名称</th>
<th>权重</th>
<th>使用方式</th>
</tr>
<tr>
<td>!Important</td>
<td>Infinity</td>
<td id="tdimpantant">在样式的后面加上!impantant</td>
</tr>
<tr>
<td>行间样式表</td>
<td>1000</td>
<td style="color:blue">直接在标签中使用style的方式,它的权重是要大于id的.</td>
</tr>
<tr>
<td>id选择器</td>
<td>100</td>
<td id="idselect">在css文件中,使用#号+id的名字来设置,标签需要有id对应的值</td>
</tr>
<tr>
<td>class|属性|伪类</td>
<td>10</td>
<td class="clsdemo">在标签中使用class属性,在css文件使用点.+class对应的名称来实现</td>
</tr>
<tr>
<td>标签|伪元素</td>
<td>1</td>
<td>在css文件中使用标签名称,不要点,不要#,就是直接的标签名称;如果标签是<p>,在css文件中,在直接写p</td>
</tr>
<tr>
<td>通配符</td>
<td>0</td>
<td>在css文件中使用*号来表示</td>
</tr>
</table>
<hr>
<h3>2.伪类和伪元素的区别(个人的简易理解,非官方)</h3>
<ul>
<li> 1.伪类,指的是一个虚拟的类;如style中的某一个标签对应的样式class,它其实是虚拟了一个不存在了样式表,如: a:hover</li>
<li>2.伪元素,指得是一个虚拟的元素,而不是样式表中的一个class名称.</li>
<li>3.个人的理解就是类和元素的区别.只不过都是虚拟的.</li>
</ul>
<hr>
<h3>3.选择器权重的一个例子对比</h3>
<ul>
<li>1.同一行中,所有的选择器的权重相加,不管存在多少个</li>
<li>2.在权重相等的情况下,如果属性名称相同(譬如都是color),则写在后面的覆盖前面的属性值;如果属性名称不相同(一个是color,一个是width),则累加样式.</li>
<li>3.小知识:设置font-size时,设置的是字体的高度,不是宽度也不是对角线.</li>
<li>4.权重使用的是256进制</li>
<li><font style="color: red;font-weight: bolder;">5.并列选择器的权重如何计算呢?</font></li>
</ul>
<h4>ps:在css中设置样式之后观察取值结果,看字体最终显示什么颜色</h6>
<div id="div1" class="clsdiv1">
<p id="idp" class="clsp">测试</p>
</div>
<p>
css中的备注信息:
<br>
/*看权重如何选择 */
<br>
/* 第一种情况:第一是class选择器,权重:10;第二个是标签选择器,权重是1;简单相加:101 */
<br>
#div1 p{
color: red;
background-color: greenyellow;
}
<br>
/*第2中情况:第一个是标签选择器,权重是1;第2个是class选择器,权重是100;第3个是id选择器,权重是1000;三个相加后是1101*/
<br>
div .clsp#idp{
color:blue;
width: 50px;
height: 50px;
}
/* 第1种情况和第2情况虽然权重不同,但是只是覆盖了相同的color属性值;其他独立的background-color/width/height都互不干涉 */
<br>
/* 第3中情况:将第1种情况和第2种情况使用逗号将其作为并列选择器来使用
<br>
*/
div .clsp#idp,div .clsp#idp{
color:#f40
}
</p>
</body>
</html>
4180
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
