css 中的伪类

CSS 伪类 (Pseudo-classes)

伪类包括选择器伪类、锚类伪类、内容伪类

    选择器      伪类               属性
    selector : pseudo-class {property: value}
---------------------------------------------------
    选择器     类      伪类               属性
    selector.class : pseudo-class {property: value}

• 选择器伪类(:first-child、:nth-child(n)、:last-child)

  span:first-child{
    color:red;
  }
  li:nth-child(2n){
    font-size:22px;;
  }

• 锚类伪类(:link、:visited、:hover 、:active)

  a:link {color: red}		//未访问的效果
  a:visited {color: green}	//已访问的效果
  a:hover {color: pink}	// 鼠标移动上的效果 
  a:active {color: blue}	// 选定的效果

• 内容伪类(:after 、 :before)

  css
     p:after{
        content: '你是真的6';
        background: transparent;
     }
  html
     <p>--我很6--</p>

效果图：

css
	   .triangle{
            width:100px;
            height:20px;
            border:2px solid gray;
            position:relative;
        }
        .triangle:before{
            content:"";
            width:0;
            height:0;
            position:absolute;
            left:50%;
            margin-left: -12px;
            top:-12px;
            /*border-top:solid 12px red;*/
            border-left:solid 10px transparent;
            border-bottom:solid 10px gray;
            border-right:solid 10px transparent;
        }
        .triangle:after{
            content:"";
            width:0;
            height:0;
            position:absolute;
            left:50%;
            margin-left: -12px;
            top:-12px;
            /*border-top:solid 12px blue;*/
            border-bottom:solid 10px gray;
            border-left:solid 10px transparent;
            border-right:solid 10px transparent;
        }

html
      <div class="triangle"></div>

效果图：