我的定位：中高级人才（框架熟练、Java语法精通、数据库会用、Linux会用、中间件会用、有大数据经验！）
开始，我以为自己什么都知道。后来发现，其实我什么都不知道。

css03层次选择器 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <!--内部样式  写在head中-->
    <style type="text/css">
        /* 并集选择器  多个选择器之间使用,（英文半角状态）隔开
        .word,#s,span{
            color: green;
        }*/
        /*交集选择器  格式：01.标签选择器+类选择器   02.标签选择器+ID选择器
           必须是标签选择器在前
           div.word｛｝  去div标签中查找class属性值为 word的标签
           div#s{}  去div标签中查找id属性值为 s的标签
          div.word{
            color: green;
         } */
        /* 后代选择器  必须有层级关系 选择器之前使空格隔开*/
        #dv span {
            color: green;
        }

    </style>
</head>
<body>
<div>这是一个div1</div>
<div>这是一个div2</div>

<div class="word">类选择器</div>
<div class="word">类选择器</div>

<div id="s">ID选择器</div>
<span>div外面的span</span>

<div id="dv">
    <span>div里面的span标签1</span>
</div>

<div>
    <span>div里面的span标签2</span>
</div>

</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>层次选择器</title>
    <style type="text/css">
        /*并集选择器*/
        p,ul{
           border: 1px solid red;
        }
     /* 后代选择器
        body p{
             background: pink;
        }*/
     /* 子选择器
        body>p{
             background: pink;
        }*/
        /*相邻的兄弟选择器
 .first+p{
     background: pink;
 }*/

        /*所有兄弟选择器*/
 .first~p{
     background: pink;
 }
    </style>
</head>
<body>
<p class="first">1</p>
<p>2</p>
<p>3</p>
  <ul>
    <li>
        <p>4</p>
    </li>
    <li>
        <p>5</p>
    </li>
    <li>
        <p>6</p>
    </li>
  </ul>

</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>结构伪类选择器</title>
    <!-- 不需要在节点上 增加  额外的属性！ 结构伪类选择器-->
    <style  type="text/css">
      /*01.改变ul中第一个li元素的样式  颜色是红色
       ul li:first-child{
           color: red;
       }
       */
      /*02.改变ul中最后一个li元素的样式  颜色是红色
       ul li:last-child{
            color: red;
        }
       */

      /*03.改变页面中第3个p标签 颜色是红色  !  只看顺序  不看类型！
           001.无论p标签隐藏的多深！ 始终是自上而下的第三个p标签
           002.body节点下面第3个元素 如果是p 就显示样式

       body  p:nth-child(3){
            color: red;
        }
       */

      /*04.改变页面中第2个p标签  颜色是红色
          先看类型  再看顺序
     body  p:nth-of-type(2){
         color: red;
     }
     */
     /* 05.改变第一个ul中的第一个li 的样式 颜色是红色 */
      ul:nth-of-type(1) li:nth-of-type(1){
          color: red;
      }
    </style>

</head>
<body>
<p>p1</p>
<span>span</span>
<p>p2</p>
<p>p3</p>
<ul>
    <li>u1li1</li>
    <li>u1li2</li>
    <li>u1li3</li>
    <li>u1li4</li>
</ul>
<ul>
    <li>u2li1</li>
    <li>u2li2</li>
    <li>u2li3</li>
    <li>u2li4</li>
</ul>

</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>爱奇异视频播放列表</title>
    <style type="text/css">
        li{
            display: inline-block;  /*让li标签中的内容一行显示*/
        }
        /*使用结构伪类选择器选择li元素下的标题元素，并设置字体大小为16px，字体颜色为#4D4D4D*/
        li h4:nth-of-type(1){
            font-size: 24px;
            color: #4D4D4D;
        }
/*使用结构伪类选择器选择li下第一个p元素，设置字体大小为14px，字体颜色为 #640000*/
        li p:nth-of-type(1){
            font-size: 14px;
            color:#640000;
        }
/*使用结构伪类选择器选择li下第二个p元素，设置字体大小为12px，字体颜色为蓝色*/
        li p:nth-of-type(2){
            font-size: 12px;
            color:blue;
        }

    </style>
</head>
<body>
<h3>热播</h3>
<ul>
    <li>
        <img src="images/img1.png" alt=""/>
        <h4>神武赵子龙</h4>
        <p>怒，林更新不抱网红抱女神</p>
        <p>点击次数：242445次</p>
    </li>
    <li>
        <img src="images/img2.png" alt=""/>
        <h4>旋风十一人</h4>
        <p>胡歌变教练在撩前女友</p>
        <p>点击次数：242445次</p>
    </li>
    <li>
        <img src="images/img3.png" alt=""/>
        <h4>太阳的后裔</h4>
        <p>宋慧乔吃嫩草</p>
        <p>点击次数：242445次</p>
    </li>
    <li>
        <img src="images/img4.png" alt=""/>
        <h4>山海经之赤影传说</h4>
        <p>娜扎张翰再度联手</p>
        <p>点击次数：242445次</p>

    </li>
</ul>

</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>CSS3属性选择器的使用</title>
    <style type="text/css">
        /*此段代码只是让结构更美观，后续会详细讲解*/
        .demo a {
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            text-align: center;
            background: #aac;
            color: blue;
            font: bold 20px/50px Arial;
            margin-right: 5px;
            text-decoration: none;
            margin: 5px;
        }
        /*存在属性id的元素
        a[id]{
            background: chartreuse;
        }*/
        /*属性id=first的元素
        a[id="first"]{
            background: chartreuse;
        }*/
        /*属性class="links"的元素
        a[class="links"]{
            background: chartreuse;
        }*/
        /*属性class里包含links字符串的元素
        a[class*="links"]{
            background: chartreuse;
        }*/
        /*属性href里以http开头的元素
        a[href^="http"]{
            background: chartreuse;
        }*/
        /*属性href里以png结尾的元素*/
        a[href$="png"]{
            background: chartreuse;
        }
    </style>
</head>
<body>
<p class="demo">
    <a href="http://www.baidu.com" class="links item first" id="first" >1</a>
    <a href="" class="links active item" title="test website" target="_blank" >2</a>
    <a href="sites/file/test.html" class="links item"  >3</a>
    <a href="sites/file/test.png" class="links item" > 4</a>
    <a href="sites/file/image.jpg" class="links item" >5</a>
    <a href="efc" class="links item" title="website link" >6</a>
    <a href="/a.pdf" class="links item" >7</a>
    <a href="/abc.pdf" class="links item" >8</a>
    <a href="abcdef.doc" class="links item" >9</a>
    <a href="abd.doc" class="linksitem last" id="last">10</a>
</p>
</body>

 

posted @ 2017-06-29 14:01  想太多先森  阅读(178)  评论(0)  编辑  收藏  举报