css属性：伪元素、伪类心得

共同点：

（1）伪元素和伪类都是和选择器有关的；

（2）伪元素和伪类都是用来添加一些特殊的效果，特殊的东西指的是其他css无法描述的东西。

不同点：

（1）css伪类是用于向某些选择器添加特殊的效果；（伪类可以看似：动作）

（2）css伪元素是用于将特殊的效果添加到某些选择器（伪元素可以看似：位置）

（3）伪类用单个：表示，伪元素用两个:: 表示

常用的伪类：

 

伪类	作用
:active	将样式添加到被激活的元素
:focus	将样式添加到被选中的元素
:hover	当鼠标悬浮在元素上方时，向元素添加样式
:link	将特殊的样式添加到未被访问过的链接
:visited	将特殊的样式添加到被访问过的链接
:first-child	将特殊的样式添加到元素的第一个子元素
:not()	用来匹配不符合一组选择器的元素，因为它的作用是防止特定的元素被选中，所以又称它为反选伪类
:last-child	将特殊的样式添加到元素的最后一个子元素

 

eg：（1）:first-child ：首子改样 、:not()：除它之外改样、:last-child：尾子改样

 

<div class="not-list-layout">     
    <div class="item content">第一行数据</div>     
    <div class="item content">第二行数据</div>     
    <div class="item content">第三行数据</div>     
    <div class="item content">第四行数据</div> 
</div> 

.content:not ( :last-child ) { /*除了最后一行以外的样式*/     
    border-bottom: 1px solid #babbc1;
 } 
.content:first-child { /*第一行*/    
     background-color: pink;
 }

 

常用的伪元素：

伪元素	作用
::first-letter	将特殊的样式添加到文本的首字母/首个文字
::first-line	将特殊的样式添加到文本的首行
::before	在某个元素之前插入某些内容
::after	在某个元素之后插入某些内容

 

eg：（1）::first-letter 头改样

　　

<p>我只是想要一只冰墩墩 </p> 

p::first-letter {    
　　color: red;
}

 

（2）::first-line 首行改样

 

<p>山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？</p> 

p::first-line {    
     color: pink;
}