伪类名称的由来

 1 <style>
 2         td:first-child{
 3             background-color: red;
 4         }
 5     </style>
 6 </head>
 7 <body>
 8     <table>
 9         <tr>
10             <th>name</th>
11             <th>age</th>
12             <th>num</th>
13         </tr>
14         <tr>
15             <td>dawa</td>
16             <td>5</td>
17             <td>1</td>       
18         </tr>
19         <tr>
20             <td>erwa</td>
21             <td>5</td>
22             <td>2</td>
23         </tr>
24     </table>
25 </body>

:first-child

此字符串就是“寻常意义”上的一种伪类选择器。

想象一下,现在有一个表格,形状如下:

 

 每一行有三个单元格,如果想让“每一行的第一个单元格”的背景色变为红色,可以使用:first-child。

把此字符串想象成一个技能,使用这个技能就能完成我们的心愿,那我们此时的心愿到底是什么?

选择有“某种特征”的元素。这个特征可以是“某元素的第一个子元素”,“某元素的最后一个子元素”,当然这是从“位置”上来说的。

整个html文档就像一棵树,层次分明,各个元素之间有着联系。

在上面代码中,想让每一行的第一个单元格的背景色变为红色。

这样的单元格不只有一个,而是可以有很多,所以最终选择了多个事物。

 

事物a,b,c,每一个事物都有很多特征,它们之间有相同点,有不同点。

就像是葫芦娃们,大娃和二娃的技能不一样,但它们头上都有一个小葫芦,挺好看。

依据某些特征来对一群事物分类,是人类常常做的事情。比如水果,蔬菜,肉等等,事物之间大同小异。

 

在此处,一些元素具有某些相同的特征,比如说:咱们都是父元素的第一个儿子。通过这个特征,就能找到一大批元素,这些元素就构成了“类”。

 

伪类?

很多人理解为“假的类”,“虚构的类”,这是错误的。因为这些元素的的确确被分类了,分类完成是一个既成事实,可不是虚构的。

思考一下,类选择器为什么就是“真的类”?真假的标准是什么?

定义这些概念的人,把“是否在明面上书写”作为真假的标准。

他们在说:看啊,class="name",这就是真的类啊,因为这是明面上被写出来的。

而“a作为b的第一个子元素”这个分类标准没写出来啊,存在于程序员的脑海之中,当然是假的。

但事实是,当我们写下:first-child这个字符串时,就已经把分类标准写出来了,为什么还是假的?
不能因为把x叫做真类,就把y叫做伪类。这太耍流氓了。

综上所述,此处“伪类”的定义并不成立。

 

元素与元素之间有相同的特征,所以构成了类:

某元素的第一个子元素,这是一类,

某元素的最后一个子元素,这也是一类。

 

类与类之间有相同的特征(没写成class那样),所以构成了伪类。

 

posted @ 2021-01-04 19:20  呈心者  阅读(197)  评论(0编辑  收藏  举报