CSS的first-child、nth-of-type

这几个选择器其实我是很懵逼的。因为first-child的使用是
p:first-child这种形式
这个很容易就让人想到,first-child应该位于某个元素的后端,他就想是伪元素或者伪类那个样子,但是这种思考其实是错误的。
.child:first-child很容易让人以为,选择的是
.child元素的第一个元素,也就是

    <div class="father">
        <div class="child">
            <p>sunzip>
        div>
    div>

在这里,会以为这个选择的是

<p>sunzip>

元素
但是实际上的选择是.child元素
其实这个可以这样使用

.father :first-child

中间有一个空格或者使用>会更准确,也就是说:first-child不依靠任何一个元素。
下面我们来说明这个元素

.father :first-child

这个选中的是.father下面的第一个子元素

.father .child:first-child

.child是一个修饰词,这个选中的是,.father下面的第一个叫做.child的元素。
这个的理解是,如果.father下面的第一个元素是.child,选中。
也就是说,如果是

.father
    div
    .child

这个样子,则没有任何元素被选中。必须是第一个元素,且元素为.child
而nth-of-type
则可以选中
他也会是一个选择器,且不依赖任何一个元素,他的前面也是修饰而不是依赖
但是区别是
对于上面的结构

<style>
    .father .child:nth-of-type(1) {
        color: red;
    }
style>

<body>
    <div class="father">
        <div class="zz">zzzdiv>
        <div class="child">
            一儿子
        div>
        <div class="child">
            二儿子
        div>
    div>
body>

.father .child:nth-of-type(1)
可以选中.child 吗?
答案是不能,
w3c上给出的例子是p
但是这个是很具有误导性的,会让人以为是按照前面的分割,前面的就是修饰符,但是这个是不准确的。
我们再实践一下可以发现

<style>
    .father .child:nth-of-type(1) {
        color: red;
    }
style>

<body>
    <div class="father">
        <p class="child">p1p>
        <div class="child">
            一儿子
        div>
        <div class="child">
            二儿子
        div>
        <p class="child">p1p>
    div>
body>

这里选中的是
p1
1儿子
那么我们可以认为是
nth-of-type
首先对所有的元素进行了分组,而.child其实是
*.child
也就是从第一个接触到div,p,li这些开始计数,而不是第一个接触到的.child开始计数。。。
因此很遗憾,
在现有的解决方案下,纯css没有办法解决一个问题
如何使用纯选择器选择到
前面有不确定个div
中间有若干个.child的div
后面还有不确定个数量的div
如何选择到第一个.child的元素

现在还没有找到解决办法,很难过,只能使用js加上一个.first类了。

你可能感兴趣的:(html和css,前端)