简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 伪类选择器-结构伪类、根据位置选择匹配
Blogger Information
Blog 46
fans 2
comment 0
visits 19486
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
伪类选择器-结构伪类、根据位置选择匹配
P粉314265155
Original
334 people have browsed it

结构伪类

  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.    */
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！