想学css吗？（css选择器）

gauss prime

于 2024-10-08 22:11:41 发布

阅读量378

点赞数 6

文章标签： css 前端

本文链接：https://blog.csdn.net/2301_81146427/article/details/142770080

版权

前言

CSS选择器用于匹配HTML中的元素，并为其添加样式。掌握各种选择器能让你更灵活地控制网页设计。

1.基础选择器

元素选择器：通过元素名称选择 HTML 元素。

如下代码，p 选择器将选择所有 <p> 元素：

p {
  color: blue;
}

类选择器：通过类别名称选择具有特定类别的 HTML 元素。

类选择器以 . 开头，后面跟着类别名称。

如下代码，.abc 选择器将选择所有具有类别为 “abc” 的元素。

.abc {
  background-color: yellow;
}

ID 选择器（ID Selector）：通过元素的唯一标识符（ID）选择 HTML 元素。

ID 选择器以 # 开头，后面跟着 ID 名称。

如下代码，#gauss 选择器将选择具有 ID 为 “gauss” 的元素。

#gauss {
  width: 200px;
}

2.组合选择器

后代选择器：通过指定元素的后代关系选择 HTML 元素。

后代选择器使用空格分隔元素名称。

如下代码，div p 选择器将选择所有在 <div> 元素内的 <p> 元素。

div p {
  font-weight: bold;
}

子元素选择器：与后代选择器相比，子元素选择器只能选择作为某元素直接/一级子元素的元素。

如下代码，选择了<div>元素中所有直接子元素 <p> ：

div>p
{
  background-color:yellow;
}

相邻兄弟选择器：相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素。

如下代码，选取了所有位于 <div> 元素后的第一个 <p> 元素:

div+p
{
  background-color:yellow;
}

通用兄弟选择器：使用 "~" 符号来选择一个元素之后的所有兄弟元素

如下代码，选取了所有位于 <div> 元素后的所有 <p> 元素:

div~p
{
  background-color:yellow;
}

3.选择器复合练习

运用各类选择器实现下面网页：

代码如下：

<!DOCTYPE html>  
<html lang="zh">  
 
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>选择器练习</title>  
    <style>
       header nav ul li a{
        color: red;
       } 
       article>h3{
        color: green;
       }
       h3+p{
        color: yellow;
       }
        h1~p{
        font-size: 50px;
       }
    </style>
 
</head>  
 
<body>  
  
    <header>  
        <h1 align="center">广东云浮中医药职业学院</h1>  
        <p align="center">欢迎来到: <ins>计算机学院</ins></p>  
        <hr>  
        <nav>  
            <ul type="none">  
                <li><a href="#">首页</a></li>  
                <li><a href="#">关于我们</a></li>  
                <li><a href="#">学生风采</a></li>  
                <li><a href="#">联系方式</a></li>  
            </ul>  
        </nav>  
    </header>  
    <hr>    
    <main>  
        <section>  
            <h2>最新文章</h2>  
            <article>  
                <h3>文章标题</h3>  
                <p>这里是文章的内容简介。<br>可以使用<br>标签进行换行。</p>  
                <br><br><br> 
                <p>想了解广东云浮中医药职业学院：<a href="https://gdyfvccm.edu.cn/">点击这里</a></p>  
            </article>  
 
            <br>
            <aside>  
                <h3>侧边栏</h3>  
                <p>侧边栏内容，如快速链接、广告等。</p>  
                <table border="1">  
                    <tr>  
                        <th>专业</th>  
                        <th>链接</th>  
                    </tr>  
                    <tr>  
                        <td>计算机应用技术</td>  
                        <td><a href="专业A详情页.html">专业A详情</a></td>  
                    </tr>  
                    <tr>  
                        <td>数字媒体技术</td>  
                        <td><a href="专业B详情页.html">专业B详情</a></td>  
                    </tr>  
                </table>  
            </aside>  
        </section>  
    
        <section>  
            <h4>联系我们</h4>  
            <form>  
                姓名:
                <input type="text" id="name" name="name"><br>  
                邮箱:
                <input type="email" id="email" name="email"><br>  
                <input type="submit" value="提交">  
            </form>  
        </section>  
    </main>  
    <hr>   
    <footer>  
        <p>版权所有 &copy; 2024 广东云浮中医药职业学院计算机学院</p>  
    </footer>  
  
</body>  
 
 
</html>