1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <!--内部样式  写在head中-->
  7.     <style type="text/css">
  8.         /* 并集选择器  多个选择器之间使用,（英文半角状态）隔开
  9.         .word,#s,span{
  10.             color: green;
  11.         }*/
  12.         /*交集选择器  格式：01.标签选择器+类选择器   02.标签选择器+ID选择器
  13.            必须是标签选择器在前
  14.            div.word｛｝  去div标签中查找class属性值为 word的标签
  15.            div#s{}  去div标签中查找id属性值为 s的标签
  16.           div.word{
  17.             color: green;
  18.          } */
  19.         /* 后代选择器  必须有层级关系 选择器之前使空格隔开*/
  20.         #dv span {
  21.             color: green;
  22.         }
  23.  
  24.     </style>
  25. </head>
  26. <body>
  27. <div>这是一个div1</div>
  28. <div>这是一个div2</div>
  29.  
  30. <div class="word">类选择器</div>
  31. <div class="word">类选择器</div>
  32.  
  33. <div id="s">ID选择器</div>
  34. <span>div外面的span</span>
  35.  
  36. <div id="dv">
  37.     <span>div里面的span标签1</span>
  38. </div>
  39.  
  40. <div>
  41.     <span>div里面的span标签2</span>
  42. </div>
  43.  
  44. </body>
  45. </html>
  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title>层次选择器</title>
  6.     <style type="text/css">
  7.         /*并集选择器*/
  8.         p,ul{
  9.            border: 1px solid red;
  10.         }
  11.      /* 后代选择器
  12.         body p{
  13.              background: pink;
  14.         }*/
  15.      /* 子选择器
  16.         body>p{
  17.              background: pink;
  18.         }*/
  19.         /*相邻的兄弟选择器
  20.  .first+p{
  21.      background: pink;
  22.  }*/
  23.  
  24.         /*所有兄弟选择器*/
  25.  .first~p{
  26.      background: pink;
  27.  }
  28.     </style>
  29. </head>
  30. <body>
  31. <p class="first">1</p>
  32. <p>2</p>
  33. <p>3</p>
  34.   <ul>
  35.     <li>
  36.         <p>4</p>
  37.     </li>
  38.     <li>
  39.         <p>5</p>
  40.     </li>
  41.     <li>
  42.         <p>6</p>
  43.     </li>
  44.   </ul>
  45.  
  46. </body>
  47. </html>
  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title>结构伪类选择器</title>
  6.     <!-- 不需要在节点上 增加  额外的属性！ 结构伪类选择器-->
  7.     <style  type="text/css">
  8.       /*01.改变ul中第一个li元素的样式  颜色是红色
  9.        ul li:first-child{
  10.            color: red;
  11.        }
  12.        */
  13.       /*02.改变ul中最后一个li元素的样式  颜色是红色
  14.        ul li:last-child{
  15.             color: red;
  16.         }
  17.        */
  18.  
  19.       /*03.改变页面中第3个p标签 颜色是红色  !  只看顺序  不看类型！
  20.            001.无论p标签隐藏的多深！ 始终是自上而下的第三个p标签
  21.            002.body节点下面第3个元素 如果是p 就显示样式
  22.  
  23.        body  p:nth-child(3){
  24.             color: red;
  25.         }
  26.        */
  27.  
  28.       /*04.改变页面中第2个p标签  颜色是红色
  29.           先看类型  再看顺序
  30.      body  p:nth-of-type(2){
  31.          color: red;
  32.      }
  33.      */
  34.      /* 05.改变第一个ul中的第一个li 的样式 颜色是红色 */
  35.       ul:nth-of-type(1) li:nth-of-type(1){
  36.           color: red;
  37.       }
  38.     </style>
  39.  
  40. </head>
  41. <body>
  42. <p>p1</p>
  43. <span>span</span>
  44. <p>p2</p>
  45. <p>p3</p>
  46. <ul>
  47.     <li>u1li1</li>
  48.     <li>u1li2</li>
  49.     <li>u1li3</li>
  50.     <li>u1li4</li>
  51. </ul>
  52. <ul>
  53.     <li>u2li1</li>
  54.     <li>u2li2</li>
  55.     <li>u2li3</li>
  56.     <li>u2li4</li>
  57. </ul>
  58.  
  59. </body>
  60. </html>
  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title>爱奇异视频播放列表</title>
  6.     <style type="text/css">
  7.         li{
  8.             display: inline-block;  /*让li标签中的内容一行显示*/
  9.         }
  10.         /*使用结构伪类选择器选择li元素下的标题元素，并设置字体大小为16px，字体颜色为#4D4D4D*/
  11.         li h4:nth-of-type(1){
  12.             font-size: 24px;
  13.             color: #4D4D4D;
  14.         }
  15. /*使用结构伪类选择器选择li下第一个p元素，设置字体大小为14px，字体颜色为 #640000*/
  16.         li p:nth-of-type(1){
  17.             font-size: 14px;
  18.             color:#640000;
  19.         }
  20. /*使用结构伪类选择器选择li下第二个p元素，设置字体大小为12px，字体颜色为蓝色*/
  21.         li p:nth-of-type(2){
  22.             font-size: 12px;
  23.             color:blue;
  24.         }
  25.  
  26.     </style>
  27. </head>
  28. <body>
  29. <h3>热播</h3>
  30. <ul>
  31.     <li>
  32.         <img src="data:images/img1.png" alt=""/>
  33.         <h4>神武赵子龙</h4>
  34.         <p>怒，林更新不抱网红抱女神</p>
  35.         <p>点击次数：242445次</p>
  36.     </li>
  37.     <li>
  38.         <img src="data:images/img2.png" alt=""/>
  39.         <h4>旋风十一人</h4>
  40.         <p>胡歌变教练在撩前女友</p>
  41.         <p>点击次数：242445次</p>
  42.     </li>
  43.     <li>
  44.         <img src="data:images/img3.png" alt=""/>
  45.         <h4>太阳的后裔</h4>
  46.         <p>宋慧乔吃嫩草</p>
  47.         <p>点击次数：242445次</p>
  48.     </li>
  49.     <li>
  50.         <img src="data:images/img4.png" alt=""/>
  51.         <h4>山海经之赤影传说</h4>
  52.         <p>娜扎张翰再度联手</p>
  53.         <p>点击次数：242445次</p>
  54.  
  55.     </li>
  56. </ul>
  57.  
  58. </body>
  59. </html>
  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title>CSS3属性选择器的使用</title>
  6.     <style type="text/css">
  7.         /*此段代码只是让结构更美观，后续会详细讲解*/
  8.         .demo a {
  9.             float: left;
  10.             display: block;
  11.             height: 50px;
  12.             width: 50px;
  13.             border-radius: 10px;
  14.             text-align: center;
  15.             background: #aac;
  16.             color: blue;
  17.             font: bold 20px/50px Arial;
  18.             margin-right: 5px;
  19.             text-decoration: none;
  20.             margin: 5px;
  21.         }
  22.         /*存在属性id的元素
  23.         a[id]{
  24.             background: chartreuse;
  25.         }*/
  26.         /*属性id=first的元素
  27.         a[id="first"]{
  28.             background: chartreuse;
  29.         }*/
  30.         /*属性class="links"的元素
  31.         a[class="links"]{
  32.             background: chartreuse;
  33.         }*/
  34.         /*属性class里包含links字符串的元素
  35.         a[class*="links"]{
  36.             background: chartreuse;
  37.         }*/
  38.         /*属性href里以http开头的元素
  39.         a[href^="http"]{
  40.             background: chartreuse;
  41.         }*/
  42.         /*属性href里以png结尾的元素*/
  43.         a[href$="png"]{
  44.             background: chartreuse;
  45.         }
  46.     </style>
  47. </head>
  48. <body>
  49. <p class="demo">
  50.     <a href="http://www.baidu.com" class="links item first" id="first" >1</a>
  51.     <a href="" class="links active item" title="test website" target="_blank" >2</a>
  52.     <a href="sites/file/test.html" class="links item"  >3</a>
  53.     <a href="sites/file/test.png" class="links item" > 4</a>
  54.     <a href="sites/file/image.jpg" class="links item" >5</a>
  55.     <a href="efc" class="links item" title="website link" >6</a>
  56.     <a href="/a.pdf" class="links item" >7</a>
  57.     <a href="/abc.pdf" class="links item" >8</a>
  58.     <a href="abcdef.doc" class="links item" >9</a>
  59.     <a href="abd.doc" class="linksitem last" id="last">10</a>
  60. </p>
  61. </body>
  62. </html>

css03复合选择器的更多相关文章

  1. jQuery 复合选择器的几个例子

    <!-- 本文例子所引用的jQuery版本为 jQuery-1.8.3.min.js Author:博客园小dee --> 一. 复合选择器对checkbox的相关操作 1 <inp ...

  2. 使用CSS的类名交集复合选择器

    首先先看一下基本定义: 复合选择器就是两个或多个基本选择器,通过不同方式连接而成的选择器,主要包括“交集”选择器.“并集”选择器.“后代”选择器. 交集选择器 “交集”复合选择器是由两个选择器直接连接 ...

  3. css复合选择器的权重

    选择器的权重 标签选择器的权重为0001 class选择器的权重为0010 id选择器的权重为0100 属性选择器的权重为0010 伪类选择器的权重为0010 伪元素选择器的权重为0010 包含选择器 ...

  4. 使用css的类名交集复合选择器 《转》

    复合选择器就是两个或多个基本选择器,通过不同方式连接而成的选择器,主要包括“交集”选择器.“并集”选择器.“后代”选择器. 交集选择器 “交集”复合选择器是由两个选择器直接连接构成,其结果是选中二者各 ...

  5. css学习_css复合选择器

    css复合选择器 a.交集选择器  (即...又...:选择器之间不能有空格) p.one{color:red;] b.并集选择器(中间由逗号隔开) p,div{color:red;} c.后代选择器 ...

  6. CSS复合选择器

    复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签. 交集选择器 交集选择器由两个选择器构成,其中第一个为标签选择器,第二个为class选择器, ...

  7. (2)css的复合选择器与特性

    css的复合选择器与特性 在本篇学习资料中,将深入了解css的相关概念,上一篇介绍的3种基本选择器的基础上,学习3种由基本选择器复合构成的选择器,然后再介绍css的两个重要的特性. 1.复合选择器 复 ...

  8. CSS复合选择器是什么？复合选择器是如何工作

    复合选择器介绍 复合选择器其实很好理解,说白了就跟我们生活中的有血缘关系家庭成员一样,通过标签或者class属性或id属性,去找对应的有血缘关系的某个选择器,具体的大家往下看哦. 如果是初学者对基本的 ...

  9. CSS复合选择器和div盒子模型

    一.复合选择器(3种) 1.交集复合选择器 特点:由2个选择器组成,其中第一个必须是标签选择器,第二个是类或id选择器.两个选择器之间没有空格(有空格属于层级选择器) <h3 class=&qu ...

随机推荐

  1. TalkingDataGame SDK在android Lua上的使用

    千呼万唤使出来...终于开始更新lua版本的内容了,之前一直有这方面的计划,由于公司业务比较多,一直比较忙-见谅.. 费话不多说,直接上内容.. 整体来讲,先是先建议看一下之前关于cocos2dx上的 ...

  2. 安装 vsftp

    1.yum安装 vsftp yum list vsftpd yum install vsftpd 2.配置 vsftp 将root注释掉 vi /etc/vsftpd/ftpusers 将root注释 ...

  3. 文件操作-php

    <?php /* 建立缓存 可以用文件长时间保存数据 文件是以liunux为模型的 在Windows下只能获取file ,dir unknow linux 下可以获取block char dir ...

  4. 两个示例介绍JavaScript的闭包

    JavaScript的闭包有两个用途:一个是访问函数内部的变量:另一个是让变量的值在作用域内保持不变.函数是JavaScript 中唯一有作用域的对象,因此JavaScript的闭包依赖于函数实现,下 ...

  5. 19 Remove Nth Node From End of List(去掉链表中倒数第n个节点Easy)

    题目意思:去掉链表中倒数第n个节点 思路:1.两次遍历,没什么技术含量,第一次遍历计算长度,第二次遍历找到倒数第k个,代码不写了   2.一次遍历,两个指针,用指针间的距离去计算. ps:特别注意删掉 ...

  6. PAT - IO - 螺旋方阵

    所谓“螺旋方阵”,是指对任意给定的N,将1到N*N的数字从左上角第1个格子开始,按顺时针螺旋方向顺序填入NxN的方阵里.本题要求构造这样的螺旋方阵. 输入格式: 输入在一行中给出一个正整数N(< ...

  7. php处理中文字符串

    使用mbstring 先转换成UTF-8编码 mb_convert_encoding(Input::get('tags'),'UTF-8') mbstring用法参考http://php.net/ma ...

  8. HTML 内嵌JS脚本、相关参考手册

    提供一个JS.HTML参考手册入口:http://www.w3school.com.cn/jsref/index.asp. JavaScript 最常用于图片操作.表单数据处理以及内容动态更新. &l ...

  9. 桌面小部件----LED电子时钟实现

    桌面控件是通过 Broadcast 的形式来进行控制的,因此每个桌面控件都对应于一个BroadcastReceiver.为了简化桌面控件的开发,Android 系统提供了一个 AppWidgetPro ...

  10. Java实现KMP算法

    /**  * Java实现KMP算法  *   * 思想:每当一趟匹配过程中出现字符比较不等,不需要回溯i指针,   * 而是利用已经得到的“部分匹配”的结果将模式向右“滑动”尽可能远   * 的一段 ...