CSS pseudo-class: Last-child etc does not work

<style>
#icons {border:1px solid bisque; height:250px;} #icons. column{//each column width:25%; Display:inline-Block; float: Left; Text-Align:center;} #icons. Column text width per column txt{//:100%;    height:52px; Margin-top:134px; Border-right:2px solid #787b83;//Add a spacer here} #icons. column. txt:last-child{Border-Right:none;}    #icons. column. txt p{width:160px;    height:52px; Font-size:14px; Line-height:18px; Color: #767777; Margin-left:25%;}

Html:

<div id= "Icons" >            <div class= "column Column1" >                <div class= "txt" >                    <p> Creating a New World view, Make you love your life more </p>                </div>            </div>            <div class= "column Column2" >                <div class= " TXT ">                    <p> a variety of public welfare activities to play the New World's protagonist awareness </p>                </div>            </div>            <div class=" Column Column3 ">                <div class=" txt ">                    <p> a new concept of fashion, advanced experience of the unknown life </p>                </div>            </div>            <div class= "column Column4" >                <div class= "txt" >                    <p> Perfect training mechanism, Develop your new worldview </p>                </div>            </div>        </div>

The effect is as follows:

this thought that after the ' #icons. column. txt ' section, I wanted to set the last vertical spacer to ' border:none; ' I didn't think it was all gone as shown.

Original , the pseudo-class selector ': First-child ' and ': Last-child ' are filtered based on the parent, ' #icons. Column. Txt:last-child ' 's parent is '. txt ', where there is only one child, and the final child is of course itself, so to achieve the effect, you should add pseudo-classes to the parent of '. txt '.

#icons. column:last-childtxt{    border-right:none;

The effect is as follows:

CSS pseudo-class: Last-child, etc. does not work