CSS3 新增选择器的实例

li:first-child { /  选择第一个孩子 /
                color: pink; 
            }
li:last-child {   / 一个孩子 /
                color: purple;
            }
li:nth-child(4) {   / 选择第4个孩子  n  代表 第几个的意思 / 
                color: skyblue;
            }

/ 获取到 拥有 该属性的元素 /
div[class^=font] { /  class^=font 表示 font 开始位置就行了 /
            color: pink;
        }
div[class$=footer] { /  class$=footer 表示 footer 结束位置就行了 /
            color: skyblue;
        }
div[class=tao] { / class=tao  =  表示tao 在任意位置都可以 /
            color: green;
        }
<div class="font12">属性选择器</div>
    <div class="font12">属性选择器</div>
    <div class="font24">属性选择器</div>
    <div class="font24">属性选择器</div>
    <div class="font24">属性选择器</div>
    <div class="24font">属性选择器123</div>
    <div class="sub-footer">属性选择器footer</div>
    <div class="jd-footer">属性选择器footer</div>
    <div class="news-tao-nav">属性选择器</div>
    <div class="news-tao-header">属性选择器</div>
    <div class="tao-header">属性选择器</div>
input[type=text]
div[class=tao]

p::first-letter {
  font-size: 20px;
  color: hotpink;
}
/ 首行特殊样式 /
p::first-line {
  color: skyblue;
}
p::selection {
  / font-size: 50px; /
  color: orange;
}

div::befor {
  content:"开始";
}
div::after {
  content:"结束";
}