search

博客列表 >伪类选择器和盒模型常用属性

伪类选择器和盒模型常用属性

Wu.Ang
Wu.Ang原创
2022年08月06日 10:54:55346浏览

伪类选择器和盒模型常用属性

伪类选择器(结构伪类、状态伪类)

1. 结构伪类:根据元素位置获取元素

伪类的权重与 class 一样

  1. <ul class="list">
  2.   <li class="first">item1</li>
  3.   <li>item2</li>
  4.   <li>item3</li>
  5.   <li>item4</li>
  6.   <li>item5</li>
  7.   <li>item6</li>
  8.   <li>item7</li>
  9.   <li>item8</li>
  10.   <li>item9</li>
  11.   <li>item10</li>
  12. </ul>
  1. nth-of-type(an+b) a : 系数,从0递增 n : 参数,从0递增 b : 偏移量,从0开始
  2. 计算出来的索引必须有效,必须从1开始 选择的元素只有两种情况(1.一个 2.一组)

获取一个元素

  1. /* 获取当前第一个元素 */
  2. /* 用class查找 */
  3. .list > .first {
  4.   background-color: red;
  5. }
  6. /* 伪类获取.list下第一个子元素 */
  7. .list > li:nth-of-type(0n + 1) {
  8.   background-color: aqua;
  9. }
  11. .list > li:nth-of-type(1) {
  12.   background-color: aqua;
  13. }

获取一组元素

  1. a = 1 时,获取元素位置
  2. /* 从第三个开始匹配 */
  3. .list > li:nth-of-type(1n+3) {
  4.   background-color: aqua;
  5. }
  6. /* 获取到前三个,从第三个递减,a取负数 */
  7. .list > li:nth-of-type(-1n + 3) {
  8.   background-color: aqua;
  9. }
  1. a = 2 时,获取元素的奇偶
  2. /* 2n 偶数 */
  3. .list > li:nth-of-type(2n) {
  4.   background-color: aqua;
  5. }
  6. /* 2n+1/2n-1奇数 */
  7. .list > li:nth-of-type(2n + 1) {
  8.   background-color: aqua;
  9. }
  1. /* 获取最后三个 */
  2. /* :nth-last-of-type */
  3. .list > li:nth-last-of-type(-n + 3) {
  4.   background-color: green;
  5. }

语法糖:快捷方式

  1. /* 获取第一个 :first-of-type */
  2. .list > li:first-of-type {
  3.   background-color: green;
  4. }
  5. /* 获取最后一个 :last-of-type */
  6. .list > li:last-of-type {
  7.   background-color: green;
  8. }
  9. /* 奇偶  even=偶数/odd奇数  */
  10. .list > li:nth-of-type(even/odd) {
  11.   background-color: green;
  12. }

结构伪类实例演示

1.代码

  1. /* 1.改变列表第一个元素背景颜色 */
  2. ul.list > li:first-of-type {
  3.   background-color: aqua;
  4. }
  5. /* 2.改变列表最后一个背景颜色 */
  6. ul.list > li:last-of-type {
  7.   background-color: lightblue;
  8. }
  9. /* 3.改变偶数列表边框宽度 */
  10. ul.list > li:nth-of-type(even) {
  11.   border: 2px solid black;
  12. }
  13. /* 4.改变奇数列表边框颜色 */
  14. ul.list > li:nth-of-type(odd) {
  15.   border: 1px solid red;
  16. }
  17. /* 5.改变列表前三个字体颜色 */
  18. ul.list > li:nth-of-type(-n + 3) {
  19.   color: blue;
  20. }
  21. /* 6.改变列表最后三个字体颜色 */
  22. ul.list > li:nth-last-of-type(-n + 3) {
  23.   color: magenta;
  24. }

2.图片
列表

2. 状态伪类:根据元素的状态获取元素

  1. /* 获取焦点 */
  2. input:focus {
  3.   color: green;
  4. }
  5. /* 获取被禁用的元素 */
  6. input:disabled {
  7.   color: red;
  8. }
  9. /* 获取选中的单选按钮 */
  10. input:checked + label {
  11.   color: yellow;
  12. }
  13. /* button{
  14.     cursor: pointer;
  15. } */
  16. /* 鼠标移入变化 */
  17. button:hover {
  18.   cursor: pointer;
  19. }

状态伪类实例演示

1.代码

  1. /* 用户名输入框字体颜色改为绿色 */
  2. /* 获取焦点 */
  3. input:focus {
  4.   color: green;
  5. }
  7. /* 警告框字体变为红色 */
  8. /* 获取被禁用的元素 */
  9. input:disabled {
  10.   background-color: white;
  11.   border: none;
  12.   color: red;
  13. }
  15. /* 默认单选按钮字体变为黄色 */
  16. /* 获取选中的单选按钮的兄弟元素 */
  17. input:checked + label {
  18.   color: yellow;
  19. }
  21. /* 提交按钮鼠标悬停变为手指 */
  22. /* 鼠标移入变化 */
  23. button:hover {
  24.   cursor: pointer;
  25. }

2.图片
表格

盒模型常用属性

边框与内外边距

  1. div是块元素 display:block; 默认占一行,不管有多宽,垂直排列 margin(外边距) >
  2. boder(边框) > padding(内边距) > conetnt(内容) margin :
  3. 控制当前元素与其他元素之间的缝隙 padding : 内容与边框之间的填充物
  4. 两者都是不可见属性,只能设置宽度,不能设置特征(颜色、样式)
  5. 页面中计算盒子的实际宽高,不包括外边距 总宽度 = boder-left-width +
  6. padding-left-width + conetnt-width + boder-right-width + padding-right-width
  7. 总高度 = boder-left-height + padding-left-height + conetnt-height +
  8. boder-right-height + padding-right-height
  1. /* border: 宽度 样式 颜色; */
  2. div.box {
  3.   border: 1px solid red;
  4.   /* border-top/bottom/left/right: ; */
  6.   /* 不可见元素只能设置宽度 */
  7.   /* 顺时针方向编写 */
  8.   /* 四值 padding: 上 右 下 左; */
  9.   padding: 5px 6px 10px 20px;
  10.   /* 三值 padding: 上 左右 下; */
  11.   /* 两值 padding: 上下 左右; */
  12.   /* 单值 padding: 上右下左; */
  13. }

元素样式初始化

  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4.   /* 盒子的宽高包括内边距 */
  5.   box-sizing: border-box;
  6.   /* 还原到w3c默认标准盒子的计算方式 */
  7.   /* box-sizing: content-box; */
  8. }

背景裁切

  1. /* 背景裁切,让内容只覆盖到内容区(不包括padding) */
  2. div.box {
  3.   background-clip: content-box;
  4. }

盒模型实例演示

1.代码

  1. /* 元素样式初始化 */
  2. *{
  3.     margin: 0;
  4.     padding: 0;
  5.     box-sizing: border-box;
  6. }
  7. /* 最外层边框属性 */
  8. div.outside{
  9.     width: 1200px;
  10.     height: 900px;
  11.     border: 2px solid;
  12. }
  13. /* 参照div属性 */
  14. div.outside > div.initial{
  15.     width: 100px;
  16.     height: 100px;
  17.     border: 1px solid red;
  18.     color: red;
  19. }
  21. /* padding设定 */
  22. div.outside > div.padding{
  23.     padding: 10px;
  24.     width: 100px;
  25.     height: 100px;
  26.     border: 1px solid;
  27.     background-color: aqua;
  28.     /* 边框裁剪 */
  29.     background-clip: content-box;
  30. }
  32. /* margin设定 */
  33. div.outside > div.margin{
  34.     width: 100px;
  35.     height: 100px;
  36.     border: 1px solid;
  37.     margin: 10px;
  38. }
  39. /* border四边框 */
  40. div.outside > div.border{
  41.     width: 100px;
  42.     height: 100px;
  43.     /* 四条边框一致 */
  44.     /* border: 1px solid red; */
  45.     /* 四条边框不一致 */
  46.     border-top: 3px solid red;
  47.     border-right: 6px dashed green;
  48.     border-bottom: 2px solid tan;
  49.     border-left: 5px dashed yellow;
  50. }
  52. /* margin/padding四边框 */
  53. div.outside > div.padding_boder{
  54.     width: 100px;
  55.     height: 100px;
  56.     border: 1px solid;
  57.     padding: 5px 6px 10px 20px;
  58.     /* 四值 padding: 上 右 下 左; */
  59.     /* 三值 padding: 上 左右 下; */
  60.     /* 两值 padding: 上下 左右; */
  61.     /* 单值 padding: 上右下左; */
  62. }

2.图片
盒模型

上一条：未来装备探索：数字孪生装备下一条：新SCADA 系统：集成边缘计算、MQTT 和云平台
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议