HTML+CSS选择器实战：从基本到案例应用@慕课网原创_慕课网

CSS的选择器基础概念

CSS选择器是用于定位HTML元素，以应用特定样式的语法。通过选择器，开发者能够精准地定义元素的外观和行为，增强了网站的灵活性、交互性和视觉吸引力。选择器的重要性在于它允许开发者对页面的结构进行细致的控制，确保网页能适应各种设备和使用情况。

基本选择器类型

ID选择器

ID选择器用来选择具有特定id属性的单个元素。其格式为#后跟ID名称。

#example {
    color: red;
}

类选择器

类选择器用于选择具有特定类属性的元素，其格式为.后跟类名。

.red {
    color: blue;
}

元素选择器

元素选择器直接选择HTML元素，例如div、p等。

div {
    background-color: yellow;
}

通用选择器

通用选择器用于选择所有某类型元素，其格式为*。

* {
    margin: 0;
    padding: 0;
}

组合选择器

相邻兄弟选择器

选择紧接在另一个元素后面的元素。

h1 + p {
    font-size: 16px;
}

通用兄弟选择器

选择一个元素之后的所有同级元素。

h1 ~ p {
    color: green;
}

后代选择器

选择当前元素的某个元素或该元素的子孙元素。

div p {
    text-align: center;
}

伪类与伪元素

伪类

伪类用于操作元素在不同状态下的样式，例如：链接的访问状态、焦点状态等。

a:link {
    color: blue;
}
a:visited {
    color: purple;
}

伪元素

伪元素用于在元素的内容之前或之后插入内容，比如为段落添加前缀或后缀。

p::before {
    content: "【前缀】";
}

属性选择器

属性选择器允许选择具有特定属性或属性值的元素。

input[type="text"] {
    border: 1px solid black;
}

实践案例

HTML结构

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section>
            <h2>Welcome</h2>
            <p>This is a welcome message.</p>
        </section>
        <aside>
            <p>Additional information.</p>
        </aside>
    </main>
    <footer>
        <p>&copy; 2023 Example</p>
    </footer>
</body>
</html>

CSS样式

/* 通用样式 */
body, html {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

/* 导航栏样式 */
nav ul {
    list-style: none;
    padding: 0;
}

nav ul li a {
    display: inline-block;
    padding: 10px;
    color: #333;
    text-decoration: none;
}

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

/* 主体部分样式 */
header, footer {
    background-color: #f9f9f9;
    padding: 20px;
    text-align: center;
}

main {
    margin: 20px;
}

section, aside {
    margin-bottom: 20px;
}

section h2 {
    color: #333;
}

section p, aside p {
    color: #666;
}

footer p {
    margin: 0;
}

在这个例子中，我们使用了基本的选择器、组合选择器以及伪类来创建一个具有层次结构的网页布局，并为不同的元素应用了不同的样式。通过CSS选择器，我们可以轻松地管理和控制网页的视觉效果，使网页更加专业和吸引人。