14.伪类元素&属性选择器

伪类元素: 是指由CSS生成的标签（生成标签）

a.在首位生成标签

  .header::before {
            content: "abc";
            color: green;
            font-weight: bold;
        }

b.在末尾生成标签 

 .header::after {
            content: "ABC";
            color: red;
        }

 

选择器:: {  

                content: "";    必须要有这个content属性

            }

 <div class="header">123</div>

属性选择器

• 选择class属性值为“i”字符开头的标签

  [class^="i"] {
            width: 60px;
            height: 60px;
            background-color: red;
            border-radius: 6px;
            margin: 5px;
        }

• 选择class属性值以“1”字符结尾的标签，依此类推

 [class$="1"] {
            background-color: green;
        }
        [class$="2"] {
            background-color: blue;
        }
        [class$="3"] {
            background-color: purple;
        }

• 选择class属性包含字符 “o”的标签 

 [class*="o"] {
            font-size: 50px;
        }

 

 <div class="icon1">1</div>
    <div class="icon2">2</div>
    <div class="icon3">3</div>
    <div class="icon4">4</div>
    <div class="box">5</div>

像class、 type 、src 、href 、 alt 、 id 等等这些都是标签属性