css——伪类选择器

 

<body>
    <div class="box">   
<p>0</p>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <p>1</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选择的元素之外的元素

原文地址:https://www.cnblogs.com/baihuatian/p/12021030.html