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 层次选择器

    <!DOCTYPE HTML> <html> <head> <title> 使用jQuery层次选择器 </title> <scrip ...

  2. CSS层次选择器温故-2

    1.层次选择器 通过HTML的DOM元素间的层次关系获取元素,层次关系包括后代.父子.相邻兄弟和通用兄弟,通过其中某类关系可以方便快捷地选定需要的元素 2.语法 3.兼容性 IE7以及以上版本 4.后 ...

  3. jQuery层次选择器

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  4. Jquery基本、层次选择器

    基本选择器: $("#none").css("background","#bbffaa"); 改变id为none的所有元素的背景色 $(&q ...

  5. jQuery选择器介绍:基本选择器、层次选择器、过滤选择器、表单选择器

    选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器.因此,如果能熟练的使用选择器,不仅能简化代码,而且可以达到事半功倍的效果.jQuery选择器完全继承了 ...

  6. jQuery选择器之层次选择器Demo

    测试代码: 02-层次选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  7. jQuery基础学习7——层次选择器find()方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. jq层次选择器

    二. 层次选择器 1. parent > child(直系子元素) $(document).ready(function () { // 选取div下的第一代span元素,将字体颜色设为红色 $ ...

  9. css03复合选择器

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

随机推荐

  1. const,var,let区别(转载)

    1.const定义的变量不可以修改,而且必须初始化. const b = 2;//正确 // const b;//错误,必须初始化 console.log('函数外const定义b:' + b);// ...

  2. unix 全缓冲、行缓冲、无缓冲

    基于流的操作最终会调用read或者write函数进行I/O操作.为了使程序的运行效率最高,流对象通常会提供缓冲区,以减少调用系统I/O库函数的次数. 基于流的I/O提供以下3种缓冲: 全 缓冲:直到缓 ...

  3. 解释一下python中的关系运算符

    关系运算符用于比较两个值 1.小于号,如果左边的值较小,则返回Trueprint('hi'<'Hi')#False 2.大于号,如果左边的值较大,则返回Trueprint(1.1+2.2> ...

  4. GIT学习笔记(4):远程分支

    GIT学习笔记(4):远程分支 远程分支 远程分支是什么 远程分支是对远程仓库中的分支的索引.它们是一些无法移动的本地分支:只有在GIT进行网络交互时才会更新.远程分支就是书签,提醒着你上次连接远程仓 ...

  5. PL/SQL编程—变量

    SQL> declare c_tax_rate ,):=0.03; v_name ); v_passwd ); v_sale ,); v_tax_sale ,); begin select na ...

  6. String创建方式的区别

    String str0 = "abc"; String str1 = new String("abc"); 第一句执行后,会在String pool中创建一个& ...

  7. apache性能测试工具ab

    性能测试工具目前最常见的有以下几种:ab.http_load.webbench.siege ab是apache自带的压力测试工具.ab非常实用,它不仅可以对apache服务器进行网站访问压力测试,也可 ...

  8. codeforces 808D

    题意:给出一个序列,询问是否能移动一个数(或不操作)使得序列能分为左右两个和相等的子序列. 思路:对每个数处理最左边和最右边出现的位置.设置断点分左右区间,左右区间和差值的一半就是要找的数,进行判断. ...

  9. Spring Boot 快速入门(IDEA)

    从字面理解,Boot是引导的意思,因此SpringBoot帮助开发者快速搭建Spring框架:SpringBoot帮助开发者快速启动一个Web容器:SpringBoot继承了原有Spring框架的优秀 ...

  10. 【P2944】地震损失(最大流,洛谷)

    绝对难度虚高的一题 看到题目,至少损坏几个房子,开始考虑最小割,建的是双向边,所以拆点,边权除了自己与自己的之外都连inf.然后把所有求救的点都连到超级源上,跑一遍最大流就可以了. #include& ...