常用选择器

comegoing-归去兮来

已于 2022-07-31 09:10:44 修改

阅读量170

点赞数

分类专栏：前端css基础文章标签： css 前端 html

于 2022-07-11 17:09:52 首次发布

本文链接：https://blog.csdn.net/comegoing_xin_lv/article/details/125725234

版权

前端css基础专栏收录该内容

27 篇文章 3 订阅

订阅专栏

注意：以下所有css样式均基于内联样式表格式

一、标签选择

1、基本格式

在style标签中，创建标签选择器，基本格式为“标签+大括号”

2、例子

h1{color: red;}

（*表示选中所有标签元素）

*{color: blue;font-size: 60px;}

二、唯一属性id选择

1、id解释

id是每个标签的唯一属性，不能重复，且为单一定义（因为JavaScript可能需要使用），且命名以字母开头

2、基本格式

在style标签中，创建id选择器，基本格式为“#+id名+{}”

3、例子

<h1 id="title">回乡偶书</h1>

#title{color: black;font-size: 60px;}

三、类选择（class）

1、类相关知识

（1）类是标签属性，用以解决单一id只能表示一个标签的问题

（2）类可以重复，且可以多定义

2、基本格式

（1）在style标签中，创建类选择器，基本格式为“.+类名+大括号”

（2）class类名能相同，多类名用空格分隔

3、例子

<p class="before pra">少小离家老大回</p>

<p class="after">儿童相见不相识</p>
<p class="after">笑问客从何处来</p>

.pra{
    color: black;
    font-size: 20px;
}
.before{
    olor: green;
    font-size: 40px;
}
.after{
    color: yellow;
    font-size: 40px;
}

四、代码

该例用作参考，可运行，但存在样式冲突的情况，请适当加注释符（选择器优先级在后面的内容介绍）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>常用选择器</title>
        <style>
            *{
                color: blue;
                font-size: 60px;
            }
            h1{
                color: red;
            }
            #title{
                color: black;
                font-size: 60px;
            }
            #author{
                color: red;
                font-size: 20px;
            }
            .pra{
                color: black;
                font-size: 20px;
            }
            .before{
                color: green;
                font-size: 40px;
            }
            .after{
                color: yellow;
                font-size: 40px;
            }
        </style>
    </head>
    <body>
        <h1 id="title">回乡偶书</h1>
        <h2 id="author">贺知章</h2>
        <p class="before pra">少小离家老大回</p>
        <p class="before pra">乡音无改鬓毛衰</p>
        <p class="after">儿童相见不相识</p>
        <p class="after">笑问客从何处来</p>
    </body>
</html>