【重识 HTML + CSS(1)，kafka入门到精通文档

最新推荐文章于 2024-09-11 20:12:18 发布

m0_60848502

最新推荐文章于 2024-09-11 20:12:18 发布

阅读量108

点赞数

分类专栏： Java 文章标签： css kafka html5 后端

本文链接：https://blog.csdn.net/m0_60848502/article/details/120003613

版权

Java 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

这篇博客详细介绍了CSS选择器的各种类型，包括通用选择器、元素选择器、类选择器、ID选择器、属性选择器以及组合选择器等，并通过实例展示了它们的用法。还提供了一些练习题，如设置文本输入框文字颜色为红色，以及查找特定内容的em元素。同时，文章强调了选择器在网页样式设计中的重要性和效率问题，提供了类选择器在实际开发中的应用案例。

摘要由CSDN通过智能技术生成

*   [\[attr~=val\]](about:blank#attrval_150)

*   [\[attr|=val\]](about:blank#attrval_155)

*   [\[attr^=val\]](about:blank#attrval_160)

*   [\[attr$=val\]](about:blank#attrval_163)

*   [\[attr\*=val\]](about:blank#attrval_166)

后代选择器 (descendant combinator)：div span {}
子选择器 (child combinators)：div>span {}
相邻兄弟选择器 (adjacent sibling combinator)：div+p
全体兄弟选择器 (general sibling combinator)：div~p
选择器组
- 交集选择器：div.one {}
- 并集选择器：div, .one, [title=“test”] {}
【练习】让所有文本输入框的文字颜色都为红色
【练习】找到内容为 em2、em3、em4 的 em 元素

博文集合：【重识 HTML + CSS】知识点目录

CSS 选择器的作用：按照一定的规则选出符合条件的元素，为之添加 CSS 样式

CSS 选择器的分类：

通用选择器 (universal selector)
元素选择器 (type selectors) / 标签选择器
类选择器 (class selectors)
id 选择器 (id selectors)
属性选择器 (attribute selectors)
组合 (combinators)
伪类 (pseudo-classes)
伪元素 (pseudo-elements)

元素选择器 (type selectors)：div {}

================================================================================================

选中所有的 div 并设置前景色为红色：

在这里插入图片描述

通用选择器 (universal selector)：* {}

===================================================================================================

给所有的元素设置前景色为红色：

在这里插入图片描述

一般用来给所有元素作一些通用性的设置：

比如内边距、外边距
效率比较低，尽量不要使用

id 选择器 (id selectors)：#xxx {}

================================================================================================

将 id 值为 one 的元素设置前景色为红色：

在这里插入图片描述

id 选择器的注意点：

一个 HTML 文档里面的 id 值是唯一的，不能重复
id 值如果由多个单词组成，单词之间可以用中划线-、下划线_连接，也可以使用驼峰标识
最好不要用标签名作为 id 值

中划线 - 又叫连字符 (hyphen)

类选择器 (class selectors)：.xxx {}

=================================================================================================

将 class 值为 one 的元素设置前景色为红色：

在这里插入图片描述

class 选择器的注意点：

一个元素可以有多个 class 值，每个 class 之间用空格隔开
class 值如果由多个单词组成，单词之间可以用中划线-、下划线_连接，也可以使用驼峰标识
最好不要用标签名作为 class 值

【练习】类选择器实现多种按钮样式

在开发过程中，类选择器可以认为是最常用最灵活的选择器

一般会将一些公共样式抽取出来，写到某个类选择器中；想要使用这些样式，加上类名即可

在这里插入图片描述


<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <title>02-class选择器-练习03</title>

    <style> /* 按钮(button) */

        .btn {

            font-weight: normal;

            color: #fff;

            font-size: 18px;

            /* 内边距 */

            padding-left: 20px;

            padding-right: 20px;

            padding-top: 10px;

            padding-bottom: 10px;

            /*

            设置鼠标样式（鼠标移动到元素上时显示的样子）

            cursor: pointer是一只小手的样式

            */

            cursor: pointer;

        }



        /* 按照颜色分类 */

        /* 危险 */

        .danger {

            background-color: #D73D32;

        }



        /* 警告 */

        .warning {

            background-color: #F6C12A;

        }



        /* 普通 */

        .normal {

            background-color: #53A93F;

        }



        /* 取消 */

        .cancel {

            background-color: #57B5E3;

        }



        /* 按钮角度分类 */

        /* 圆角 */

        .round {

            /* 圆角半径 */

            border-radius: 5px;

        }



        /* 按照大小分类 */

        .big {

            font-size: 25px;

        }



        .small {

            font-size: 14px;

        } </style>

</head>

<body>



<br>

<br>

<br>

<br>

<br>



<!--

项目中有4种类型的按钮

1.危险（danger）

2.警告（warning）

3.普通（normal）

4.取消（cancel）



这些按钮可能是直角，也可能是圆角



这些按钮可能是大按钮（文字大），也可能是小按钮（文字小）

-->



<strong class="btn normal round">确定</strong>

<strong class="btn warning big">重置</strong>

<strong class="btn cancel">取消</strong>

<strong class="btn danger small">删除</strong>

<strong class="btn danger">关闭</strong>



</body>

</html>

属性选择器 (attribute selectors)

==============================================================================================

[att]

拥有 title 属性的元素，设置前景色为红色：

在这里插入图片描述