伪类选择器与选择器权重

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网
选择器/盒模型/常用单位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;
    }
【文章出处:香港cn2服务器 http://www.558idc.com/st.html 复制请保留原URL】
更多阅读