CSS选择器入门教程：从基础到实践@慕课网原创_慕课网

概述

CSS选择器是CSS的核心部分，通过它们可以精确控制HTML或XML文档中元素的样式。本文详细介绍了基础选择器、子代选择器、后代选择器、伪类选择器、伪元素选择器、组合选择器和属性选择器等多种类型的CSS选择器，并通过示例展示了它们的实际应用。

CSS选择器简介

CSS（层叠样式表）是一种用来描述HTML或XML文档样式的语言。选择器是CSS的核心部分，它定义了哪些元素会被CSS规则所影响。通过使用CSS选择器，你可以精确地控制页面上元素的样式，从而使网站看起来更加美观、一致和易于维护。

CSS选择器可以分为以下几类：

基础选择器：包括标签选择器、类选择器和ID选择器等，是最基本的选择器类型。
子代选择器和后代选择器：这些选择器用于选择特定元素的子元素或后代元素。
伪类选择器与伪元素选择器：这些选择器可以指定元素在特定状态下的样式，如:hover、:active等。
组合选择器与属性选择器：这些选择器用于组合多个选择器或基于元素的属性选择元素。

基础选择器：标签选择器、类选择器、ID选择器

标签选择器

标签选择器是最基础的选择器之一，它通过指定元素的标签名来选择元素。例如，p 选择器将匹配所有的 <p> 元素。

p {
    color: blue;
}

类选择器

类选择器通过指定元素的类名来选择元素。类名通常以点（.）开头。例如，.example 选择器将匹配所有具有 example 类名的元素。

<div class="example">这是一个示例。</div>

.example {
    color: green;
}

ID选择器

ID选择器通过指定元素的ID来选择元素。ID通常以井号（#）开头。例如，#uniqueId 选择器将匹配具有 uniqueId ID的元素。

<div id="uniqueId">这是一个唯一的示例。</div>

#uniqueId {
    color: red;
}

子代选择器和后代选择器

子代选择器

子代选择器用于选择特定元素的直接子元素。它使用一个空格来表示层级关系。例如，div > p 选择器将匹配所有直接位于 <div> 元素之内的 <p> 元素。

<div>
    <p>这是直接子元素。</p>
    <div>
        <p>这不是直接子元素。</p>
    </div>
</div>

div > p {
    color: blue;
}

后代选择器

后代选择器用于选择特定元素的后代元素，不论后代元素与父元素之间有多少层级关系。例如，div p 选择器将匹配所有位于 <div> 元素之内的 <p> 元素，不论它们是否是直接子元素。

<div>
    <p>这是直接子元素。</p>
    <div>
        <p>这是后代元素。</p>
    </div>
</div>

div p {
    color: green;
}

伪类选择器与伪元素选择器

伪类选择器

伪类选择器用于指定元素在特定状态下的样式。常见的伪类选择器包括 :hover、:active 和 :visited。

<a href="https://www.imooc.com" class="link">慕课网</a>

.link:hover {
    color: blue;
}

.link:active {
    color: red;
}

a:visited {
    color: gray;
}

伪元素选择器

伪元素选择器用于指定元素的某些部分的样式。常见的伪元素包括 ::before 和 ::after。

<p id="example">这是一个示例。</p>

#example::before {
    content: "前缀：";
}

#example::after {
    content: "后缀。";
}

属性选择器与组合选择器

属性选择器与组合选择器示例

属性选择器示例

<a href="https://www.example.com" class="example">示例链接</a>

a[href^="https"] {
    color: blue;
}

a.example {
    font-weight: bold;
}

组合选择器示例

<div class="container">
    <div class="item">第一项</div>
    <div class="item">第二项</div>
</div>

div.container .item {
    background-color: lightgray;
}

div > .item {
    margin: 10px;
}

实际应用示例：使用CSS选择器实现布局

为了展示如何使用CSS选择器实现布局，我们将创建一个简单的网页布局，包括顶栏、侧栏和主内容区域的布局。

HTML结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单布局示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>顶栏</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#home">首页</a></li>
            <li><a href="#about">关于我们</a></li>
            <li><a href="#contact">联系我们</a></li>
        </ul>
    </nav>
    <main>
        <section>
            <h2>主内容</h2>
            <p>这里是主内容区域。</p>
        </section>
        <aside>
            <h3>侧栏</h3>
            <p>这里是侧栏内容。</p>
        </aside>
    </main>
    <footer>
        <p>版权所有 © 2023</p>
    </footer>
</body>
</html>

CSS样式

/* 基础样式 */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

/* 布局样式 */
header, nav, main, footer {
    padding: 20px;
    margin: 10px;
}

header {
    background-color: #333;
    color: white;
}

nav {
    background-color: #f4f4f4;
}

main {
    display: flex;
    flex-wrap: wrap;
}

section {
    flex: 2;
    padding-right: 20px;
}

aside {
    flex: 1;
    background-color: #f9f9f9;
}

footer {
    background-color: #333;
    color: white;
    text-align: center;
}

综合应用案例

在更复杂的布局中，我们可以结合使用CSS选择器、Flexbox和Grid布局来实现更复杂的页面布局。下面是一个更为复杂的布局案例，其中包括固定顶部导航栏、可滚动内容区域、侧边栏和固定底部导航栏。

HTML结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复杂布局示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>固定顶栏</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#home">首页</a></li>
            <li><a href="#about">关于我们</a></li>
            <li><a href="#contact">联系我们</a></li>
        </ul>
    </nav>
    <main>
        <section>
            <h2>可滚动内容区域</h2>
            <p>这里是大量的内容区域。</p>
            <p>...</p>
            <p>...</p>
            <p>...</p>
        </section>
        <aside>
            <h3>侧栏</h3>
            <p>这里是侧栏内容。</p>
        </aside>
    </main>
    <footer>
        <p>固定底部导航栏</p>
    </footer>
</body>
</html>

CSS样式

/* 基础样式 */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* 固定顶栏和底部导航栏 */
header, footer {
    background-color: #333;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}

footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 100;
}

/* 内容区域 */
main {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
}

section {
    flex: 2;
    padding-right: 20px;
    overflow-y: auto;
}

aside {
    flex: 1;
    background-color: #f9f9f9;
}

/* 鸠占巢 */
nav ul {
    list-style-type: none;
    padding: 0;
    display: flex;
    justify-content: space-around;
}

nav ul li a {
    text-decoration: none;
    color: white;
    padding: 10px;
    background-color: #555;
    border-radius: 5px;
}

nav ul li a:hover {
    background-color: #777;
}

总结

通过本文的学习，你可以了解到CSS选择器的多种类型和用法。从基础选择器到复杂的组合选择器，通过合适的CSS选择器，你可以实现各种页面布局和样式控制。希望这些示例代码能够帮助你更好地理解和应用CSS选择器，使你的网页设计更加专业和美观。