CSS3常用伪类与伪类元素详解_input的css 伪lei属性

1.伪类选择器---根据元素的状态指定样式

1.1.常规选择器 :hover

  <style>
        div {
            margin: 100px auto;
            width: 200px;
            height: 200px;
            background-color: antiquewhite;
        }
        div:hover { 
            /* 当鼠标在div元素上时颜色改变 */
            background-color: aqua;
        }
  </style>

1.2. 激活状态 :active

鼠标按下时触发.抬起时还原

 <style>
        button {
            width: 100px;
            height: 40px;
            background-color: antiquewhite;
        }
        button:active {
            /* 当点击button元素上时颜色改变,鼠标抬起时,样式还原*/
            background-color: aqua;
        }
 </style>

1.3. 聚焦状态 :focus

一般用于输入框获取焦点时触发

 <style>
        inputn {
            width: 100px;
            height: 40px;
        }
 
        input:focus {
            /* 当输入框切换为输入状态时,输入框底色改变 */
            background-color: aqua;
        }
 </style>

1.4.选择同类元素的第一个元素 :first-child

//CSS
div:first-child {
            color: aqua;
        }
 
//HTML
 <div>A</div>
 <div>B</div>
 <div>C</div>

1.5.选择同类元素的最后一个元素 :last-child

//CSS
div:last-child {
            color: aqua;
        }
 
//HTML
 <div>A</div>
 <div>B</div>
 <div>C</div>

1.6.选择同类元素的第n个元素 :nth-child(n)

//CSS
div:nth-child(2) {
            color: aqua;
        }
 
//HTML
 <div>A</div>
 <div>B</div>
 <div>C</div>

 

2.伪元素

2.1在元素前添加前缀元素 ::before

  //CSS 
   div {
            margin: 100px auto;
            width: 150px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            background-color: orange;
       }
 
        div::before {
//content是必须的,不然没有作用
            content: '2';
        }
 
//HTML
<div>=1+1</div>

 2.2在元素后添加后缀元素 ::after

 //CSS 
   div {
            margin: 100px auto;
            width: 150px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            background-color: orange;
       }
 
        div::after {
//content是必须的,不然没有作用
            content: '2';
        }
 
//HTML
<div>1+1=</div>

2.3首个字符 ::first-letter

 //CSS
p::first-letter {
            font-size: 50px;
        }
 
//HTML
 <p>
        abc <br>
        123 <br>
        xyz
 </p>

 

 伪类选择器和伪类元素比较常用的就在上面,还有一些不常用的,大家在学习中慢慢积累.