How to remove the last element style in css

How to remove the last element style in css: 1. Use the id or class selector to set the last element as the default style; 2. Use the pseudo-class ":last-child" to automatically match the last element For an element, just set it as the default style, the syntax is "element name: last-child {attribute: default value}".

The operating environment of this tutorial: Windows7 system, CSS3&&HTML5 version, Dell G3 computer.

Many people may have encountered such a situation:

<style>    
.test li{    
   float:left;    
   border-right:1px solid #ccc;　　    
   width:100px;　  　  
   height:100px;　　　　
   }
</stly>
   <ul class="test">    
       <li></li>    
       <li></li>    
       <li></li>
   </ul>

In this way, three right borders will appear. In actual application, the last border needs to be removed.

Here are two methods:

1. Add a style to the last li

.b-none{border:none}

2. Use css pseudo Class: last-child, to automatically match the last element and execute the corresponding style.

.test li:last-child{border:none}

The second pseudo-class method has compatibility issues under IE. If compatibility issues are not considered, go to is a good choice.

Recommended learning: css video tutorial

The above is the detailed content of How to remove the last element style in css. For more information, please follow other related articles on the PHP Chinese website!