伪类选择器与选择器权重以及盒子模型的实例演示 - 我的前端笔记

Home > List of blog posts > 伪类选择器与选择器权重以及盒子模型的实例演示

Blogger Information

Blog 9

fans 0

comment 0

visits 3928

Special Recommendation

More>

Related recommendations

1. 伪类选择器

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

1.1 结构伪类

与上下文选择器很相似

后文演示所用 HTML 代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>伪类展示</title>
    <link rel="stylesheet" href="rest.css" />
    <style>
      /* 此处填充 演示代码 */
    </style>
  </head>
  <body>
    <ul class="list">
      <li class="item">item1</li>
      <li class="item">item2</li>
      <li class="item">item3</li>
      <li class="item">item4</li>
      <li class="item">item5</li>
      <li class="item">item6</li>
      <li class="item">item7</li>
      <li class="item">item8</li>
      <li class="item">item9</li>
    </ul>
  </body>
</html>

1. `:nth-child(an+b)`:获取任意位置的元素

参数说明
- a: 系数,[0,1,2,3,…]
- n: 参数, [0,1,2,3,…]
- b: 偏移量, 从 0 开始
  
  规则: 计算出来的索引,必须是有效的(从 1 开始)

例子 1：匹配父元素中的第 n 个子元素，元素类型没有限制。n 可以是一个数字，一个关键字，或者一个公式。

代码如下：

.list > .item:nth-child(5) {
  background-color: red;
}

运行效果

例子 2：获取前三个元素
代码如下：

.list > .item:nth-child(-n + 3) {
  background-color: red;
}

运行效果

例子 3：获取最后三个元素
代码如下：

.list > .item:nth-last-child(-n + 3) {
  background-color: red;
}

运行效果

例子 4：选择列表的奇数项,参数可设为（2n+1）或者（2n-1）
代码如下：

.list > .item:nth-child(2n + 1) {
  background-color: red;
}

.list > .item:nth-child(2n - 1) {
  background-color: red;
}

可使用参数（odd）进行选择，更加方便快捷明了

.list > .item:nth-child(odd) {
  background-color: red;
}

运行效果

例子 5：选择列表的偶数项，可用参数（even）或（2n）

代码如下：

.list > .item:nth-child(even) {
  background-color: red;
}

.list > .item:nth-child(2n) {
  background-color: red;
}

运行效果

例子 6：选择有固定间隔特征的元素，可用偏侈量进行微调,可正可负
代码如下：

.list > .item:nth-child(3n + 1) {
  background-color: red;
}

运行效果

:first-child:选中父元素下的第一个子元素

代码如下：

.list > .item:first-child {
  background-color: red;
}

运行效果

:last-child:选中父元素下的最后一个子元素

代码如下：

.list > .item:last-child {
  background-color: red;
}

运行效果

1.2 状态伪类
演示所用 html 代码：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>状态伪类</title>
    <link rel="stylesheet" href="form.css" />
    <link rel="stylesheet" href="fake-status.css" />
  </head>
  <body>
    <form action="">
      <fieldset class="login">
        <legend class="title">用户登录</legend>
        <label for="uname">呢称:</label>
        <input type="text" name="uname" autofocus required />
        <label for="email">邮箱:</label>
        <input type="email" name="email" required />
        <label for="tel">电话:</label>
        <input type="tel" name="tel" />
        <div class="remember">
          <input type="checkbox" name="remember" id="rem" />
          <label for="rem">记住我</label>
        </div>
        <button class="submit">提交</button>
      </fieldset>
    </form>
  </body>
</html>

代码中form.css为样式代码，fake-status.css为实例操作代码，样式代码如下：

.login {
  display: inline-grid;
  grid: auto-flow / 3em 1fr;
  gap: 10px 0;
  padding: 1em;
}
.login input {
  border: none;
  border-bottom: thin solid #666;
}
.login .title {
  text-align: center;
}
.login .btn,
.login .remember {
  grid-column: 2;
  height: 2.2em;
}
.btn .submit,
.btn .reset {
  width: 40%;
  height: 2.2em;
}

链接,表单

:hover: 鼠标悬停

代码举例，鼠标悬停在提交按钮上，改变按钮颜色，鼠标变为小手型。

.login > .submit:hover {
  cursor: pointer;
  background-color: seagreen;
  color: white;
}

运行效果

:enabled: 有效控件

代码举例，改变.login下所有有效控件的边框

.login :enabled {
  border: solid 5px rebeccapurple;
}

运行效果

-

:disabled: 禁用控件

代码举例，改变.login下禁用控件的样式。

.login :disabled {
  background-color: aqua;
  color: cadetblue;
  border-color: antiquewhite;
}

运行效果

:checked: 选中控件

代码举例，复选框选中时将标签的文本描红

.login :checked + label {
  color: red;
}

运行效果

:required: 必选控件

代码举例，改变表单中，所有具有必填属性元素的背景颜色。

.login :required {
  background-color: yellow;
}

-运行效果

:focus: 焦点控件

代码举例，输入框获取焦点后，边框变为红色。

.login :focus {
  outline: 1px solid red;
  border-bottom: none;
}

运行效果

:not(): 过滤掉某些元素

代码举例，改变.login下非input元素的背景颜色。

.login :not(input) {
  background-color: red;
}

运行效果

:empty: 选择页面中为空的元素

代码举例，将表单中，没有内容的元素，用红色标出。

.login :empty {
  background-color: red;
}

运行效果

关于更多伪类知识请查询 MDN

2. 选择器优先级权重

优先级就是分配给指定的 CSS 声明的一个权重，它由匹配的选择器中的每一种选择器类型的数值决定。
而当优先级与多个 CSS 声明中任意一个声明的优先级相等的时候，CSS 中最后的那个声明将会被应用到元素上。
当同一个元素有多个声明的时候，优先级才会有意义。因为每一个直接作用于元素的 CSS 规则总是会接管/覆盖（take over）该元素从祖先元素继承而来的规则。

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

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

权重示例：

<div class="demo" id="test">
  <span class="text" id="title">爱你直到永远！</span>
</div>

/* 权重100 */
#title {
  color: green;
}
/* 权重010无法覆盖绿色值 */
.text {
  color: red;
}
/* 权重110，可以覆盖绿色值！ */
#title.text {
  color: yellow;
}
/* 权重020无法覆盖绿色值 */
.demo > .text {
  color: aqua;
}
/* 权重224，为span元素的顶级权重 */
html > body > div#test.demo > span#title.text {
  color: brown;
}

3. 盒模型

3.1 一切皆”盒子”

盒子是页面中可见的”矩形区域”
一个网站由多个盒子布局构成。

3.2 五大属性

width: 宽
height: 高
padding: 内边距
border: 边框
margin: 外边距

border

可见属性
可设置width,style,color

举例代码

<div class="test">
  <span>demo</span>
</div>

.test {
  width: 180px;
  height: 100px;
  /* 为每条边框设置不同的颜色 */
  border-top-width: 2px;
  border-top-style: solid;
  border-top-color: red;
  border-top: 2px solid red;
  border-right: 2px solid blue;
  border-bottom: 2px solid green;
  border-left: 2px solid violet;
  /* 四条边框相同，可简写 */
  /* border: 2px solid red; */
}

运行效果
padding,margin

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

若为元素设置四个值的外边距，应当遵循上、右、下、左，顺时针顺序原则。例如：

.test {
  width: 180px;
  height: 100px;
  /* 为每条边框设置不同的颜色 */
  border-top-width: 2px;
  border-top-style: solid;
  border-top-color: red;
  border-top: 2px solid red;
  border-right: 2px solid blue;
  border-bottom: 2px solid green;
  border-left: 2px solid violet;
  /* 四条边框相同，可简写 */
  /* border: 2px solid red; */
  margin: 5px 10px 15px 20px;
}

边距查看
两个值的边距设置，第一个为上下，第二个为左右。例如：margin: 5px 10px;
边距查看
三个值，顺序为第一个值为上，第二个值为左右，第三个值为下。例如：margin: 5px 10px 30px;
边距查看

内边距设置同样如此，在二值和三值的情况下，左右永远在第二个位置。
width,height

默认不包含 padding,border

.test {
  width: 180px;
  height: 100px;
}

边距查看
box-sizing

box-sizing: 设置盒模型计算边界
- content-box: 默认值,仅包括内容区
- 测试：
```
.test {
width: 180px;
height: 100px;
margin: 5px;
padding: 5px;
border: solid 2px red;
}
```
- 结论
  
  此模式下，盒子大小改变，宽高超出范围不利于计算。
- border-box: 推荐值,宽高扩展到可视边框
- 测试：
```
.test {
width: 180px;
height: 100px;
margin: 5px;
padding: 5px;
border: solid 2px red;
box-sizing: border-box;
}
```
- 结论
  
  此模式下，边距往内扩展，盒子大小不变。

通用初始化代码

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Correcting teacher：

PHPz

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

chrome安装以及插件的安装

2023-03-09 23:05:37

1. 伪类选择器

1.1 结构伪类

1. :nth-child(an+b):获取任意位置的元素

例子 1：匹配父元素中的第 n 个子元素，元素类型没有限制。n 可以是一个数字，一个关键字，或者一个公式。

例子 2：获取前三个元素

例子 3：获取最后三个元素

例子 4：选择列表的奇数项,参数可设为（2n+1）或者（2n-1）

例子 5：选择列表的偶数项，可用参数（even）或（2n）

例子 6：选择有固定间隔特征的元素，可用偏侈量进行微调,可正可负

1.2 状态伪类

2. 选择器优先级权重

3. 盒模型

3.1 一切皆”盒子”

3.2 五大属性

border

padding,margin

width,height

box-sizing

通用初始化代码

1. `:nth-child(an+b)`:获取任意位置的元素