登录  /  注册
首页 > 博客列表 > 伪类选择器与选择器权重
博主信息
博文 12
粉丝 0
评论 0
访问量 7344
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
伪类选择器与选择器权重
汉邦
原创
571人浏览过

选择器/盒模型/常用单位

1. 伪类选择器

根据元素的位置或状态来匹配子元素

1.1 结构伪类

与上下文选择器很相似

  1. :nth-child():在括号内定义
  2. :first-child:第一个元素
  3. :last-child:最后一个
  4. :nth-last-child()：倒数
    代码演示：
    1. .list>.item:nth-child(1){
    2.  background-color: violet;
    3.  }/* 括号内填写多少数字就获取对应的元素 */
    获取第一个元素：
    1. .list > .item:first-child {
    2. background-color: violet-;
    3. }
    获取最后一个元素：
    1. .list > .item:last-child {
    2. background-color: violet-;
    3. }
    获取倒数第三个元素：
    1. .list>.item:nth-last-child(3){
    2.  background-color: violet;
    3.  }

1.2 状态伪类

链接,表单

  1. :hover: 鼠标悬停
  2. :enabled: 有效控件
  3. :disabled: 禁用控件
  4. :checked: 选中控件
  5. :required: 必选控件
  6. :focus: 焦点控件
  7. :not(): 过滤掉某些元素
  8. :empty(): 空

更多查询 MDN

2. 选择器权重

  1. 原子选择器: tag,class,id
  2. 原子选择器权重: tag(1),class(10),id(100)

可简单理解为: 标签是个位, class 是十位, id 是百位

3. 盒模型

3.1 一切皆”盒子”

  1. 盒子是页面中可见的”矩形区域”
  2. php.cn:<html>,{outline:1px solid red}

3.2 五大属性

  1. width: 宽
  2. height: 高
  3. padding: 内边距
  4. border: 边框
  5. margin: 外边距

3.3 border

  1. 可见属性
  2. 可设置width,style,color

3.4 padding,margin

  1. 不可见属性
  2. 仅可设置: width
  3. 大多数内置元素都有默认padding/margin
  4. 建议全部重置为 0,以方便自定义布局

3.5 width,height

  1. 默认不包含 padding,border

3.6 box-sizing

  1. box-sizing: 设置盒模型计算边界
  2. content-box: 默认值,仅包括内容区
  3. border-box: 推荐值,宽高扩展到可视边框

3.7 通用初始化

```css

  • {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
批改老师：PHPzPHPz

批改状态：合格

老师批语：
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录