Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > CSS之伪类选择器和简单盒子简单案例
Blogger Information
Blog 17
fans 1
comment 0
visits 8837
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
CSS之伪类选择器和简单盒子简单案例
P粉933302309
Original
399 people have browsed it

1.伪类选择器

什么是伪类？

伪类用于定义元素的特殊状态。
例如，它可以用于：

获取列表前三行

  1. .list > li:nth-of-type(-n + 3) {
  2.   background-color: blue;
  3. }

效果图如下：

获取最后三个 

  1. .list > li:nth-last-of-type(-n + 3) {
  2.   background-color: red;
  3. }

效果图如下：

获取偶数可以用2n或者even

  1. .list > li:nth-of-type(2n) {
  2.   background-color: rgb(208, 255, 0);
  3. }

效果图如下：

获取奇数可以用2n+1/2n-1/odd

  1. .list > li:nth-of-type(2n-1) {
  2.   background-color: rgb(255, 0, 149);
  3. }

效果图如下：

比如获取鼠焦点

  1. <style>
  3.         /* 鼠标选中状态变化 */
  4.         button:hover {
  5.           cursor: pointer;
  6.           background-color: coral;
  7.         }
  8.         /* 获取焦点时变化 */
  9.         input:focus {
  10.           background-color: aquamarine;
  11.         }
  12. </style>

效果图如下：
![

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

2.盒模型常用属性

我们先看下盒子的结构

如图演示

下面我们实际演示一下

我们先给盒子加个边框，设置高度和宽度！

  1.   <body>
  2.     <div>
  3.       <p>我是一个盒子</p>
  4.     </div>
  5.   </body>
  6.   <style>
  7.     div {
  8.       height: 100px;
  9.       width: 200px;
  10.       border: 5px solid;
  11.     }
  12.   </style>

效果图

下面我们先看看怎么设置外边框（我们给他设置50像素）

  1. margin: 50px;

看是不是有一个间隔了。嘿嘿

下面我们把背景裁切，只覆盖到内容区，不包括padding，方便演示一下内边框

  1. background-clip: content-box;

我们给padding一个20像素

  1. padding: 20px;

效果图如下：

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

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

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

我们直接用box-sizing:就可以还原到w3c默认标准盒子了

  1. box-sizing: content-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