CSS语法基础

13 iug^

于 2024-09-29 18:16:50 发布

阅读量43

点赞数

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/2401_87197766/article/details/142639042

版权

一、基本选择器

1、标签选择器：用标签名作为选择器，为对应·标签名的元素设置样式

<head>
   
    <style>
        /* 标签选择器 */
        h1{
            color: brown;
        }
    </style>
</head>
<body>
    <h1 class="book">《昆虫记》</h1>
</body>

2、类选择器：用class名作为选择器，为指定class名的元素设置样式

<head>
   
    <style>
        /* 类选择器 */
        .book_name{
            color: brown;
        }
    </style>
</head>
<body>
    <h1 class="book_name">《昆虫记》</h1>
</body>

3、id选择器：用id名作为选择器，为指定id名的元素设置样式（注意：id名是唯一的）

<head>
   
    <style>
        /* id选择器 */
        #zhuzuo1{
            color: brown;
        }
    </style>
</head>
<body>
    <h1 class="book_name" id="zhuzuo1">《昆虫记》</h1>
    <h1 class="book_name" id="zhuzuo2">《一千零一夜》</h1>

</body>

二、样式的优先级

行内样式>id选择器样式>类选择器样式>标签选择器样式（无需遵循“后来居上“原则)

三、选择器的复合

1、交集选择器：两个选择器直连：第一个必须是标签选择器，第二个必须是类选择器或者id选择器，且选择器之间不能有空格。

<head>
   
    <style>
        /* 交集选择器 */
        h1.book_name{color: green;}
        #zhuzuo2{color: brown;}
    </style>
</head>

2、并集选择器：多个选择器写在一起（用逗号隔开），使用同样的样式声明

<head>
   
    <style>
        /* 并集选择器 */
        h1.book_name, #zhuzuo2{
            color: brown;
        }
    </style>
</head>

3、关系选择器

（1）后代选择器（可跨代）：选择所有被E元素包含的F元素，中间用空格隔开

（2）子代选择器（不可跨代）：选择所有作为E元素的直接子元素F，对更深一层的元素不起作用，用>隔开

（3）相邻兄弟选择器：选择紧跟E元素后的F元素，用+隔开，选择相邻的第一个兄弟元素，只能向下选择

（4）通用兄弟选择器：选择E元素之后的所有兄弟元素F，作用于多个元素，用~隔开，只能向下选择

代码如下：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 后代选择器 */
        nav ul li {
            color: red;
        }
        /* 子代选择器 */
        article>p{
            color: green;
        }
        /* 相邻兄弟选择器 */
        h4+p{color: orange;}

        /* 通用兄弟选择器 */
        h1~p{font-size: 40px;}

        
    </style>
    
</head>
<body>
    <header>
        <h1>广东*****学院</h1>
        <p>欢迎来到计算机学院</p>
    </header>
    <hr>
    <nav>
        <ul>
            <li>首页</li>
            <li>关于我们</li>
            <li>学生风采</li>
            <li>联系方式</li>
        </ul>
    </nav>
    
    <hr>
    <main>
        <section>
            <article>
                <h2>最新文章</h2>
                <h3>文章标题</h3>
                <p>这里是文章的内容简介<br>可以使用<br>标签进行换行</p>
                <img src="图片路径" alt="图片显示失败" width="100" height="100">
            </article>

            <aside>
                <h4>侧边栏</h4>
                <p>侧边栏内容，如加快链接，广告等</p>
            </aside>
            
</body>

运行结果如下：