CSS选择器

最新推荐文章于 2023-12-12 09:35:39 发布
最新推荐文章于 2023-12-12 09:35:39 发布
阅读量157 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45863116/article/details/118936849
版权

css导入方式

  1. 行内样式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1 style="color: darkred">标题</h1>
</body>
</html>
  1. 内部样式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--css代码-->
    <style>
        h1{
            color: darkred;
        }
    </style>
</head>
<body>
<h1>标题</h1>
</body>
</html>
  1. 外部样式的两种写法（在同一个包下单独建立css文件）
  • 链接式：Link标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>标题</h1>
</body>
</html>

h1{
    color: darkred;
}
  • 导入式：@import
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--css代码-->
    <style>
        @import url("css/style.css");
    </style>
</head>
<body>
<h1>标题</h1>
</body>
</html>

h1{
    color: darkred;
}

优先级：就近原则（行内样式、内部样式、外部样式）

选择器

选择器{

​ 声明1;

​ 声明2;

​ 声明3;

}

作用：选择页面上的某一个或某一类元素

基本选择器：

  1. 标签选择器

    标签选择器会选择到页面上的所有标签

  2. 类选择器 class

    可以标签归类，等同于一个class，可以复用

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .a{
        color: aquamarine;
        }
        .b{
            color: blueviolet;
        }
    </style>
</head>
<body>

<h1 class="a">标题1</h1>
<h1 class="a">标题2</h1>
<h1 class="b">标题3</h1>
<p class="a">学java</p>

</body>
</html>

  3. id选择器

    id必须保证全局唯一

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #a{
            color: chocolate;
        }
        .b{
            color: blueviolet;
        }
        .c{
            color: darkred;
        }
        h1{
            color: chartreuse;
        }


    </style>
</head>
<body>

<h1 id="a" class="c">标题1</h1>
<h1>标题2</h1>
<h1 class="b">标题3</h1>
<p class="c">学java</p>

</body>
</html>

不遵循就近原则，id选择器>class选择器>标签选择器

高级选择器

层次选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    /*后代选择器，选择某元素所有后代元素*/
        body p{
            background: darkred;
        }
    /*子选择器，只选择某元素后一代元素*/
        body>p{
            background: darkred;
        }
    /*相邻选择器，选择某元素向后一个同级元素*/
        .a+p{
            background: darkred;
        }
    /*通用选择器，选择某元素后所有同级元素*/
        .a~p{
            background: darkred;
        }
    </style>
</head>
<body>
    <p class="a">p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li>
            <p>p4</p>
        </li>
        <li>
            <p>p5</p>
        </li>
        <li>
            <p>p6</p>
        </li>
    </ul>
    <p class="a">p7</p>
    <p>p8</p>
</body>
</html>

结构伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*选中ul的第一个子元素*/
        ul li:first-child{
            background: chocolate;
        }
        /*选中ul的最后一个一个子元素*/
        ul li:last-child{
            background: blueviolet;
        }
        /*选中p1*/
        /*通过选中p1的父级元素来选中父级元素的子元素的第一个,顺序*/
        p:nth-child(1){
            background: aquamarine;
        }
        /*通过选中p1的父级元素来选中父级元素的子元素的第二个,类型*/
        p:nth-of-type(2){
            background: darkred;
        }
        /*悬停动作背景*/
        a:hover{
            background: burlywood;
        }

    </style>

</head>
<body>
    <a href="">666</a>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

属性选择器

标签[属性]{…}

属性：class=“a” 完全等于

​ class*=“a” 包含

​ href^=http 以http开头

​ href&=pdf 以pdf结尾

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*选中所有666类的元素*/
        body [class*="666"]{
            background: aqua;
        }
        /*选中所有http开头的标签*/
        a[href^="https"]{
            background: mediumvioletred;
        }

    </style>
</head>
<body>
    <a href="www.baidu.com" class="666 999 546">1</a>
    <a href="https://www.baidu.com">2</a>
    <p id="ccc">p3</p>
    <p class="666 546">p4</p>
    <p>p7</p>
    <p class="666">p8</p>
</body>
</html>
huaYinG_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS教程之css选择器 、属性、值
10-30
本教程将深入探讨CSS选择器、属性以及值，帮助你更好地理解和应用CSS来美化你的网页。 首先，我们要了解CSS选择器。选择器是CSS的核心组成部分，它的主要作用是定位HTML文档中的特定元素，以便对这些元素应用样式。...
CSS 选择器支持列表
09-25
CSS 选择器支持列表 CSS 选择器是 CSS 中的一个重要组成部分，它允许开发者根据特定的规则来选择和应用样式到 HTML 元素上。下面是 CSS 选择器支持列表的详细解释： ### 一、基本选择器 * `E`：选择所有 HTML ...
css选择器
总结前端开发中遇到的问题，分享前端知识
08-25 6346
通配选择器（Universal selector）作用：选中页面中的所有元素;元素选择器（Type selector）也叫类型选择器、标签选择器
CSS 选择器
m0_60508194的博客
09-26 1635
可以将CSS选择器分为五类：
css 选择器
qq_42638586的博客
04-10 1498
css选择器
css 选择器 详解
2301_76669854的博客
12-12 1818
使用。
CSS选择器优先级
热门推荐
qq_46133833的博客
04-30 5万+
CSS选择器优先级 （1）CSS选择器都有权重值，权重值越大优先级越高。 内联样式表的权重值最高，值为1000。 id选择器的权重值为100。 class选择器的权值为10。 类型（元素）选择器的优先级为1。 通配符选择器的优先级为0。 （2）当权值相等时，后定义的样式表要优于先定义的样式表。 （3）在同一组属性设置中表有**“!important"**规则的优先级最大。 后代选择器 CSS后代选择器指为某标签元素内的特定后代标签元素来定义其样式。在CSS后代选择器中，规则左边的选择器一端包含两个或多个
CSS选择器大全
认真学习前端的博客
03-08 1940
CSS选择器中的通用 ID class 标签 属性以及交集 并集选择器，伪类，伪元素选择器等等 还有选择器的优先级权值等内容
css选择器有哪些？
weixin_47450807的博客
04-04 1万+
一、写在前面 css选择器有很多，但是常用到的也就几个，今天总结一下。 二、具体选择器 2.1、id选择器 #myId {} 2.2、类选择器 .myClass {} 2.3、标签选择器 p,h1 {} 2.4、后代选择器 div h1 {} 2.5、子选择器 div>h1 {} 2.6、兄弟选择器(所有的兄弟) ul~h1 {} 2.7、相邻兄弟选择器 ul+h1 {} 2.8、属性选择器 li[name='sss'] {} 2.9、伪类选择器 h1:hover {} 2.10 h
CSS选择器分类大全
m0_67859656的博客
11-05 6345
CSS选择器分类大全 基础选择器 一、基础选择器 二、复合选择器 三、CSS3选择器补充： （一）层级选择器： （二）属性选择器 （三）伪类选择器
CSS 选择器优先级
频繁记录
06-13 2164
CSS 选择器优先级
react-React组件的css选择器
08-15
在React开发中，CSS选择器是用于特定于组件的样式化的一种强大工具。React组件的样式管理是一个关键的方面，因为它影响着应用的可维护性和性能。本篇将深入探讨React组件与CSS选择器的结合使用，以及如何优化组件的...
SQLAlchemy-2.0.31-cp37-cp37m-musllinux_1_2_aarch64.whl
08-31
SQLAlchemy 是一个 SQL 工具包和对象关系映射（ORM）库，用于 Python 编程语言。它提供了一个高级的 SQL 工具和对象关系映射工具，允许开发者以 Python 类和对象的形式操作数据库，而无需编写大量的 SQL 语句。SQLAlchemy 建立在 DBAPI 之上，支持多种数据库后端，如 SQLite, MySQL, PostgreSQL 等。 SQLAlchemy 的核心功能： 对象关系映射（ORM）： SQLAlchemy 允许开发者使用 Python 类来表示数据库表，使用类的实例表示表中的行。 开发者可以定义类之间的关系（如一对多、多对多），SQLAlchemy 会自动处理这些关系在数据库中的映射。 通过 ORM，开发者可以像操作 Python 对象一样操作数据库，这大大简化了数据库操作的复杂性。 表达式语言： SQLAlchemy 提供了一个丰富的 SQL 表达式语言，允许开发者以 Python 表达式的方式编写复杂的 SQL 查询。 表达式语言提供了对 SQL 语句的灵活控制，同时保持了代码的可读性和可维护性。 数据库引擎和连接池： SQLAlchemy 支持多种数据库后端，并且为每种后端提供了对应的数据库引擎。 它还提供了连接池管理功能，以优化数据库连接的创建、使用和释放。 会话管理： SQLAlchemy 使用会话（Session）来管理对象的持久化状态。 会话提供了一个工作单元（unit of work）和身份映射（identity map）的概念，使得对象的状态管理和查询更加高效。 事件系统： SQLAlchemy 提供了一个事件系统，允许开发者在 ORM 的各个生命周期阶段插入自定义的钩子函数。 这使得开发者可以在对象加载、修改、删除等操作时执行额外的逻辑。
osal api中文说明
最新发布
08-31
osal api中文说明
SQLAlchemy-2.0.31-cp311-cp311-manylinux_2_17_x86_64.whl
08-31
SQLAlchemy 是一个 SQL 工具包和对象关系映射（ORM）库，用于 Python 编程语言。它提供了一个高级的 SQL 工具和对象关系映射工具，允许开发者以 Python 类和对象的形式操作数据库，而无需编写大量的 SQL 语句。SQLAlchemy 建立在 DBAPI 之上，支持多种数据库后端，如 SQLite, MySQL, PostgreSQL 等。 SQLAlchemy 的核心功能： 对象关系映射（ORM）： SQLAlchemy 允许开发者使用 Python 类来表示数据库表，使用类的实例表示表中的行。 开发者可以定义类之间的关系（如一对多、多对多），SQLAlchemy 会自动处理这些关系在数据库中的映射。 通过 ORM，开发者可以像操作 Python 对象一样操作数据库，这大大简化了数据库操作的复杂性。 表达式语言： SQLAlchemy 提供了一个丰富的 SQL 表达式语言，允许开发者以 Python 表达式的方式编写复杂的 SQL 查询。 表达式语言提供了对 SQL 语句的灵活控制，同时保持了代码的可读性和可维护性。 数据库引擎和连接池： SQLAlchemy 支持多种数据库后端，并且为每种后端提供了对应的数据库引擎。 它还提供了连接池管理功能，以优化数据库连接的创建、使用和释放。 会话管理： SQLAlchemy 使用会话（Session）来管理对象的持久化状态。 会话提供了一个工作单元（unit of work）和身份映射（identity map）的概念，使得对象的状态管理和查询更加高效。 事件系统： SQLAlchemy 提供了一个事件系统，允许开发者在 ORM 的各个生命周期阶段插入自定义的钩子函数。 这使得开发者可以在对象加载、修改、删除等操作时执行额外的逻辑。
geopandas-0.5.0-py2.py3-none-any.whl
08-31
GeoPandas是一个开源的Python库，旨在简化地理空间数据的处理和分析。它结合了Pandas和Shapely的能力，为Python用户提供了一个强大而灵活的工具来处理地理空间数据。以下是关于GeoPandas的详细介绍： 一、GeoPandas的基本概念 1. 定义 GeoPandas是建立在Pandas和Shapely之上的一个Python库，用于处理和分析地理空间数据。 它扩展了Pandas的DataFrame和Series数据结构，允许在其中存储和操作地理空间几何图形。 2. 核心数据结构 GeoDataFrame：GeoPandas的核心数据结构，是Pandas DataFrame的扩展。它包含一个或多个列，其中至少一列是几何列（geometry column），用于存储地理空间几何图形（如点、线、多边形等）。 GeoSeries：GeoPandas中的另一个重要数据结构，类似于Pandas的Series，但用于存储几何图形序列。 二、GeoPandas的功能特性 1. 读取和写入多种地理空间数据格式 GeoPandas支持读取和写入多种常见的地理空间数据格式，包括Shapefile、GeoJSON、PostGIS、KML等。这使得用户可以轻松地从各种数据源中加载地理空间数据，并将处理后的数据保存为所需的格式。 2. 地理空间几何图形的创建、编辑和分析 GeoPandas允许用户创建、编辑和分析地理空间几何图形，包括点、线、多边形等。它提供了丰富的空间操作函数，如缓冲区分析、交集、并集、差集等，使得用户可以方便地进行地理空间数据分析。 3. 数据可视化 GeoPandas内置了数据可视化功能，可以绘制地理空间数据的地图。用户可以使用matplotlib等库来进一步定制地图的样式和布局。 4. 空间连接和空间索引 GeoPandas支持空间连接操作，可以将两个GeoDataFrame按照空间关系（如相交、包含等）进行连接。此外，它还支持空间索引，可以提高地理空间数据查询的效率。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值