CSS伪类.伪元素，块元素和行内块元素自己总结知识

最新推荐文章于 2023-06-30 15:46:34 发布

@山海*

最新推荐文章于 2023-06-30 15:46:34 发布

阅读量2.3k

点赞数 3

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/weixin_47612165/article/details/110388046

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

什么是伪类，伪元素？

CSS伪类
什么叫伪类呢？

伪类是基于元素的特征而不是他们的id、class、属性或者内容。一般来说，元素的特征是不可以从DOM树上推断得到的，而且其是动态的，当用户和DOM进行交互的时候，元素可以获得或者失去一个伪类。（这里有一个例外，就是:first-child和:lang是可以从DOM树中推断出来的。）

CSS的现有标准中，伪类包括：

:first-child 应用第一个子元素
:link 应用未访问过的链接
:visited 应用已访问过的链接
:hover 应用鼠标指针悬浮的元素
:active 应用活动的链接
:focus 应用聚焦的输入元素
:lang 伪类将应用于元素带有指定lang的情况，不常用

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul li:first-child{
            color:blue;
        }
    </style>
</head>
<body>
    <ul>
        <li><p>我是老大</p></li>
        <li><p>我是老二</p></li>
        <li><p>我是老三</p></li>
        <li><p>我是老四</p></li>
        <li><p>我是老五</p></li>
    </ul>
</body>
</html>

CSS伪元素
什么是伪元素呢？

伪元素是创造文档树之外的对象。例如文档不能提供访问元素内容第一字或者第一行的机制。伪元素还提供一些在源文档中不存在的内容分配样式，例如:before和:after能够访问产生的内容。伪元素的内容实际上和普通DOM元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。

CSS的现有标准中，伪元素包括：

: 在这里插入图片描述

<style>
        ul li:first-letter{
            color:blue;
        }
    </style>
</head>
<body>
    <ul>
        <li><p>我是老大</p></li>
        <li><p>我是老二</p></li>
        <li><p>我是老三</p></li>
        <li><p>我是老四</p></li>
        <li><p>我是老五</p></li>
    </ul>

first-letter 伪元素的样式将应用于元素文本的第一个字（母）
:first-line 伪元素的样式将应用于元素文本的第一行
:before 在元素内容的最前面添加新内容
:after 在元素内容的最后面添加新内容

两者之间区别

首先说一下伪类和伪元素的相同之处，

`伪类和伪元素都不出现在源文件和文档树中。也就是说在html源文件中是看不到伪类和伪元素的`。

他们的不同之处，

伪类其实就是基于普通DOM元素而产生的不同状态，他是DOM元素的某一特征。伪元素能够创建在DOM树中不存在的抽象对象，而且这些抽象对象是能够访问到的。

块元素，行内元素行内块元素转变

块主要有：div，p、ul、li、ol、dl、dt、dd、nav等。

特点：(1)比较霸道，自己独占一行(2)高度,宽度、外边距以及内边距都可以控制。(3)宽度默认是容器(父级宽度)的100%(4)是一个容器及盒子,里面可以放行内或者块级元素。

*行内元素
常见的行内元素有a strong b em S ins u span等，其中标签最典型的行内元素。有的地方也成内联元素

特征：(1)设置宽高无效 (2)对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效 (3)不会自动进行换行

行内块元素
行内块状元素主要有img input 等

行内块状元素特征：(1)不自动换行 (2)能够识别宽高

*Display转换

元素之间的转换

(1)display:inline;转换为行内元素
(2)display:block;转换为块状元素
(3)display:inline-block;转换为行内块状元素

margin-top塌陷问题的现象与解决

塌陷问题
当两个盒子在垂直方向上设置margin值时，会出现一个有趣的塌陷现象。

①垂直并列
首先设置两个DIV,并为其制定宽高
**
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            width: 100px;
            height: 100px;
            background:red;
        }
        .box2{
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
</head>
<body>
    <div class="box1">box1</div>
    <div class="box2">box2</div>
</body>
</html>

对此我们对box1其设置margin-bottom:50px;
对box2我们其设置margin-top:40px;
在这里插入图片描述
盒子之间的距离仅是50px，也就是说两盒子之间的margin出现了重叠部分，故而我们可以得出：垂直之间塌陷的原则是以两盒子最大的外边距为准。
解决方法：
（1）为父盒子设置border，为外层添加border后父子盒子就不是真正意义上的贴合（可以设置成透明：border：1px solid transparent）。
（2）为父盒子添加overflow：hidden；
（3）为父盒子设定padding值；
（4）为父盒子添加position：fixed；
（5）为父盒子添加 display：table；
（6）利用伪元素给子元素的前面添加一个空元素
**

扩展知识

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .chooses {
          counter-reset: letters;
        }
        .chooses input:checked {
          counter-increment: letters;
        }
     
        .choose span::after {
          content: counter(letters);
        }
      </style>
    
</head>
<body>
    <div class="chooses">
        <input type="checkbox">a
        <input type="checkbox">b
        <input type="checkbox">c
        <input type="checkbox">d
        <input type="checkbox">e
        <input type="checkbox">f
        <input type="checkbox">g
        <input type="checkbox">h
        <input type="checkbox">i
        <input type="checkbox">j
      </div>
      <p class="choose">我选择了<span></span>个字母</p>
    
</body>
</html>

在这里插入图片描述

@山海*

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
3
评论
CSS伪类.伪元素，块元素和行内块元素自己总结知识

**什么是伪类，伪元素？**CSS伪类什么叫伪类呢？伪类是基于元素的特征而不是他们的id、class、属性或者内容。一般来说，元素的特征是不可以从DOM树上推断得到的，而且其是动态的，当用户和DOM进行交互的时候，元素可以获得或者失去一个伪类。（这里有一个例外，就是:first-child和:lang是可以从DOM树中推断出来的。）CSS的现有标准中，伪类包括：:first-child 应用第一个子元素:link 应用未访问过的链接:visited 应用已访问过的链接:hover 应用鼠
复制链接

扫一扫