Css:属性选择器、关系选择器及伪元素

embedded/2025/1/16 3:45:20/

css的属性选择器:

注:属性值只能由数字,字母,下划线,中划线组成,并且不能以数字开头。

1、[属性] 选择含有指定属性的元素,用[]中括号表示。

<style>
/*注意大小写区分 注意前后顺序 样式层叠覆盖*/
[title]{color:red;}
p[title]{color:blue;}
</style><p title="titleValue">属性选择器p标签含有title属性测试</p>
<p title="Titlevalue">属性选择器p标签含有title属性测试</p>
<p>属性选择器p标签无title属性测试</p>
<br>
<div title="valueTitle">属性选择器div标签含有title属性测试</div>
<div title="Valuetitle">属性选择器div标签含有title属性测试</div>
<div>属性选择器div标签无title属性测试</div>

 

 2、[属性=属性值] 选择属性为某值的元素

<style>
/*注意大小写区分 注意前后顺序 样式层叠覆盖*/
[title]{color:green}
p[title]{color:#fca600}
p[title=Titlevalue]{color:blue;}
[title=valueTitle]{color:red;}
</style><p title="titleValue">属性选择器p标签含有title属性测试</p>
<p title="Titlevalue">属性选择器p标签含有title属性测试</p>
<p>属性选择器p标签无title属性测试</p>
<br>
<div title="valueTitle">属性选择器div标签含有title属性测试</div>
<div title="Valuetitle">属性选择器div标签含有title属性测试</div>
<div>属性选择器div标签无title属性测试</div>

 

3、[属性^=属性值] 选择含有指定属性和指定属性值开头的元素

<style>
/*注意大小写区分 注意前后顺序 样式层叠覆盖*/
p[title]{color:green;}
p[title^=title]{color:#fca600;}
[title^=Value]{color:red;}
</style><p title="titleValue">属性选择器p标签含有title属性测试</p>
<p title="Titlevalue">属性选择器p标签含有title属性测试</p>
<p>属性选择器p标签无title属性测试</p>
<br>
<div title="valueTitle">属性选择器div标签含有title属性测试</div>
<div title="Valuetitle">属性选择器div标签含有title属性测试</div>
<div>属性选择器div标签无title属性测试</div>

 

  4、[属性$=属性值] 选择含有指定属性和指定属性值结尾的元素

<style>
/*注意大小写区分 注意前后顺序 样式层叠覆盖*/
/*p[title]{color:green;} 优先级更高*/
div[title$=title]{color:#fca600;}
[title$=Value]{color:red;}
</style><p title="titleValue">属性选择器p标签含有title属性测试</p>
<p title="Titlevalue">属性选择器p标签含有title属性测试</p>
<p>属性选择器p标签无title属性测试</p>
<br>
<div title="valueTitle">属性选择器div标签含有title属性测试</div>
<div title="Valuetitle">属性选择器div标签含有title属性测试</div>
<div>属性选择器div标签无title属性测试</div>

 

5、[属性*=属性值] 选择属性中含有指定属性值的元素

<style>
/*注意大小写区分 样式层叠覆盖*/
[title]{color:green;}
div[title*=title]{color:#fca600;}
[title*=value]{color:red;}
</style><p title="titleValue">属性选择器p标签含有title属性测试</p>
<p title="Titlevalue">属性选择器p标签含有title属性测试</p>
<p>属性选择器p标签无title属性测试</p>
<br>
<div title="valueTitle">属性选择器div标签含有title属性测试</div>
<div title="Valuetitle">属性选择器div标签含有title属性测试</div>
<div>属性选择器div标签无title属性测试</div>

 

关系选择器:

1、父>子 选择某元素后面紧邻子元素(第一位子元素及其兄弟)

<style>
/*注意样式层叠覆盖*/
.father > p {color:red}
.father > .childTwo{color:blue}
</style><div class="father">
<p>div样式为father中p标签子元素 第一个</p>
<p class="childTwo">div样式为father中p标签子元素 第二个</p>
<p>div样式为father中p标签子元素 第三个</p>
</div>
<br>
<div>
<p>div无样式p标签子元素 第一个</p>
<p class="childTwo">div无样式p标签子元素 第二个</p>
<p>div无样式p标签子元素 第三个</p>
</div>

 

   2、父 子 选择某元素后面的所有子元素

<style>
/*注意样式层叠覆盖*/
.father p {color:red}
.father .childTwo{color:blue}
.childTwo{color:green}
</style><div class="father">
<p>div样式为father中p标签子元素 第一个</p>
<p class="childTwo">div样式为father中p标签子元素 第二个</p>
<p>div样式为father中p标签子元素 第三个</p>
</div>
<br>
<div>
<p>div无样式p标签子元素 第一个</p>
<p class="childTwo">div无样式p标签子元素 第二个</p>
<p>div无样式p标签子元素 第三个</p>
</div>

 

  3、兄+弟 选择紧接在某元素的兄弟元素,二者需有相同父元素

<style>
/*注意样式层叠覆盖*/
.father p + .childTwo{color:red}
.childOne + .childTwo{color:blue}
</style><div class="father">
<p>div样式为father中p标签子元素 第一个</p>
<p class="childTwo">div样式为father中p标签子元素 第二个</p>
<p>div样式为father中p标签子元素 第三个</p>
</div>
<br>
<div>
<p class="childOne">div无样式p标签子元素 第一个</p>
<p class="childTwo">div无样式p标签子元素 第二个</p>
<p>div无样式p标签子元素 第三个</p>
</div>

 

 4、兄~弟 选取某个元素之后的所有相同元素 

<style>
/*注意样式层叠覆盖*/
.childTwo ~ p{color:red}
.father ~ div{color:blue}
div ~ .childOne{color:green}
</style><div class="father">
<p>div样式为father中p标签子元素 第一个</p>
<p class="childTwo">div样式为father中p标签子元素 第二个</p>
<p>div样式为father中p标签子元素 第三个</p>
</div>
<br>
<div>
<p class="childTwo">div无样式p标签子元素 第一个</p>
<p>div无样式p标签子元素 第二个</p>
<p>div无样式p标签子元素 第三个</p>
</div>
<br>
<div class="childOne">
<div>div无样 第一个</div>
<p>div无样式p标签子元素 第一个</p>
<p>div无样式p标签子元素 第二个</p>
</div>

 

伪元素:

不在DOM中的元素,但可为其添加样式 

1、::before(:before)和::after(:after),注:content是必须的

<style>
div{display:flex;align-items:center;}
div:before{content:'嗨,';color:red}
div:after{content:"";width:10px;height:10px;background:blue;margin-left:5px;}
</style><div>米拉</div>

 

2、::first-line(:first-line)和::first-letter(:first-letter) 

::first-line(:first-line)用于块级元素,设置附属元素第一个行内容的样式

::first-letter(:first-letter) 用于块级元素,设置附属元素第一个字母(字)的样式 

<style>
div:first-line{color:green;}
div:first-letter{color:red;font-size:24px;}
</style>
<div>
<p>测试first-line和first-letter的第一个行文字</p>
<p>测试first-line和first-letter的第二个行文字</p>
<p>测试first-line和first-letter的第三个行文字</p>
</div>

 

3、::selection(注:是:: )设置元素中被用户长按鼠标拖动选中部分的样式,只可以应用于少数的CSS样式:color、background、cursor和outline

<style>
p::selection{color:red;background:yellow;}
p::-moz-selection{color:red;background:yellow;}
</style>
<div>
<p>测试first-line和first-letter的第一个行文字</p>
<p>测试first-line和first-letter的第二个行文字</p>
<p>测试first-line和first-letter的第三个行文字</p>
</div>


http://www.ppmy.cn/embedded/108406.html

相关文章

[情商-13]:语言的艺术:何为真实和真相,所谓真相,就是别人想让你知道的真相!洞察谎言与真相!

目录 前言&#xff1a; 一、说话的真实程度分级 二、说谎动机分级&#xff1a;善意谎言、中性谎言、恶意谎言 三、小心&#xff1a;所谓真相&#xff1a;只说对自己有利的真相 四、小心&#xff1a;所谓真相&#xff1a;就是别人想让你知道的真相 五、小心&#xff1a;所…

8.分布式服务部署

文章目录 1.分布式服务部署1.1服务器个数1.2 ubuntu 的 MySQL 安装1.3对其他服务器授权1.4Java服务部署1.5常见问题 大家好&#xff0c;我是晓星航。今天为大家带来的是 分布式服务部署 相关的讲解&#xff01;&#x1f600; 1.分布式服务部署 1.1服务器个数 机器个数 1 - N…

Superset二次开发之Select 筛选器源码分析

路径&#xff1a;superset-frontend/src/filters/components/Select 源码文件&#xff1a; 功能点&#xff1a; 作用 交互 功能 index.ts作为模块的入口点,导出其他文件中定义的主要组件和函数。它使其他文件中的导出可以被外部模块使用。 SelectFilterPlugin.tsx 定义主要…

Datawhale X 李宏毅苹果书 AI夏令营(深度学习 之 实践方法论)

1、模型偏差 模型偏差是指的是模型预测结果与真实值之间的差异&#xff0c;这种差异不是由随机因素引起的&#xff0c;而是由模型本身的局限性或训练数据的特性所导致的。 简单来讲&#xff0c;就是由于初期设定模型&#xff0c;给定的模型计算能力过弱&#xff0c;导致在通过…

Python教程:使用 Python 和 PyHive 连接 Hive 数据库

目录 1. 引言 2. 类的设计思路 2.1 类的基本结构 3. 连接到 Hive 3.1 连接方法 4. 执行查询 4.1 查询返回 DataFrame 4.2 查询返回列表 5. 基本的数据库操作 5.1 创建表 5.2 插入数据 5.3 更新数据 5.4 删除数据 6. 表的描述信息和数据库操作 6.1 获取表描述 6…

设计模式 19 观察者模式

设计模式 19 创建型模式&#xff08;5&#xff09;&#xff1a;工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式结构型模式&#xff08;7&#xff09;&#xff1a;适配器模式、桥接模式、组合模式、装饰者模式、外观模式、享元模式、代理模式行为型模式&#xff…

JVM3-双亲委派机制

目录 概述 作用 如何指定加载类的类加载器&#xff1f; 面试题 打破双亲委派机制 自定义类加载器 线程上下文类加载器 Osgi框架的类加载器 概述 由于Java虚拟机中有多个类加载器&#xff0c;双亲委派机制的核心是解决一个类到底由谁加载的问题 双亲委派机制&#xff…

创建与操作MySQL数据库

2.1 创建数据库 数据库技术主要研究如何科学地组织和存储数据&#xff0c;以及如何高效地获取和处理数据&#xff0c;它已广泛应用于各个领域。数据库是指长期存储在计算机内的、有组织的、可共享的数据集合。数据库可以看作一个存储数据对象的容器&#xff0c;这些对象包括数…