CSS选择器注意点

最新推荐文章于 2023-10-25 11:59:55 发布
最新推荐文章于 2023-10-25 11:59:55 发布
阅读量274 收藏
点赞数
原文链接：https://my.oschina.net/gain/blog/3079883
版权

only-child与only-of-type

:only-child是一个 CSS 伪选择器，它匹配一个元素，该元素满足：

  • 该元素是其父级唯一孩子；
  • 该元素父级没有其他任何子元素；

:only-of-type是一个 CSS 伪选择器，它匹配一个元素，该元素满足：

  • 该元素是其父级的孩子；
  • 该父级没有其他与该元素相同类型的孩子；
  • 该父级可以有其他类型的孩子；
<!DOCTYPE html>
<html lang="en">
<!-- only-child与only-of-type比较  -->
<head>
    <meta charset="UTF-8">
    <title> only-child与only-of-type比较 </title>
    <style>
        .only-child p{
            background: green;
            color: #fff;
            padding: 10px
        }
        .only-child p:only-child{
            background: orange;
        }

        .only-of-type p{
            background: green;
            color: #fff;
            padding: 10px
        }
        .only-of-type p:only-of-type{
            background: orange;
        }
    </style>
</head>
<body>
    <h3>only-child演示</h3>
    <div class="only-child">
        <p>111111111</p>
        <p>111111111</p>
        <p>111111111</p>
    </div>
    <hr>

    <div class="only-child">
        <p>11111111</p>
    </div>
    <hr>

    <div class="only-child">
        <p>11111111</p>
        <a>22222222</a>
    </div>
    <hr>

    <h3>only-of-type演示</h3>
    <div class="only-of-type">
        <p>111111111</p>
        <p>111111111</p>
        <p>111111111</p>
    </div>
    <hr>

    <div class="only-of-type">
        <p>11111111</p>
    </div>
    <hr>

    <div class="only-of-type">
        <p>11111111</p>
        <a>22222222</a>
    </div>
    <hr>
    <h3>end</h3>
    <div></div>
</body>
</html>

8cec8b36710598d6f0701c2ff0b8a2ca1f0.jpg

first-child与first-of-type

:first-child是一个 CSS 伪选择器，它匹配一个元素，该元素满足：

  • 该元素是其父级的第一个孩子；

first-of-type是一个 CSS 伪选择器，它匹配一个元素，该元素满足：

  • 该元素是其父级的孩子；
  • 该元素在同类型的孩子中排在第一个；

显然，

:last-child 与 :last-of-type 

:nth-child(n) 与 :nth-of-type(n)

:nth-last-child(n) 与 :nth-last-of-type(n）

也是如此

<!DOCTYPE html>
<html lang="en">
<!-- first-child与first-of-type比较  -->
<head>
    <meta charset="UTF-8">
    <title>first-child与first-of-type比较</title>
    <style>
        .first-child p{
            background: green;
            color: #fff;
            padding: 10px
        }
        .first-child span{
            background: green;
            color: #fff;
            padding: 10px
        }
        .first-child p:first-child{
            background: orange;
        }
        .first-child span:first-child{
            background: orange;
        }

        .first-of-type p{
            background: green;
            color: #fff;
            padding: 10px
        }
        .first-of-type span{
            background: green;
            color: #fff;
            padding: 10px
        }
        .first-of-type p:first-of-type{
            background: orange;
        }
        .first-of-type span:first-of-type{
            background: orange;
        }
    </style>
</head>
<body>
    <h3>first-child演示</h3>
    <div class="first-child">
        <p>div中的第一个p元素</p>
        <span>div中第一个span元素</span>
        <p>div中第二个p元素</p>
        <span>div中第二个span元素</span>
    </div>
    <hr>

    <h3>first-of-type演示</h3>
    <div class="first-of-type">
        <p>div中的第一个p元素</p>
        <span>div中第一个span元素</span>
        <p>div中第二个p元素</p>
        <span>div中第二个span元素</span>
    </div>
    <hr>
    <h3>end</h3>
</body>
</html>

2330ce36ddfc4c89f0227126804455a46cb.jpg

in-range与out-of-range

:in-range伪类选择器，用于对元素绑定的值在指定范围限制内时具有范围限制的元素进行样式设置。换句话说，当它匹配元素的value属性值在其指定的范围限制内时，可以设置这些匹配元素的样式。

:out-of-range伪类选择器，用来指定当元素的有效值被限定在一段范围之内（使用min和max属性来指定范围），但实际输入值在该范围之外时使用的样式。

注意： :in-range伪类选择器和:out-of-range伪类选择器都是只作用于能指定区间值的元素；无法选择任何其他没有数据范围限制或不是表单控件元素的元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>in-range与out-of-range比较</title>
    <style>
        input {
            width: 100px;
            height: 40px;
            font-size: 1.4em;
        }

        input:in-range {
            background-color: lightgreen;
            color: green;
        }

        input:out-of-range {
            background-color: salmon;
            color: white;
        }

    </style>
</head>
<body>
    <div class="container">
        <p>值在1和10以内是，样式为绿色；但只要值在1和10之外，样式将是红色的。</p>
        <input id="range" type="number" min="1" max="10" value="12">
        <label for="range"></label>
    </div>
</body>
</html>

109379faf1836c4e5b1ea8c4a3f0494d471.jpg

4065def9448ff879487bce73e94146e3b7b.jpg

转载于:https://my.oschina.net/gain/blog/3079883

chengyao8926
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS选择器图文详解
Long_gone的博客
06-22 398
1、什么是选择器呢？ 选择器，说白了就是用一种方式把你想要的那一个标签选中！把它选中了，你才能操作这个标签的CSS样式。CSS有很多把你所需要的标签选中的方式，这些不同的方式就是不同的选择器。 选择器的不同，在于它选择方式不同，但是他们的目的都是相同的，那就是把你需要的标签选中，然后让你定义该标签的CSS样式。当然，你也有可能会用某一种选择器代替另一种选择器，这仅仅是由于选择方式不一样罢了，目的还是一样的。 2、标签选择器 元素选择器，就是“选中”相同的元素，然后对相同的元素设置同一个CSS样式。 语法：
CSS选择器小结
TYW0823的博客
11-18 137
一、基本选择器 1.ID选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>选择器</title> <style type="text/css"> id选择器 #one{ color: blue; } <body> <p id="one">这是一段话</p> </body> 2.类
css:伪类：only-child和：only-of-type区别
最新发布
m0_62381210的博客
10-25 217
nth-child表示只能有自己一个儿子：nth-of-type表示父亲可以有多个不同类型的儿子，但是不能有和自己一样的。
css中结构伪类用法（案例）
weixin_43939111的博客
02-01 861
结构伪类有如下几种： :first-child :last-child :nth-child() :nth-last-child() :nth-of-type() :nth-last-of-type() :first-of-type :last-of-type :only-child :only-of-type :empty 具体含义解释可以看网上的教程文档，这里只列举直观案例，便于区别理解记忆 一、结构伪类选择的是该种类在其父元素下属于该种类的元素 可以看到背
CSS伪类
chenmo2001的博客
06-27 464
伪类 简介： 伪类：这个叫法源于它们跟类相似，但实际上并没有类会附加到标记的标签上。 伪类分为两种： -UI伪类：会在HTML元素处于某种状态时（例如：鼠标指针位于指针上），为该元素应用CSS样式。Hover -结构化伪类：会在标记中存在某种结构上的关系时（例如：某元素是一组元素中的第一个或最后一个），为该元素应用CSS样式。 二、UI伪类 UI元素状态伪类选择器有如下几个： Selector:link ：匹配Selector选择器且未被访问前的元素(通常只能是超链接)。 ...
关于CSS selector 错误 Unsupported or invalid CSS selector: "%s"' % token)
ScanQ的博客
05-10 4343
'Unsupported or invalid CSS selector: "%s"' % token)ValueError: Unsupported or invalid CSS selector: "li&gt;"我出现这个错误   是因为修改css selector时把li后面的空格也删掉了   所以css selector 修改时要注意不要乱删除空格...
css 选择器使用之注意事项
奋斗的小骚年
03-12 925
！！！！一切代码要以效率为主。效率既是金钱。  CSS选择符是从右到左进行匹配的。从右到左！所以，#nav li 我们以为这是一条很简单的规则，秒秒钟就能匹配到想要的元素，但是，但是，但是，是从右往左匹配啊，所以，会去找所有的li，然后再去确定它的父元素是不是#nav。，因此，写css的时候需要注意： dom深度尽量浅。减少inline javascript、css的数量。使用现代
CSS选择器实现字段解析
01-21
但是我不想要这种标签该咋办，这时候就要使用CSS选择器中的伪类方法。如下所示。 注意的是两个冒号。使用CSS选择器真的很方便。同理我用CSS实现字段解析。代码如下 # -*- coding: utf-8 -*- import scrapy import ...
css基础知识之选择器使用示例
09-25
本篇文章将深入探讨CSS选择器的基础知识和使用示例，帮助理解如何有效地控制页面的样式表现。 首先，我们要明白选择器的优先级或者说特殊性（specificity）是决定样式生效的关键因素。CSS的特殊性由四个部分组成，...
四种CSS常用的选择器使用方法和注意事项
09-27
本文将详细介绍四种常用的CSS选择器：类选择器、ID选择器、HTML元素选择器和通配符选择器，以及它们的使用方法和注意事项。 1. 类选择器（Class选择器） 类选择器以一个点"."开头，用于选取具有特定类属性的HTML...
高效的CSS选择器编写指南
09-25
以下是一些关于如何编写高效CSS选择器的指导原则和注意事项： 1. **选择器优先级与效率**： - **ID选择器 (#id)**：拥有最高的优先级，也是最快的。在CSS中，ID是唯一的，所以浏览器可以迅速定位到对应的元素。 -...
only-child、only-of-type、nth-child、 nth-of-type
qiuqiu1894的博客
07-29 918
先从最不容易理解的only-child，only-of-type说起吧，理解这两个后面的都好理解了。 only-child 选取条件：需要有父元素（不包含body元素），父元素下只有一个元素，且该唯一个元素为指定元素。 a:only-child{ color:blue; } <body> <div> <div> <a>a标签1</a> </div> </div> <div> <div&
of-type和child的区别
gqomg的专栏
05-30 530
nth-of-type,nth-last-of-type 先排除非指定标签再进行排序 nth-child,nth-last-child不排除非指定标签进行排序 only-of-type 不允许包含非指定标签 only-child 允许包含非指定标签 但只能有唯一指定标签  first-child,last-child 第一个必须是指定标签才有效， first-
【CSS】CSS 选择器 ② ( ID 选择器 | 通配符选择器 | CSS 选择器使用注意事项 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
02-28 1532
一、 ID 选择器 1、简介 2、代码示例 二、通配符选择器 1、简介 2、代码示例 三、CSS 选择器使用注意事项
:only-child和:only-of-type选择器的比较
04-03 1071
:only-child 当元素是唯一的子元素，被选择。 HTML代码： <body> <div class="x"> <div>第一个DIV</div> <div>第一个DIV</div> <p>第一个P</p> </div> </body> ...
CSS：好玩的‘伪类’系列之——(:only-child与:only-of-type)
gavincz的博客
04-30 1172
:only-child 官方定义：当当前元素的父元素，有且只有它本身一个子元素（DOM节点）时，修改其样式 :only-of-type 官方定义：当当前元素在其父元素的子元素序列中，没有其它相同兄弟元素（唯一的，有且只有一个它本身）时，修改其样式 注意： 在官方文档中，这两个伪类的定义如上所述（在我理解中），但亲自测试后，发现，这两个伪类所实现的效果竟然一样（见下面案例），因此这里特别记...
css属性选择器关于-of-type 和-child
impress1234的博客
05-18 397
例：p:only-of-type 当p 的父元素中有且仅有一个p元素时（p的父元素还是允许有其它类型的子元素的），这个p元素被选中例：p:only-child     当p  的父元素中有且仅有一个子元素，且这个子元素是p 时，这个p元素被选中 ...
详解：9only-child only-of-type
qq_37805832的博客
04-25 509
only-child只有一个子元素的css样式 only-of-type只有一个元素的css样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="...
nth-child,nth-of-type,first-of-type,last-of-type,nth-last-of-type,only-of-type等的区别
hongyu_lin的博客
11-14 1816
*-child和*-of-type分别有五个前缀，即：nth，nth-last，first，last，only。 其中nth和nth-last需要传入参数，即第n元素的n值。 first前缀等同于nth前缀传入参数1，last前缀等同于nth-last传入参数1。 即first-child和nth-child(1)等同，first-of-type和nth-of-type(1)等同，last-
css 选择器优先级
08-15
CSS选择器优先级是用来确定在多个选择器应用于同一个元素时，哪个选择器的样式规则将被应用。CSS选择器优先级由四个部分组成：内联样式、ID选择器、类和伪类选择器、元素和伪元素选择器。它们的优先级从高到低依次降低。 具体的优先级规则如下： 1. 内联样式：使用style属性直接在HTML元素中定义的样式具有最高的优先级。 2. ID选择器：通过id属性定义的选择器具有较高的优先级。 3. 类和伪类选择器：包括类选择器（如.class）、属性选择器（如[type="text"]）和伪类选择器（如:hover）。 4. 元素和伪元素选择器：包括元素选择器（如div、p）和伪元素选择器（如::before、::after）。 如果有多个选择器具有相同的优先级，那么后面定义的样式规则将覆盖前面的规则。如果在不同CSS文件中定义了相同的选择器，后面引入的文件中的规则将覆盖前面引入的文件中的规则。 需要注意的是，使用!important声明的样式具有最高的优先级，应该谨慎使用，因为它会覆盖其他所有规则，可能导致样式冲突和难以调试的问题。在编写CSS时，应该尽量避免使用!important，并合理使用选择器优先级来管理样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值