CSS之伪类选择器和简单盒子简单案例

16lz 2022-07-09

1.伪类选择器

什么是伪类？

伪类用于定义元素的特殊状态。

例如，它可以用于：

获取列表前三行
.list > li:nth-of-type(-n + 3) {
  background-color: blue;
}
效果图如下：
获取最后三个
.list > li:nth-last-of-type(-n + 3) {
  background-color: red;
}
效果图如下：
获取偶数可以用2n或者even
.list > li:nth-of-type(2n) {
  background-color: rgb(208, 255, 0);
}
效果图如下：

获取奇数可以用2n+1/2n-1/odd
.list > li:nth-of-type(2n-1) {
  background-color: rgb(255, 0, 149);
}
效果图如下：

比如获取鼠焦点

<style>
        /* 鼠标选中状态变化 */
        button:hover {
          cursor: pointer;
          background-color: coral;
        }
        /* 获取焦点时变化 */
        input:focus {
          background-color: aquamarine;
        }
</style>

效果图如下：
![
获取焦点之后的样式
![
以上是伪类的简单使用案例，下面我们讲讲盒模型常用属性

2.盒模型常用属性

我们先看下盒子的结构

如图演示

下面我们实际演示一下

我们先给盒子加个边框，设置高度和宽度！
  <body>
    <div>
      <p>我是一个盒子</p>
    </div>
  </body>
  <style>
    div {
      height: 100px;
      width: 200px;
      border: 5px solid;
    }
  </style>
效果图
下面我们先看看怎么设置外边框（我们给他设置50像素）
margin: 50px;
看是不是有一个间隔了。嘿嘿

下面我们把背景裁切，只覆盖到内容区，不包括padding，方便演示一下内边框
background-clip: content-box;
我们给padding一个20像素
padding: 20px;
效果图如下：

以上我们就简单介绍了盒子的外边框和内边框的使用

说明：
padding:内边距，内容区和边框之间的填充物
margin: 外边距，控制盒子与其他元素之间的距离
padding和margin是不可见属性，样式，颜色是看不见的！

最后我们简单说一下还原到w3c默认标准盒子

我们直接用box-sizing:就可以还原到w3c默认标准盒子了
box-sizing: content-box;
人生没有白走的路，每一步都算数！

更多相关文章

随机推荐