前端笔记之HTML5&CSS3（中）选择器&伪类伪元素&CSS3效果&渐变背景&过渡

)(*&^){
    $%^&*():)*^%$;
}
div{
    width: 100px;
    fhjkdsahfkjasf:99834y912y492;
    height: 100px;
    !@#$%^&*:$%^&*();
    background-color: orange;
}

<div data-info="1"></div>
<div data-info="2"></div>
<div data-info="3"></div>
<div data-info="h1"></div>
<div data-info="h2"></div>
<div data-info="h3"></div>
<div data-info="a3"></div>
<div></div>
<div data-info="hahaxixi"></div>
<div></div>
<div data-info="haha"></div>
<div data-info="haha xixi"></div>
<div data-info="xixi haha memeda"></div>
<div data-info="haha-memeda"></div>
<div data-info="woaini haha-memeda"></div>
<div></div>

:first-child            p:first-child           选择其父元素中的第一个子元素
:last-child             p:last-child            选择其父元素中最后一个子元素
:first-of-type          p:first-of-type         选择其父元素中的首个<p>元素   
:last-of-type           p:last-of-type          选择其父元素中的最后<p>元素   
:only-of-type           p:only-of-type          选择其父元素中唯一的 <p>元素   
:only-child             p:only-child            选择其父元素中的唯一子元素   
:nth-child(n)           p:nth-child(2)          选择其父元素中的第二个子元素 
:nth-last-child(n)      p:nth-last-child(2)    同上，从最后一个子元素开始倒着计数。    
:nth-of-type(n)         p:nth-of-type(2)        选择其父元素第二个 <p> 元素
:nth-last-of-type(n)    p:nth-last-of-type(2)  同上，但是从最后一个子元素开始计数。 
:not(selector)          :not(p)                  排除选择器，选择非 <p> 元素的元素。 

<div>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
</div>
<div>
    <h3>h3</h3>
    <p></p>
    <p></p>
    <div>
        <p></p>
        <p></p>
        <p></p>
    </div>
</div> 

<div></div>
<div>  </div>
<div>
</div>
<div>我</div>

<p><a href="#news1">跳转至内容 1</a></p>
<p><a href="#news2">跳转至内容 2</a></p>

<p id="news1"><b>内容 1...</b></p>
<p id="news2"><b>内容 2...</b></p>

:first-letter        选中某个元素中的文本首字母或第一个文字，IE9开始兼容
:first-line          选中某个元素中的第一行文字，IE9开始兼容
:before               选中某个元素内部的前面插入内容
:after                选中某个元素内部的后面插入内容
::selection          选择被用户选取的文本，IE9开始兼容，Firefox要用::-moz-selection替代

p{
    width: 300px;
    border: 1px solid red;
    /*如何超出隐藏*/
    white-space: nowrap;/*文本不允许换行*/
    text-overflow: ellipsis;/*文本超出省略号*/
    overflow: hidden;/*段落内容超出隐藏*/
}
<p>React和Vue的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单,已成为 Web 开发的主流工具。</p>

div{
    width: 400px;
    border: 1px solid red;
            
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;/*第几行开始隐藏*/
    overflow: hidden;
}
<div>绰号“考拉”，北京航空航天大学软件工程硕士，前端开发培训名师。讲课幽默、有激情，学生称他的课堂是“小德云社”，让学生在欢声笑语中把知识学会！考拉老师曾在国内某著名培训机构担任特级讲师、课程研发专员，在北京、上海、广州各地职教，学生众多，优秀学员遍布阿里、腾讯、百度、京东、360、美团等公司。考拉老师的免费教学视频流传也非常广，观看总人数超十万之多。 观看邵山欢老师免费视频>中国最早的web App、PhoneGap、Node.js研究者，为北航诸多创业企业制作移动端项目。想感受名师的魅力，快来学习吧！</div>

div:nth-of-type(2){
    background:-webkit-linear-gradient(top,red,green,blue);
    background:-moz-linear-gradient(top,red,green,blue);
    background:-ms-linear-gradient(top,red,green,blue);
    background:-o-linear-gradient(top,red,green,blue);
    background:linear-gradient(top,red,green,blue);
}

background: url(images/0.png) repeat-y,
             url(images/shishi.jpg) no-repeat ,
             url(images/0.jpg);