CSS：类选择器

于 2024-10-07 15:03:56 发布
阅读量24 收藏
点赞数 1
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/panghuangang/article/details/142740638
版权

https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#%E7%B1%BB%E9%80%89%E6%8B%A9%E5%99%A8

你能对一个元素应用多个类，然后分别指向它们，或者仅仅在选择器中存在所有这些类的时候选择这一元素。

例如：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .success {
      color: green;
      font-size: 20px;
      padding-left: 100px;
      margin-bottom: 50px;
    }

    .abnormal.error {
      color: red;
      font-weight: 900;
      font-size: 30px;
      padding-left: 100px;
    }
  </style>
</head>

<body>
  <div class="success">提交成功</div>
  <div class="abnormal error">提交失败</div>
</body>

</html>

展示效果：
在这里插入图片描述

听海边涛声
关注
CSS :not()选择器 (反选伪类)
专注于图像领域，主要研究内容包括计算机视觉和深度学习，特别是在图像分类、目标检测和图像生成等方面有深入的研究和实践经验。
12-15 5352
考虑这样一个场景：假设我们有1个div标签，其内部有h1-h5标签。 < h1 > 我是h1 < h2 > 我是h2 < h3 > 我是h3 < h4 > 我是h4 < h5 > 我是h5
CSS：伪类选择器
weixin_54197911的博客
05-03 2011
1.first-child:选择父类元素下第一个子元素。 代码如下（第一种情况p:first-child） <body> <div class="out"> <ul class="list"> <p>hello</p> <p>word</p> <li> <div class=
CSS：选择器 / 14种类型
snowball的博客
07-06 3182
CSS中的UI元素伪类选择器主要用于定义用户界面元素的特殊状态样式，如链接的悬停（hover）、激活（active）状态，以及输入框的焦点（focus）状态等。：尽量使用更具体的选择器来定位你想要样式化的元素，这样可以减少不必要的性能开销，并提高样式表的可维护性。然而，需要注意的是，当通用选择器与其他选择器结合使用时，它仍然会匹配所有元素，但样式只会应用到那些也符合其他选择器条件的元素上。符号，它选择某个元素之后的所有兄弟元素（共享相同父元素），而不仅仅是紧接在后面的元素。在CSS中，ID选择器以井号。
如何使用css :target选择器
txun123的博客
04-17 2828
首先我们要知道什么是target元素： URL 带有后面跟有锚名称 #，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。 :target 选择器可用于选取当前活动的目标元素。 CSS3 :target伪类用来改变页面中锚链接URL所指向的ID元素的样式。 例如你要改变描链接指向#tab的元素字体颜色为蓝色，哪么你可以这样写成： #tab:target {color:blue} 浏览器支持： 不支持IE8及以下的IE版本，IE9支持这个属性，其它非IE内核
css :not 选择器
韦大人orz
04-23 1万+
:not 选择器是css3里面的 :not([class]){color:red;} // 没有class属性的元素都设置为红色 如下代码 非 //属性为非aria-checked="true"元素 走.radio-text .van-radio:not([aria-checked="true"]) { .radio-text { color: inherit !important; } } p:not([class]){color:red;} // 没有class属性的p..
如何使用 CSS 中的 :root 伪类选择器
rubys007的博客
03-10 2013
了解 CSS 的:root伪类选择器，以及在项目中可能想要如何使用它！CSS 的:root伪类选择器用于选择给定规范的最高级父级。在 HTML 规范中，：root本质上等同于html选择器。在下面的 CSS 片段中，:root和html如果你注意到我说:root本质上等同于html选择器。事实上，：root选择器比html具有更高的优先级。这是因为它实际上被视为伪类选择器（就像或:hover一样）。尽管html选择器出现在后面，:root选择器仍然胜出，这要归功于它更高的优先级！
CSS伪类选择器
沃和莱特的博客
05-20 1849
前言： 在我们之前的介绍中提到了CSS中的几种选择器其中就有伪类选择器，那么这篇文章就给大家着重介绍一下这种独特的选择器。
css3新增选择器（ ::selection选择器、 ::before选择器、::after选择器）
m0_71814235的博客
07-19 1439
css3新增选择器（ ::selection选择器、 ::before选择器、::after选择器）
css学习04：类选择器
qq_46272167的博客
06-28 3489
类选择器： 如果想要差异化选择不同的标签，单独选一个或几个标签，可以使用类选择器 语法： 先在标签里定义一个类 <标签名class='类名'> xxx</标签名> 举例：<div class='red'> 变红色 </div> 在style标签内写入 .类名{ 属性1: 属性值1; ........ } 举例：将所有拥有red类的HTML元素均为红色 .red { color...
css的父选择器
热门推荐
Cribug8080的博客
05-22 4万+
css的父选择器 首先声明一点，目前没有css的父选择器。新出的css3也没有。但是已经有很多人有很多次提案了。 反向选择 在2008年Shaun Inman建议这种父选择器。 a < img{ border: none; } 这段css的目的是选择img元素的a标签。 parent Remy Sharp建议使用:parent a img:parent { background: ...
CSS: hover选择器的使用详解
12-13
之前在学计算机应用的时候，老师教我们使用了:hover选择器来完成下拉菜单，之前只知道怎么使用，并不知道为什么要这么用，现在记下怎么使用吧 定义和用法 定义： :hover 选择器用于选择鼠标指针浮动在上面的元素。 :...
四种css 伪类选择器
09-25
文档中提到了两个伪元素选择器::first-line和::first-letter。::first-line选择器用于改变元素第一行的样式，这使得我们能够对段落的第一行应用特殊样式，如加粗显示。而::first-letter选择器则用于改变段落中的第一...
css3类选择器之结合元素选择器和多类选择器用法
09-24
3. 结合元素选择器： 结合元素选择器是通过将元素选择器与类选择器组合来选取特定类型的元素，如`p.p1`。这个选择器告诉浏览器，我们要选取所有`<p>`标签中同时具有`class="p1"`的元素。 4. 多类选择器（Multiple ...
CSS3 :default伪类选择器使用简介
09-24
**CSS3 :default 伪类选择器** 是一种在CSS3中定义的样式选择器，专门用于作用在表单元素上，尤其是那些具有默认状态的元素。它可以帮助开发者标识并控制那些在用户未进行任何操作时就已经处于激活或选中状态的元素...
CSS画出三角形的做法
mingangel的博客
10-01 455
在网页中，会有三角形的出现，我们脑海里会有很多想法，如何去实现他们，我来提供一种比较好玩的做法。
CSS-Day3
m0_74039531的博客
09-29 422
伪类的语法：selector:pseudo-class {property:value;}CSS类也可以使用伪类：selector.class:pseudo-class {property:value;}您可以使用 :first-child 伪类来选择父元素的第一个子元素。p:first-child { color:blue; }在下面的例子中，选择相匹配的所有<p>元素的第一个 <i> 元素：p > i:first-child { color:blue; }在下面的例子中，选择器匹配所有作
CSS 盒子属性
m0_74012211的博客
10-02 492
CSS 盒子属性
CSS——文字打字机效果
最新发布
懒羊羊大王的博客
10-06 1022
本文通过纯 CSS 实现文字的打字机效果，然后借助 JS 实现了扩展。基本思路：使用伪元素覆盖原文字，并且使用伪元素模拟闪烁的光标效果。
【CSS】position
小秀的博客
10-02 381
特点：粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。特点：不影响元素本身特性，元素不脱离文档流，相对于原位置进行偏移。特点：元素脱离文档流 ，块级元素由内容撑开宽高，清除子集浮动。参考物：距离最近的使用了定位的父级，没有时找body。position: static 静态定位（默认）参考物：根据用户的滚动位置进行定位。参考物：元素的初始位置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值