后端程序员的CSS复习

块级元素和行内元素

在HTML和CSS中，元素可以分为块级元素和行内元素，它们的主要区别在于布局方式和默认行为。

块级元素（Block-level Elements）

块级元素是指那些在页面中以块的形式展现的元素。它们通常会从新的一行开始，并尽可能地占据其父容器的整个宽度。常见的块级元素包括：

<div>：通用的容器元素。
<p>：段落。
<h1> 到 <h6>：标题。
<ul>、<ol>：无序列表和有序列表。
<li>：列表项。
<form>：表单。
<header>、<footer>、<section>、<article>：语义化的HTML5块级元素。

行内元素（Inline Elements）

行内元素是指那些只占据其内容所需的宽度，不会打断文本的连续性，通常与其他行内元素在同一行显示的元素。常见的行内元素包括：

<span>：通用的内联容器。
<a>：锚点，用于创建超链接。
<img>：图片。
<strong>、<em>：用于强调文本。
<input>：输入框。
<label>：表单标签。
<code>：用于表示计算机代码。

主要区别

布局方式：
- 块级元素会占据一整行，并且会尽可能地拉伸以填满其父容器的宽度。
- 行内元素只占据其内容所需的宽度，并且可以与其他行内元素在同一行显示。
默认宽度：
- 块级元素的宽度默认是100%，即其父容器的整个宽度。
- 行内元素的宽度默认是其内容的宽度。
换行：
- 块级元素会在前后自动换行，使得每个块级元素独占一行。
- 行内元素不会在前后自动换行，而是与其他行内元素在同一行显示。

通过CSS，你可以改变元素的默认显示类型，使其表现出与默认类型不同的行为。例如，使用display: block;可以将一个行内元素设置为块级元素，反之亦然。

选择器

元素选择器

类选择器

.class {}

ID选择器

#ID

属性选择器

prop=value

比如：

css 复制代码

[href] {

}

又比如

css 复制代码

[href="http://www.baidu.com"] {

}

属性选择器的功能不止于此，对于属性的判断，可以类似简单的正则表达式一样灵活

$href\*="wii"$ {}：选择存在href属性，并且属性值包含wiki的所有元素
$href\^="wii"$ {}：选择存在href属性，并且属性值以wiki开头的所有元素
$href$="wii"$ {}：选择存在href属性，并且属性值以wiki结尾的所有元素
$href\~="wii"$ {}：与*=类似，但它只在意被空格分割的属性值，例如class="border dash"可以被 $href\*="border"$ 和 $href\~="border"$ 选中
$href\|="wii"$ {}：与*=类似，但它只在意被-分割的属性值，且只选中第一项

全局选择器

markdown 复制代码

* {

}

全局选择器会为页面中所有的元素添加边框，包括:和。全局选择器也可以跟其他选择器组合使用，比如我们之后要提到的用法：

css 复制代码

    body * {
    
    }

即选中body下所有的后代元素

选择器的组合使用

后代选择

以div span {}为例，前面的div指的是选择范围，后面的span指的是目标元素，一句话概括就是"选中所有
中的元素"

子选择

上面的是后代，但如果只想找所有的子元素，使用>

例如：

css 复制代码

    #grandpa > div {
    
    }

只会选择到id为grandpa下面的第二级的div元素

相邻兄弟选择

css 复制代码

    <span>哥哥</span>
    <span id="me">我</span>
    <span>弟弟</span>
    <span>弟弟</span>

想选择我的弟弟如何实现：

css 复制代码

    #me + span {
    
    }

如果想选择我的所有弟弟如何实现？这就需要通用选择器

通用选择器

css 复制代码

    <span>哥哥</span>
    <span id="me">我</span>
    <span>弟弟</span>
    <span>弟弟</span>

还是刚才的例子，使用如下的方式就可以实现：

css 复制代码

    #me ~ span {
    
    }

但如果想找哥哥怎么办？有没有找哥哥的选择器？很遗憾，目前没有，只能通过一些迂回的方式解决：

css 复制代码

    
    body > .elder {
    
    }
    
    <span class="elder">哥哥</span>
    <span class="elder">哥哥</span>
    <span id="me">我</span>
    <span>弟弟</span>
    <span>弟弟</span>

伪类选择器

伪类选中的是元素的状态或与外界的关系。简单来说就是选中了一种事件，比如，我想在光标悬停在链接上时才作用边框样式，这是一种事件，伪类选择器就是做这个事情的。

伪类选择器一般由常规选择器:伪类构成：