CSS学习笔记（二）

最新推荐文章于 2022-10-15 00:15:28 发布
最新推荐文章于 2022-10-15 00:15:28 发布
阅读量673 收藏
点赞数 7
分类专栏： CSS 文章标签： css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51573433/article/details/119684929
版权

CSS选择器

1. 通配选择器

在CSS中，一个星号（*）就是一个通配选择器，它可以匹配任意类型的HTML元素。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS通配选择器</title>
    <style>
        * {
            color: royalblue;
            font-size: 7px;
        }
    </style>
</head>
<body>
    <div>
        The first line.
        <div>
            The second line.
            <p>
                The third line.
                <span>
                     Happy!
                </span>
            </p>
        </div>
    </div>
</body>
</html>

效果如下：
在这里插入图片描述

2. 元素选择器 / 伪元素选择器

  1. 元素选择器

最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。
如果设置 HTML 的样式，选择器通常将是某个 HTML 元素。
比如 p、h1、a，甚至可以是 html 本身。

举个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS元素选择器</title>
    <style>
    	/* p 就是元素选择器  */
        p {
            color: royalblue;
            font-size: 7px;
        }
    </style>
</head>
<body>
    <div>
        The first line.
        <div>
            The second line.
            <p>
                The third line.
                <span>
                     Happy!
                </sp>
            </p>
        </div>
    </div>
</body>
</html>

效果如下：
在这里插入图片描述

  1. 伪元素选择器

CSS 伪元素用于设置元素指定部分的样式
例如，它可用于：

  • 设置元素的首字母、首行的样式
  • 在元素的内容之前或之后插入内容

常用CSS伪元素选择器：

选择器 例子 例子描述
::after p::after 在每个 <p>元素之后插入内容。
::before p::before 在每个 <p>元素之前插入内容。
::first-letter p::first-letter 选择每个 <p> 元素的首字母。
::first-line p::first-line 选择每个 <p> 元素的首行。
::selection p::selection 选择用户已选取的元素部分。(这里是 p 元素)

举个例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS伪元素选择器</title>
    <style>
        p::first-letter {
            font-size: 50px;
        }
    </style>
</head>
<body>
    <div>
        <p>The first paragraph.</p>
        <p>The second paragraph.</p>
        <p>The third paragraph.</p>
    </div>
</body>
</html>

效果如下：
在这里插入图片描述

3. 属性选择器 / 类选择器 / 伪类选择器

  1. 属性选择器

属性选择器可以根据元素的属性及属性值来选择元素。

举个例子：

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>CSS属性选择器</title>
    <style>
        /* 
            只有等号的时候，就是完全匹配title的值
            等号前有个星号*，就是部分匹配title的值，只要有点击出现即可
            等号前有个^，就会匹配以点击开始的title的值
            等号前有个$，就会匹配以点击结束的title的值
        */
        [title*="点击"] {
            color: green;
            border: 3px solid silver;
        }

        .button,
        input[type="submit"] {
            border: 0;
        }

        input[type="text"] {
            width: 80%;
            padding: 5px;
        }
    </style>
</head>
<body>
    <input type="text" />
    <input type="submit" value="Submit" />
    <button title="点击此处登陆">登陆    </button>
    <button>注册</button>
    <a title="点击跳转百度" href="http://baidu.com">百度</a>
</body>
</html>

效果如下：
在这里插入图片描述

  1. 类选择器

类选择器使用（ . ）(英文点号)进行标识，后面紧跟类名

举个例子：

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>CSS类选择器</title>
    <style>
        .lightgreen {
            color: lightgreen;
        }

        .lightgray {
            color: lightgray;
        }

        .lightblue {
            color: lightblue;
        }

        .bold {
            font-weight: 900;
        }

        /* 页面中任何同时存在lightgreen和bold的元素，作用于以下样式 */
        .lightgreen.bold {
            border: 3px solid lightcyan;
        }

        /* lightgreen底下的所有的bold */
        .lightgreen .bold {
            border: 3px solid lightseagreen;
        }
    </style>
</head>
<body>
    <!-- 指定多个类名的时候，中间用空格隔开 -->
    <p class="lightgreen bold">
        类选择器 class
    </p>
    <div class="lightgray bold">
        A Hello
    </div>
    <p class="lightblue">
        B Hello
    </p>
    <p class="lightgreen">
        <span class="bold">
            C Hello
        </span>
    </p>
</body>
</html>

效果如下：
在这里插入图片描述

  1. 伪类选择器

伪类用于定义元素的特殊状态。

常用的伪类选择器：

选择器 例子 例子描述
:hover a:hover 鼠标悬停在链接时样式。
:link a:link 未访问链接样式。
:visited a:visited 已访问链接样式。
:active button:active 按钮点击激活时样式。
:focus input:focus 输入框聚焦时样式

举个例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS伪类选择器</title>
    <style>
        /* 当鼠标光标聚焦于input时 */
        input:focus {
            outline: none;
            background: #aaa;
        }
    </style>
</head>
<body>
    <input type="text" />
    <button>点击</button>
</body>
</html>

效果如下：
在这里插入图片描述

4. 后代选择器 / 子元素选择器

  1. 后代选择器

后代选择器可以选择作为某元素后代的元素。
写法：外层标签写在前面，内层标签写在后面，中间用「空格」分隔。.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS后代选择器</title>
    <style>
        div {
            padding: 10px;
            background: rgba(255, 0, 0, 0.2);
        }

        .first .second {
            border: 2px solid lightcyan;
        }
        
        .first .second .third {
            border: 2px solid lightskyblue;
        }
    </style>
</head>
<body>
    <div class="first">
        a Hello
        <div class="second">
            b Hello
            <div class="third">
                c1 Hello
            </div>
            <div class="third">
                c2 Hello
            </div>
            <span class="second">
                SPAN
            </span>
        </div>
    </div>
</body>
</html>

效果如下：
在这里插入图片描述

  1. 子元素选择器

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。
写法：父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接

举个例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS子元素选择器</title>
    <style>
        div {
            padding: 10px;
            background: rgba(255, 0, 0, 0.2);
        }

        .first > .second {
            border: 2px solid lightcyan;
        }
        
        .first .second .third {
            border: 2px solid lightskyblue;
        }
    </style>
</head>
<body>
    <div class="first">
        a Hello
        <div class="second">
            b Hello
            <div class="third">
                c1 Hello
            </div>
            <div class="third">
                c2 Hello
            </div>
            <span class="second">
                SPAN
            </span>
        </div>
    </div>
</body>
</html>

效果如下：
在这里插入图片描述

5. 相邻选择器 / 通用相邻选择器

  1. 相邻选择器

选择所选元素同层级的下一个元素。

举个例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS相邻选择器</title>
    <style>
        div {
            min-height: 50px;
            background: rgba(0, 0, 0, 0.1);
            margin: 10px;
        }

        /* 
            相邻选择器 +
            选中a类的下一个div
        */
        .a + div {
            background: rgba(255, 0, 0, 0.3);
        }
    </style>
</head>
<body>

    <div class="a">
        a Hello
        <div>
            a1 Hello
        </div>
    </div>

    <div class="b">
        b Hello
    </div>

    <div class="c">
        c Hello
    </div>

    <div>
        d Hello
    </div>
</body>
</html>

效果如下：
在这里插入图片描述

  1. 通用相邻选择器

选择所选元素同层级的下面所有元素。

举个例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS通用相邻选择器</title>
    <style>
        div {
            min-height: 50px;
            background: rgba(0, 0, 0, 0.1);
            margin: 10px;
        }

        /*
            通用相邻选择器 ~
            选中b类接下来所有的div
        */
        .b ~ div {
            background: rgba(0, 255, 0, 0.3);
        }
    </style>
</head>
<body>

    <div class="a">
        a Hello
        <div>
            a1 Hello
        </div>
    </div>

    <div class="b">
        b Hello
    </div>

    <div class="c">
        c Hello
    </div>

    <div>
        d Hello
    </div>
</body>
</html>

效果如下：
在这里插入图片描述

6. ID 选择器


id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id 选择器以 “#” 来定义。

举个例子：

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>CSSID选择器</title>
    <style>
        #logo {
            color: cyan;
        }
        
        .lightgray {
            color: lightgray;
        }
    </style>
</head>
<body>
    <p id="logo">
        ID选择器 id
    </p>
    <div class="lightgray">
        A Hello
    </div>
    <p>
        <span id="logo">
            C Hello
        </span>
    </p>
    <p id="logo">
        LOGO
    </p>
</body>
</html>

效果如下：
在这里插入图片描述
CSS学习笔记（三）

CSPsy
关注
  • 7
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Qt5.14.2 VS2019创建Qt项目并使用QSS美化界面(附QSS资源下载)
超级大洋葱的博客
10-19 9184
文章目录1.下载并安装 Qt5.14.2&VS20192.使用vs2019创建空白Qt项目2.1 打开vs20192.2 创建新项目2.3 创建完成，运行3.使用QSS进行界面美化 1.下载并安装 Qt5.14.2&VS2019 第一步： Qt5.14.2安装 参考： Qt 5.14.2安装教程 第二步： VS2019安装 我们在这里选择社区版： https://visualstudio.microsoft.com/zh-hans/vs/ 下载软件 安装配置 Qt Options配置
CSS学习之路
梦星辰的博客
02-14 254
什么是 CSS 不使用css 不使用css 给每一个单元格加上背景颜色 就需要给每一个td元素加上bgcolor属性 <table border="1"> <tr > <td bgcolor="gray" >1</td> <td bgcolor="gray">2</td> </tr> <tr> <td bgcolor="gray">3&...
PySide2+Python：SetStyleSheet 读取并加载 .css 或者 .qss 样式文件
J_____Q的博客
10-27 1711
没有添加样式之前： 添加了样式之后： 代码实现： 在 _ _ init _ _ 文件中，读取 .css 或者 .qss 样式文件并加载样式 # 1、提供 .css 或者 .qss 样式文件路径 style_file = "./lightblue/lightblue.css" # 2、读取样式文件内容 with open(style_file, "r", encoding="UTF-8") as file: style_sheet = file.read() # 3、加载
CSS3常见样式声明
Miss Z的博客
08-02 245
CSS3常见样式声明
CSS 学习笔记
09-25
首先要明白id和class的各自的优缺点。这样才能根据他们的各自的特点进行使用。
css学习笔记
12-20
本人自己学习CSS过程中亲自总结的思维导图，结构清晰，重点突出，便于记牢
css经典学习笔记.zip
11-01
css经典学习笔记
HTML+CSS学习笔记.zip
最新发布
01-01
HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 ...
JS/CSS 实现鼠标移动更改列表奇偶行背景色
m0_46181452的博客
08-06 2819
分别使用JS/CSS 实现鼠标移动到一个列表时， 奇数行显示一种背景色，偶数行显示另一种背景色。鼠标移出时，背景色复原；
写颜色的时候用#RGB 不要用lightblue这种
u012737225的专栏
01-28 1195
因为兼容性！
css自定义属性和聚光灯效果
weixin_33953384的博客
03-01 177
出场曲 神秘巨星来了吗？快，打追光，快，快给她镜头。 ------《神秘巨星》 神秘巨星是谁？它就是CSS Variables。 简介 CSS Variables，一个并不是那么新的东西，但对css来说绝对是一场革命。 之前使用变量的时候，需要借助sass、less等预处理工具来实现，现在我们可以直接使用css来声明变量。 兼容性 老规矩，先来看下兼容性 兼容性一片绿，红的那不是还有两个吗...
【CSS基础语法】CSS基础语法知识学习笔记汇总
兮于怀
06-24 398
html类似于一个毛坯房骨架，css类似于给毛坯房进行装饰代码文件整理： static文件夹一般用来存放各种资源，比如图片、音频视频、css文件 index.html为骨架css全称为层叠样式表，作用：修饰html标签html与css： 在html标签中，最基础的就是div和span标签，其他绝大部分标签都是从这两个标签上扩展出来的，扩展的时候其实就是在div和span标签的基础上加了一些css样式 即有很多标签是在基础标签的基础之上加了一些css样式得到的，只不过这些样式很常用就把他们单独拿出来作为单独的
CSS3 多列【column-count :3 分3列；column-gap:40px 列间距； column-rule: 1px solid lightblue;指定列边框样式】
云上
07-21 864
CSS3 多列 CSS3 可以将文本内容设计成像报纸一样的多列布局，如下实例: 菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程(www.runoob.com)提供了最全的编程技术基础教程, 介绍了HTML、CSS、Javascript、Python，Java，Ruby，C，PHP , MySQL等各种编程语言的基础知识。 同时本站中也提供了大量的在线实例，通过实例，您可以更好的学习编
CSS学习之线性渐变linear-gradient和径向渐变radial-gradient
weixin_48240002的博客
10-15 789
css 渐变色生成背景图片
W3school：CSS基础：CSS注释、颜色（颜色、RGB、HEX、HSL）、背景（背景、背景图像、背景重复、背景附着、简写背景属性）
薇眠winter的博客
08-03 1076
W3school：CSS基础：CSS注释、颜色（颜色、RGB、HEX、HSL）、背景（背景、背景图像、背景重复、背景附着、简写背景属性）
CSS 颜色代码大全 CSS颜色对照表
热门推荐
hnyanzijun1的博客
07-20 4万+
HTML及CSS常用颜色英文词汇 黑色 银色 灰色 白色 茶色 红色 紫色 紫红 black silver gray white maroon red purple fuchsia #000000 #C0C0C0
前端CSS颜色代码大全
你只管努力，
10-16 4万+
CSS颜色代码大全         FFFFFF #DDDDDD #AAAAAA #888888 #666666 #444444 #000000 #FFB7DD #FF88C2 #FF44AA  #FF0088  #C10066  #A20055  #8C0044 
html5&css3学习笔记下载
09-21
HTML5（HyperText Markup Language 5）是一种用于构建和呈现网页内容的标准的最新版本。... ...其中一些突出的特点包括： ... ...它不仅可以用于构建传统的网页和博客，还可以用于开发移动应用、游戏、视频播放器等。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值