CSS常见选择器

CSS(层叠样式表)中包含了多种用于选择和定位HTML文档中元素的选择器,以便为这些元素应用样式。以下是CSS中常见的一些选择器及其详细解析:

1. 基础选择器

  • 元素(标签)选择器

    p {color: red;
    }
    

    这会选择所有<p>标签,并将它们的文字颜色设置为红色。

  • 类选择器

    .my-class {background-color: yellow;
    }
    

    通过.加类名来选择具有相应class属性的任何元素。

  • ID选择器

    #unique-id {font-size: 16px;
    }
    

    通过#加ID名来选择具有唯一ID属性的特定元素。

  • 通配符选择器

    * {margin: 0;padding: 0;
    }
    

    通配符*可以匹配文档中的所有元素,通常用于全局样式初始化。

2. 复合选择器

  • 后代选择器

    div p {text-align: justify;
    }
    

    选择所有位于div元素内部的<p>元素,不论嵌套层级多深。

  • 子元素选择器

    ul > li {list-style-type: none;
    }
    

    选择直接位于ul元素下的所有<li>元素,而非所有后代li

  • 相邻兄弟选择器(Adjacent sibling combinator)

    h1 + p {margin-top: 0;
    }
    

    选择紧接在h1元素之后的第一个<p>元素。

  • 一般兄弟选择器(General sibling combinator)

    h1 ~ p {color: green;
    }
    

    选择所有在h1元素之后的同级<p>元素。

3. 属性选择器

  • 精确匹配属性值

    a[target="_blank"] {color: blue;
    }
    

    选择所有target属性值为"_blank"<a>链接。

  • 以特定值开头或结尾

    input[type^="text"] {width: 100%;
    }
    

    选择所有type属性值以“text”开头的<input>元素。

  • 包含特定值

    [data-role] {border: 1px solid black;
    }
    

    选择所有具有data-role属性(不论值为何)的元素。

4. 伪类选择器

  • 动态伪类

    a:hover {text-decoration: underline;
    }
    

    当鼠标悬停在链接上时,为其添加下划线。

  • 结构性伪类:

    li:first-child {font-weight: bold;
    }
    

    选择每个列表项中作为其父元素的第一个子元素的<li>

5. 其他高级选择器

  • 结构化伪类(如:nth-child():nth-of-type()等):
    li:nth-child(odd) {background-color: lightgrey;
    }
    
    选择索引为奇数的列表项。

以上只是部分CSS选择器的简要介绍,实际应用中还有更多复杂组合和更细致的选择器可供使用,例如:not(), :focus-within, :has(), 等,在现代CSS规范中得到了扩展。理解并熟练运用这些选择器能够极大地提高CSS样式的灵活性和精准度。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/706347.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Stable Diffusion WebUI 折腾新篇章

原文&#xff1a;https://blog.iyatt.com/?p13123 1 前言 第一次玩 Stable Diffusion WebUI 是三十几天前&#xff0c;当时还在用四年半前&#xff08;大学前暑假&#xff09;买的轻薄本&#xff0c;而在半年前独显还坏了&#xff0c;所以是纯纯的用 CPU 折腾&#xff0c;刚…

【Android】View事件体系基础

文章目录 坐标系View滑动layout方法offserLeftAndRight() 和 offsetTopAndBottom()LayoutParams(布局参数)View动画scrollTo/scrollBy 解析Activity的构成 坐标系 分为Android坐标系和View坐标系 可以用 getWidth() 和 getHeight() 获取View自身的宽度和高度 对于ViewgetX() …

【c语言】内存函数

欢迎关注个人主页&#xff1a;逸狼 创造不易&#xff0c;可以点点赞吗~ 如有错误&#xff0c;欢迎指出~ 目录 memcpy函数的使用和模拟实现 memcpy函数的使用 memcpy函数的模拟实现 memmove的使用和模拟实现 memmove的使用 memmove的模拟实现 memset函数的使用 memcmp函数…

pdf转word文档怎么转?分享4种转换方法

pdf转word文档怎么转&#xff1f;在日常工作中&#xff0c;我们经常遇到需要将PDF文件转换为Word文档的情况。无论是为了编辑、修改还是为了重新排版&#xff0c;将PDF转为Word都显得尤为重要。那么&#xff0c;PDF转Word文档怎么转呢&#xff1f;今天&#xff0c;就为大家分享…

pytest-fixture固件的使用

fixture 固件&#xff1a;pytest自动化中用于前后置&#xff0c;功能强大&#xff0c;可替代setup,teardown,setup_class,teardown_class 装饰器&#xff1a; pytest.fixture(scope"作用域“, params"参数化", autouse”自动执行“, ids”参数别名“, name"…

ubuntu中怎么搭建go语言环境?

在Ubuntu中搭建Go语言环境相对简单&#xff0c;以下是一些基本步骤&#xff1a; 下载Go语言包&#xff1a; 访问Go官方网站(https://golang.org/dl/)下载适合您系统的Go语言包。选择适合您系统架构的版本&#xff0c;一般选择最新的稳定版本即可。 安装Go语言&#xff1a; 解压…

唯品会API新篇章:为第三方开发者提供VIP商品详情服务

唯品会API的新篇章为第三方开发者带来了一个全新的机会&#xff0c;可以通过其提供的API接口获取VIP商品详情服务。这对于想要在电商领域进行创新的开发者来说&#xff0c;无疑是一个好消息。 下面是一个简单的示例&#xff0c;展示了如何使用唯品会API获取VIP商品详情&#x…

Java中web的css、js、img等静态资源引入详细操作教程

本篇文章主要讲解&#xff1a;Java中web的css、js、img等静态资源引入详细操作教程 日期&#xff1a;2024年2月27日 作者&#xff1a;任聪聪 java中web单体项目静态资源webjar引入形式说明 说明&#xff1a;通过webjar进行静态资源的导入&#xff0c;使用maven进行版本的管理。…

基于华为atlas的分类模型实战

分类模型选用基于imagenet训练的MobileNetV3模型&#xff0c;分类类别为1000类。 pytorch模型导出为onnx&#xff1a; 修改mobilenetv3.py中网络结构&#xff0c;模型选用MobileNetV3_Small模型&#xff0c;网络输出节点增加softmax层&#xff0c;将原始的return self.linear4…

postgressql和postgis安装

PostgreSQL安装 1 简 介 2 PostgreSQL优点特性 3 安装PostgreSQL 3.1 Yum安装 3.2 RPM包安装 3.3 源码安装 4 安装PostGIS 4.1 安装依赖 4.2 检查PostGIS是否安装成功 5 PostgreSQL多实例 PostgreSQL安装 1 简 介 PostgreSQL 是一种非常复杂的对象-关系型数…

【经验】vscode 鼠标拖曳不能选中整行文字,只能选中纵向矩形范围

1、问题描述 不知道昨天操作vscode设置界面时&#xff0c;误选择了啥&#xff0c;导致鼠标拖曳不能选中整行文字&#xff0c;只能选中纵向矩形范围&#xff0c;现象如下&#xff1a; 2、解决方法 1&#xff09;打开设置界面 点击左下角按键&#xff0c;选择“设置” 2&…

kubectl 命令行管理K8S(下)

目录 声明式资源管理方式 介绍 命令 修改yaml文件指定的资源 离线修改 在线修改 YAML 语法格式 查看 api 资源版本标签 编辑yaml配置清单生成资源 编写yaml文件 yaml创建Deployment yaml创建service服务对外提供访问并测试 yaml创建Pod 生成模板 pod模板 serivc…

Linux运维-Web服务器的配置与管理(Apache+tomcat)(没成功,最后有失败经验)

Web服务器的配置与管理(Apachetomcat) 项目场景 公司业务经过长期发展&#xff0c;有了很大突破&#xff0c;已经实现盈利&#xff0c;现公司要求加强技术架构应用功能和安全性以及开始向企业应用、移动APP等领域延伸&#xff0c;此时原来开发web服务的php语言已经不适应新的…

leetcode:134.加油站

解题思路&#xff1a;需要注意开始时的编号&#xff0c;有的可以走一圈&#xff0c;有的走不了 模拟过程&#xff1a;for循环主要是用来模拟线性的过程&#xff0c;而在这里它是环状的&#xff1b; 可以用暴力解法&#xff0c;但是在这里我用贪心来解决。 常见疑惑&#xff1…

云呐智能化运维发展趋势是什么样?5g智能化矿山运维是什么

智能运维是近年来信息技术和自动化技术发展的一个新兴领域。未来&#xff0c;智能运维的技术演变方式可能包括以下几个方面: 数据驱动决策: 随着大数据技术的发展&#xff0c;智能运维将更加重视数据驱动的决策。通过对海量数据的实时分析和挖掘&#xff0c;我们可以发…

selenium中webdriver常用的ChromeOptions参数

官网链接&#xff1a;Browser Options | Selenium 使用示例&#xff1a; from selenium import webdriver from selenium.webdriver.chrome.options import Options# 创建选项对象 options Options()# 设置浏览器启动时的窗口大小 options.add_argument("--window-size…

在Web UI上提交Flink作业

1&#xff09;任务打包完成后&#xff0c;我们打开Flink的WEB UI页面&#xff0c;在右侧导航栏点击“Submit New Job”&#xff0c;然后点击按钮“ Add New”&#xff0c;选择要上传运行的JAR包 JAR包上传完成&#xff0c;如下图所示 &#xff08;2&#xff09;点击该JAR包&…

人工智能之Tensorflow程序结构

TensorFlow作为分布式机器学习平台&#xff0c;主要架构如下&#xff1a; 网络层&#xff1a;远程过程调用(gRPC)和远程直接数据存取(RDMA)作为网络层&#xff0c;主要负责传递神经网络算法参数。 设备层&#xff1a;CPU、GPU等设备&#xff0c;主要负责神经网络算法中具体的运…

云计算及其应用知识点总结

云计算及其应用的知识点可以总结如下&#xff1a; 1. 云计算的概念&#xff1a;云计算是一种基于互联网的计算方式&#xff0c;将计算资源和服务提供给用户&#xff0c;用户通过互联网连接&#xff0c;按需获取和使用计算资源。 2. 云计算的原理&#xff1a;云计算的原理包括资…

全量知识系统问题及SmartChat给出的答复 之4

Q11. 现在&#xff0c;我们进一步完善前端--知识表征。首先前端需要基于一个全面的GUI库&#xff0c;和前面说到的 混沌工程&#xff1a;基于流形 的分形混沌 与自相似性的计算机图像与程序。请考虑 1&#xff09;这两部分的实现用什么 &#xff1f;2&#xff09; 如何封装它们…