css——伪类选择器

<body>

    <div class="box">　　 
      <p>0</p>

    </div>

</body>

几个比较有用的伪类选择器：

选中第一个目标元素：

.box div:first-of-type{

        }#选中第一个div元素。无论div前面有多少个其他元素

选中最后一个目标元素：

.box div:last-of-type{

        }

#选中最后一个div元素。无论div前面有多少个其他元素

选中前几个目标元素：只需要将n改为负值，使用最后一个目标元素的位置加上 -n 就可以实现。

例如我们要选中前两个div元素，最后一个div的位置是3，那么就是

.box div:nth-child(-n+3){

            font-size: 50px;

        }

选择某个特定子元素其父类只有此子元素自身：

        div :only-child{# 选中的是div标签下只有一个子元素的此子元素

            font-size: 50px;

        }

    </style>

</head>

<body>

    <div>1

        <a href="">3</a>

    </div>

    <div>2

        <a href=""></a>

        <a href=""></a>

    </div>

    <div>

        <a href="">3</a>

    </div>

    <div>4

        <p>4</p>

    </div>

    <div>5</div>

</body>

如果要广泛选择只有一个子元素的标签的子元素，则将分号前面的标签名字去掉即可。

选择器1:not(选择器2)：选择选择器1除选择器2选择的元素之外的元素

巴特西

css——伪类选择器

最新文章

热门文章