CSS笔记15：结构伪类CSS3

CSS3

first-child/last-child

nth-child

only-child

---

CSS3 伪元素选择器

• :first-letter
• :first-line
• :before
• :after

    <style>
        .box, .box1{
            /*复合选择器；同时匹配多个选择器*/
            width:60%;
            margin:10px auto; 
        }
        .box:first-letter{
            /*当前元素的第一个字符*/
            color:red;
            font-size: 30px;
            font-style: 黑体;
            font-weight: bold;
        }
        .box1:first-line{
            /*当前元素的第一行*/
            color:blue;
        }
        .box1:before{
            /*当前元素之前*/
            /*若要插入文字，必须将文字放在content中*/
            content:"This is before! ";
        }
        .box:after{
            content:"That is after!";
        }
    </style>

效果展示