首页 > 代码库 > 伪类元素使用

伪类元素使用

2024-10-09 13:51:02   215人阅读

    :before　　伪元素可以在元素的内容前面插入新内容。

　　例如在一段文字前面加一个直角三角形

　　css是h1:before{width: 0; height: 0; border-bottom: 100px solid red; border-right: 100px solid transparent;}

　　html是 <h1>Hello world</h1>

 

    :after         伪元素可以在元素的内容后面插入新内容。

　　例如在一段文字后面加一个直角三角形

　　css是h1:before{width: 0; height: 0; border-bottom: 100px solid red; border-right: 100px solid transparent;}

　　html是 <h1>Hello world</h1> 

 

至于选取元素的第一个子元素或者是匹配所有<p>元素下的第一个<li>元素详情见http://www.w3school.com.cn/css/css_pseudo_classes.asp 

 

注：

使用：after清楚浮动的例子

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">

/*在此定义相应的类选择器，并根据要求设置相关CSS属性*/
/** {
    margin: 0px;
    padding: 0px;
}
*/
.mainBox {
    width: 960px;
    /*height: 300px;*/
    background-color:#cff;
    /*overflow: hidden;*/
    /*zoom: 1;*/
}
.mainBox:after{
    display: "block";
    clear:both;
    height:0;
    content: "";
    visibility: hidden;
    overflow:hidden;
}
.leftBox {
    background-color:#C9F;
    width:740px;
    height: 300px;
    float: left;
}
.rightBox {
    background-color:#FCF;
    width:210px;
    height: 300px;
    margin-left:10px;
    float: right;
}

</style>
</head>

<body>
    <div class="mainBox">
        <div class="leftBox">
        </div>
        <div class="rightBox">
        </div>
        <!-- <div style="clear: both"></div> -->
        <!-- <span style="clear: both"></span> -->
    </div>
</body>
</html>

伪类元素使用


联系
我们