前端基础内容（三）

最新推荐文章于 2024-07-10 10:14:49 发布

vinoMamba0908

最新推荐文章于 2024-07-10 10:14:49 发布

阅读量131

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/weixin_38091402/article/details/106248035

版权

CSS基础内容（一）

选择器餐桌练习http://flukeout.github.io/

1、常用选择器

1、元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* 
            将所有的段落设置成红色
                -元素选择器
                    根据标签名来选定元素
         */
         p {
    
             color: rebeccapurple;
         }
         h1 {
    
             color: red;
         }
    </style>
</head>
<body>
    <h1>人生无限公司</h1>
    <p>如果我们不曾相遇</p>
    <p>伤心的人别听慢歌</p>
    <p>夜访吸血鬼</p>
</body>
</html>

2、ID选择器

还是上面的代码，这里的需求是只希望设置最后一个段落为蓝色。

<style>
       /* 
         id选择器
         	根据元素的id选中一个元素
        	语法：#id
       */
      #p4 {
    color: blue;}
</style>
<p id="p4">夜访吸血鬼</p>

3、类选择器（class选择器）

与id不同的是，class可以重复使用

根据元素的class选中一组元素
可以同时为一个元素设置多个class属性

还是上面的代码，这里需求是设置最后两个段落的颜色为蓝色

<style>
       /* 
         class选择器
         	根据元素的class选中一组元素
        	语法：.class
       */
      .blue {
    color: blue;}
<

最低0.47元/天解锁文章

vinoMamba0908

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端基础内容（三）

CSS基础内容（一）1、常用选择器1、元素选择器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> /* 将所有的段落设置成红色 -元素选择器根
复制链接

扫一扫