CSS基础：CSS基本常识及CSS选择器

Asuka805
117 阅读8分钟

引言

在网页设计中，CSS（层叠样式表）扮演着至关重要的角色。本文将深入探讨CSS的基础知识和工作原理。

什么是CSS？

CSS，全称Cascading Style Sheets，即层叠样式表，是一种用来描述HTML或XML文档表现形式的语言。通过CSS，开发者可以控制网页上元素的颜色、字体、间距等外观属性，而无需直接修改内容本身。一个简单的CSS规则如下所示：

h1 {
    color: red;
    text-align: center;
}

这里，h1是选择器，用于指定要应用样式的HTML元素；花括号内则是声明块，包含了一个或多个由属性及其值组成的声明，如color: red;定义了文本颜色为红色，text-align: center;则使文本居中显示。

CSS的命名与作用

CSS之所以被称为“层叠样式表”，是因为它允许不同来源的样式信息以一种可预测的方式进行组合。当多个样式规则同时适用于某个元素时，它们会按照一定的优先级顺序合并，最终形成该元素的实际显示效果。这种机制使得即使是在复杂的项目中也能保持样式的一致性和可维护性。

HTML DOM（文档对象模型）本身只提供了页面的基本结构，但没有提供任何关于如何展示这些信息的指导。这时就需要CSS介入，通过不同的方式选择DOM中的特定元素，并为其添加样式规则。CSS可以通过以下几种方式引入到HTML文档中：

  • 内联样式：直接在HTML标签内部使用style属性定义。
  • 外部样式表：创建单独的.css文件，并通过<link>标签链接到HTML文档。
  • 内部样式：在HTML文档的<head>部分使用<style>标签定义。

浏览器在渲染页面时，首先下载并解析所有相关的CSS文件，然后结合HTML文档构建渲染树，最后根据渲染树生成用户可见的界面。

CSS选择器及其优先级

正确理解和运用CSS选择器对于实现高效且易于管理的样式代码至关重要。CSS选择器主要分为几大类：

  • 基础选择器：

    • 标签选择器：直接匹配所有段落。
    • 类选择器：使用.前缀，例如.highlight可以应用于任何带有class="highlight"属性的元素。
    • ID选择器：使用#前缀，每个ID在一个文档中必须唯一，如#main。
    • 通配符选择器：用*表示，匹配所有元素，但在实践中应谨慎使用以避免性能问题。

  • 组合选择器：

    • 后代选择器：空格分隔的选择器序列，如.container p指定了.container内的p元素。
    • 子元素选择器：使用>连接两个选择器，仅匹配直接子元素，如.container > p。
    • 相邻兄弟选择器：使用+操作符，针对紧接在另一个元素之后的同级元素，如h1 + p。
    • 通用兄弟选择器：使用~操作符，匹配前面有给定元素的所有兄弟元素，不一定是紧跟其后的那个，如h1 ~ p。
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>选择器</title>
  <style>
    /* 相邻兄弟选择器 */
    h1 + p {
        color: red;
    }
    /* 通用兄弟选择器 */
    h1 ~ p {
        color: blue;
    }
    /* 子元素选择器 */
    .container > p {
        font-weight: bold;
    }
    .container p {
        text-decoration: underline;
    }

  </style>
</head>
<body>
  <div class="container">
    <h1>标题</h1>
    <p>这是第一段文字</p>
    <p>这是第二段文字</p>
    <a href="">链接</a>
    <span>这是一个span元素</span>
    <div class="inner">
      <p>这是一个内部的段落</p>
    </div>
  </div>
</body>
</html>

这段代码定义了一个简单的网页结构，并使用CSS选择器来改变某些元素的样式。我们分析一下页面中各个<p>标签将如何被渲染：

  1. 相邻兄弟选择器h1 + p:

    • 这个选择器会选择紧跟在<h1>后面的首个<p>元素。
    • 因此，在你的例子中，“这是第一段文字”这个<p>会被选中，其文本颜色会变为红色。

  2. 通用兄弟选择器h1 ~ p:

    • 该选择器匹配所有位于同一个父元素下、处于<h1>之后的所有<p>元素。
    • 在给定的例子中，它会影响“这是第一段文字”和“这是第二段文字”这两个<p>，使得它们的文本颜色变为蓝色。
    • 注意：由于CSS规则的级联性（后出现的规则覆盖先前的规则），虽然“这是第一段文字”首先通过h1 + p被设为红色，但紧接着的h1 ~ p规则将其颜色改为了蓝色。

  3. 子元素选择器.container > p:

    • 此选择器仅匹配直接作为.container子元素的<p>标签。
    • 对应于你的例子，这意味着“这是第一段文字”和“这是第二段文字”这两个<p>将会加粗显示。

  4. 后代选择器.container p:

    • 这个选择器匹配所有位于.container内的<p>元素，不论这些<p>是否是直接子元素。
    • 因此，“这是第一段文字”、“这是第二段文字”以及“这是一个内部的段落”这三个<p>都会被加上下划线。
    • 注意：“这是一个内部的段落”这个<p>位于.inner div内，但由于.inner是.container的一个子元素，所以该<p>也受.container p的影响。
  • 伪类与伪元素：
    • 伪类选择器如:hover、:active等，用于定义基于元素状态的变化样式。
    • 伪元素如::before、::after可以在现有元素前后插入内容。
<!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>
        /* 通过伪类选择不同的状态 */
        button:active {
            background-color: red;
            color: white;
        }
        p:hover {
            background-color: yellow;
            color: blue;
        }
        ::selection {
            background-color: blue;
            color: white;
        }
        input:focus {
            border: 5px solid red;
        }
        input:checked + label {
            color: blue;
        }
        li:nth-child(odd) {
            background-color: lightgray;
        }
        li:not(:last-child) {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>伪类选择器示例</h1>
        <button>点击我</button>
        <p>鼠标悬浮在这里</p>
        <input type="text" placeholder="输入框">
        <input type="checkbox" id="option1">
        <label for="option1">选项1</label>
        <input type="checkbox" id="option2" checked>
        <label for="option2">选项2</label>
        <ul>
          <li>列表项1</li>
          <li>列表项2</li>
          <li>列表项3</li>
          <li>列表项4</li>
        </ul>
      </div>
</body>
</html>

这段代码展示了一个包含多种CSS伪类选择器的页面。下面是对每个伪类选择器如何影响页面元素的具体说明：

  1. :active伪类:

    • button:active { background-color: red; color: white; }
    • 当用户点击（即按下）按钮时，按钮背景色变为红色，文字颜色变为白色。

  2. :hover伪类:

    • p:hover { background-color: yellow; color: blue; }
    • 当鼠标悬停在段落上时，段落的背景色变为黄色，文字颜色变为蓝色。

  3. ::selection伪元素:

    • ::selection { background-color: blue; color: white; }
    • 当用户选中文本时，被选中的文本背景色变为蓝色，文字颜色变为白色。

  4. :focus伪类:

    • input:focus { border: 5px solid red; }
    • 当输入框获得焦点（例如通过点击或使用Tab键导航到该输入框）时，输入框边框会变成5像素宽的实线红色边框。

  5. :checked伪类 + 相邻兄弟选择器:

    • input:checked + label { color: blue; }
    • 当复选框被选中时，紧跟其后的<label>标签的文字颜色将变为蓝色。在这个例子中，“选项2”因为默认是选中的状态，所以它的文字颜色为蓝色。

  6. :nth-child(odd)伪类:

    • li:nth-child(odd) { background-color: lightgray; }
    • 选取所有奇数位置的列表项，并将其背景色设置为浅灰色。因此，“列表项1”和“列表项3”的背景色将是浅灰色。

  7. :not(:last-child)伪类:

    • li:not(:last-child) { margin-bottom: 10px; }
    • 除了最后一个列表项外的所有列表项底部都有10像素的间距。这意味着“列表项1”、“列表项2”和“列表项3”都会有10像素的底部间距，而“列表项4”没有。
  • 属性选择器：允许基于属性的存在与否或者其值来选择元素，如[type="text"]。

在处理复杂的布局需求时，了解CSS选择器的优先级规则尤为重要。默认情况下，优先级从低到高依次为标签(1) < 类(10) < ID(100) < 行内样式(1000)，加上!important标志可以覆盖其他一切规则。此外，当选择器变得复杂时，计算总优先级需累加各部分数值。

如.container ul li:nth-child(odd)，类选择器、属性选择器和伪类数量:2（.container 和 :nth-child(odd)），提供20分，元素选择器和伪元素数量：2（ul 和 li），提供2分，所以它拥有22分优先级。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css</title>
    <style>
        /* 1分 */
        p {
            color: blue !important;
        }
        /* 11分 */
        .container p {
            color: red;
        }
        /* 101分 */
        #main p {
            color: green;
        }
    </style>
</head>body>
    <!-- attribute 属性 -->
    <div id="main" class="container">
        <p style="color:pink;">这是一段爱情故事</p>
    </div>
</body>
</html>

在这段代码中，虽然p标签选择器的优先级很低，但声明加上了!important,所以此时元素的颜色为蓝色。

结语

通过本文的探讨，我们深入的了解了css对网页设计的重要性。从简单的文本颜色到复杂的布局管理和响应设置，使用css都能灵活应对。让我们一起探索css的无限可能，共同创造出令人惊叹的Web项目把！！

avatar
文章
阅读
粉丝