简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >伪类选择器-结构伪类、根据位置选择匹配

伪类选择器-结构伪类、根据位置选择匹配

P粉314265155
P粉314265155原创
2022年07月08日 18:58:54333浏览

结构伪类

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>伪类选择器-结构伪类、根据位置选择匹配</title>
  9. <link rel="stylesheet" href="../0707/css/zuoye1.css">
  10. </head>
  11. <body>
  12.    <!-- 伪类选择器类型
  13.     1、结构伪类:根据结构的位置获取元素
  14.     2、状态伪类：根据元素的状态来获取元素。例如获取焦点或者无效元素
  15.      -->
  16.      <!-- 伪：假的、仿 -->
  17.      <!-- 类：权重级别 依然是class级别，类 级/class级
  18.     -->
  21. <!-- 仿：假、仿 -->
  22. <!-- 类：权重级别 -->
  24. <!-- <ul class="weizhi">
  25.     <li>title</li>
  26.     <li>title</li>
  27.     <li>title</li>
  28.     <li>title</li>
  29.     <li>title</li>
  30.     <li>title</li>
  31.     <li>title</li>
  32.     <li>title</li>
  33. </ul> -->
  34. <ul class="weizhi">
  35.     <li class="title">item1</li>
  36.     <li >item2</li>
  37.     <li >item3</li>
  38.     <li >item4</li>
  39.     <li >item5</li>
  40.     <li >item7</li>
  41.     <li >item6</li>
  42.     <li >item8</li>
  43. </ul>
  44. </body>
  45. </html>
  1. .weizhi > li.title{
  2.     background-color: blue;
  3. }
  5. /* 获取当前第一个元素 */
  6. .weizhi  > li:nth-of-type(1){
  7.     background-color: red;
  8. }
  9. /* 获取第二个元素 */
  11. .weizhi > li:nth-of-type(2){
  12.     background-color: aqua;
  13. }
  14. /* 获取最后一个 */
  15. .weizhi > li:nth-of-type(8){
  16.     background-color: black;
  17. }
  18. /* 选择前三个 */
  20. /* 括弧里面公式：an+b
  21. a:是系数 -1反向 匹配  1是正向匹配，当a为2时 是偶数。当a为1时，是奇数
  22. n 是参数  ,就是标签的个数 从0开始
  23. 3：是偏移量 */
  24. .weizhi > li:nth-of-type(-n+3){
  25.     background-color: blueviolet;
  26. }
  27.  /* 如果是n就是所有 */
  28. .weizhi > li:nth-of-type(n){
  29.     background-color: teal;
  30. }
  31. /* 获取后三个
  32. 语法加上 last 另外 括弧内的 跟获取前三一样
  33. */
  35. .weizhi > li:nth-last-of-type(-n+3){
  37.     background-color: firebrick;
  38. }
  39. /* 获取第一个的快捷语法
  40. 把nth   换为  first  
  41. 获取最后一个快捷语法
  42. 把nth 换为last
  43. */
  44. /* .weizhi> li:first-of-type {
  45.     background-color: cyan;
  46.   } */
  47. .weizhi > li:first-of-type{
  48.     background-color: chocolate;
  49. }
  50. .weizhi > li:last-of-type{
  51. background-color: aliceblue;
  53. }
  55. /* 获取偶数、
  56. .list li:nth-of-type(even) 
  58.     奇数语法
  59. .list li:nth-of-type(odd)    
  61. */
  62. .weizhi  li:nth-of-type(even){
  63.     background-color: aqua;
  64. }
  66. .weizhi li:nth-of-type(odd){
  68.     background-color: blue;
  69. }

状态伪类

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>状态伪类</title>
  8. <link rel="stylesheet" href="../0707/css/zuoye2.css">
  9. </head>
  10. <body>
  12. <form action="checked.php">
  13. <!-- fieldset 表单分组,把里面的打包在一起 -->
  14. <fieldset>
  15.     <!-- legend 元素为 fieldset 元素定义标题（caption） -->
  16. <legend>我是fieldset的标题</legend>
  17.   <label for="male">用户注册页面</label>
  18.   <br>
  20. <label for="jinggao">警告：</label>
  21. <!-- disabled 不能选择 -->
  22. <input type="text" name="" id="jinggao"  value="一旦提交禁止注册" disabled   style="border: none;">
  23. <br>
  24. <label for="male">性别：</label>
  25. <!-- 注意 name要一样，不然 两个按键都能选中 -->
  26.   <input     type="radio"     id="male" name="sex"  checked><label for="male">男</label>
  27.  <input    type="radio"    id="male"  name="sex"><label for="female">女</label>  
  28.     <br>
  29. <button>提交</button>
  31. </fieldset>
  33. </form>
  34. <!-- 获取被禁用的元素，注意要在css里面写，就是在style里面写
  35.  -->
  36. <style>
  37. /* 获取被禁用的元素 ,修改样式、状态等*/
  38.     input:disabled{
  39.         background-color: blue;
  40.     }
  41. /* 获取选择的元素  ,修改样式、状态等*/
  42. input:checked{
  43.     background-color: aqua;
  44.     color: blueviolet;
  45. }
  46. /* 鼠标移入是时  ,修改样式、状态等*/
  47. /* hover   鼠标移入 */
  48. button:hover{
  49.     background-color: black;
  50. }
  52. /* 获取焦点时变化 */
  53. /* focus   焦点 */
  54. input:focus {
  55.         background-color: red;
  56.       }
  58. </style>
  61. </body>
  62. </html>

我是盒模型

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>盒/核模型</title>
  8. <link rel="stylesheet" href="../0707/css/zuoye3.css">
  10. </head>
  11. <body>
  12.   <!-- div就是一个小盒子 -->
  13.     <div class="box">
  15.     </div>
  17. <!-- 盒模型主要有四个参数，需要在css  style里面定义样式，div盒子默认有宽度 没有高度 -->
  18. <!-- 1、宽度：width -->
  19. <!-- 2、高度：height  -->
  20.  <!--3、 内边距：padding:   是内容区与边框之前的填充物-->
  21. <!-- 4、边距：border  -->
  22. <!-- 5、外边距：margin  控制当前盒子与其他元素之前的空隙    margin 的规则与padding完全一样 -->
  23. <style>
  24.     .box {
  25.         /* 宽度  、高度，注意要加px像素值，不然不起作用*/
  26.         width: 200px;
  27.         height: 300px;
  28.    /* 不可见因为没有设置可以被看见的属性 */
  29.   /*    /* 可见属性: 宽度, 样式, 颜色 可见的属性包含边框、背景等 */
  30.   /*不可见属性   padding 是内边距，是内容区与边框之前的填充物 */
  31. /* 不可见属性 margin: ; 外边距，控制当前盒子与其他元素之前的空隙 */
  32.    /* 不可见属性只能设置宽度，不能设置样式特征颜色样式虚线、实线 */
  34.         background-color: violet;
  35.         /*  background-clip  规定背景的绘制区域：背景裁切,只覆盖到内容区, 不包括padding */
  36.         background-clip: content-box;
  37.         /* solid是边框颜色 */
  38.         border: 5px solid;
  40.         padding: 30px;
  41. /* 盒子计算方式： */
  42. /* 宽度：注意把两边的padding border 都算进去了  没有计算margin  */
  43.    /* border-left-width + padding-left + width + padding-right + border-right-width */
  44.         /* 5 + 20 + 200 + 20 + 5 = 250px */
  45. /* 高度：注意把两边的padding border 都算进去了  没有计算margin  */
  46.    /* border-top-width + padding-top + height + padding-bottom + border-bottom-width */
  47.         /* 5 + 20 + 100 + 20 + 5 = 150px */
  49.          /* 
  50.         我们的本意是: 我设置的宽高就应该是盒子的最终大小,
  51.         而不是浏览器添加上内边距和边框后的计算大小 
  52.         */
  54.         /* 推荐的盒子大小计算方式,可以简化页面布局，可以只计算width和height ，不计算border和padding */
  55.         /* box-sizing */
  56.         box-sizing: border-box;
  57.         /* content-box   计算border和padding  还原到w3c默认标准盒子计算方式 ，或者引入css还原*/
  58.         /* box-sizing: content-box; */
  59.    }
  61.    .box {
  62.         /* border-top: 边框的顶部宽度   dashed是边框线条样式   边框背景前景色，底部同理 */
  63.         border-top: 10px dashed blue;
  64.         /* border-left: 边框的左边宽度 样式 前景色 ，右边同理*/
  65.         border-left: 10px dashed blue;
  67.         /* 四条边一样的时候,可以只写border */
  68.         border: 5px solid red;
  69.       }
  70.      /* 以下写盒子的边框值比较麻烦，可以进行简化 */
  71.       .box {
  72.         /* padding-left: 10px;
  73.         padding-top: 5px;
  74.         padding-right: 20px; */
  75.     }
  76.     .box {
  77.         /* padding
  78.         /* 简化方案: 顺时针方向 */
  79.         /* 1. 四值: 顺时针, 上, 右,下,左 */
  80.         padding: 5px 10px 15px 20px;
  81.         /* 2. 三值, 第一个表示上 中间永远表示左和右 */
  82.         padding: 5px 10px 15px;
  83.         /* 3. 双值, 第1个上和下,第2个左和右 */
  84.         padding: 5px 10px;
  86.         /* 三值,二值记忆方法: 第2个值永远表示左右 */
  88.         /* 4. 单值, 四个方向全相同 */
  89.         padding: 10px;
  90.       }
  92.       /* margin 的规则与padding完全一样 */
  93. </style>
  96. </body>
  97. </html>
我是初始化盒子
  1. /* 元素样式初始/重置 */
  2. /* 星号代表选择所有 */
  3. /* 星号 {
  4.     margin: 0;
  5.     padding: 0;
  6.     box-sizing: border-box;
  7.   }
  8.    */
上一条：1、实例演示伪类选择器: 结构伪类与状态伪类 2. 实例演示盒模型常用属性,附图下一条：CSS之伪类选择器和简单盒子简单案例
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多