CSS选择器

p {color:red;}

<p>这是一段文字</p>

p {color:red;}
p.blue{color:blue;}

 <p>这是一段红色文字</p>
 <p class="blue">这是一段蓝色文字</p>

/*data-role以h开始的div*/
div[data-role^=h]{color:red;}
/*data-role以content结尾的div*/
div[data-role$=content]{color:blue;}
/*data-role包含foot的div*/
div[data-role^=header]{color:yellow;}

<div data-role="h-header">header</div>
<div data-role="c-content">content</div>
<div data-role="f-footer">header</div>

/*选中子元素只有一个的ul子元素*/
ul.test_only :only-child {background-color: red;}

/*第一个子元素*/
li:first-child {color: red;}
/*最后一个子元素*/
li:last-child {color: orange;}
/*偶数项子元素*/
li:nth-child(2n){background-color: #ccc;}
/*奇数项子元素*/
li:nth-child(2n+1){background-color: yellow;}
<ul class="test_only">
        <li>only li</li>
    </ul>
    <ul class="test_only">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>

/*类型为dt的第一个子元素*/
dt:first-of-type {background-color: #ccc;}
/*类型为dt的最后一个子元素*/
dt:last-of-type {background-color: red;}
/*类型为dd的第三个子元素*/
dd:nth-of-type(3) {background-color: orange;}
/*类型为dd的倒数第三个子元素*/
dd:nth-last-of-type(3) {background-color: yellow;}


<dl>
    <dt>作者</dt>
    <dd>Leon</dd>
    <dt>出版社</dt>
    <dd>人民出版社</dd>
    <dt>出版时间</dt>
    <dd>2014-01-02</dd>
</dl>

/**
      * 伪元素选择器
      * ::first-letter 选择第一个字;
      * ::first-line 选择第一行;
      * ::before{content:"";} 在选择元素前面加入content内容
      * ::after{content:"";}; 在选择元素后面加入content内容
      * ::selection 被选中的内容，如鼠标选择的内容
      */
/*第一个字变大*/
div.oth-class p::first-letter{font-size:25px;font-weight:bold;}
div.oth-class p::first-line{color:red;}
/*前面加上before，after和before添加的内容无法被鼠标选中*/
div.oth-class p::before{content:"before";}
div.oth-class p::after{content:"after";}
/*被鼠标选择内容*/
div.oth-class p::selection{background-color: #ccc;color:orange;}



<div class="other">
     <p></p>
     <p>我是段落</p>

     <div><span>我是div，我有一个span</span></div>
     <div>我是div，没有span</div>

 </div>

 <div class="oth-class" style="border:1px solid red;">
     <p>这是一段文字，<br>这段文字有两行.</p>
 </div>