Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 伪类选择器与选择器权重
Blogger Information
Blog 12
fans 0
comment 0
visits 5385
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
伪类选择器与选择器权重
汉邦
Original
409 people have browsed it

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

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;
    }
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