草庐IT

CSS3新增选择器(属性选择器、结构伪类选择器、伪元素选择器)

detail_new 2023-04-05 原文
本博文介绍CSS3中新增的选择器,包括属性选择器、结构伪类选择器和伪元素选择器。

 1 属性选择器

属性选择器([属性])可以根据元素的属性和属性值来对符合要求的元素进行选择。

属性选择器的基础语法如下表:

语法 说明
标签[属性] {} 选择有目标属性的标签
标签[属性="value"] {} 选择有目标属性且属性值为"value"的标签
标签[属性^="x"] {} 选择有目标属性且属性值以"x"开头的标签
标签[属性$="x"] {} 选择有目标属性且属性值以"x"结尾的标签
标签[属性*="x"] {} 选择有目标属性且属性值包含"x"的标签

举两个实例:

① input[value] {} :选择具有value属性的input标签

② input[value="123"] {} :选择value属性值为"123"的input标签

注意事项:

(1)属性选择器(即[属性])的权重是0,0,1,0;

(2)标签[属性] 的权重是标签权重+属性选择器权重。

2 结构伪类选择器(上)

首先是第一类常用的结构伪类选择器,这类选择器常用于根据父级选择器来选择里面的子元素。

基础语法如下表:

语法 说明
E:first-child 选择父元素中的第一个子元素,若该元素为E,则选中,否则选择器不生效
E:last-child 选择父元素中的最后一个子元素,若该元素为E,则选中,否则选择器不生效
E:nth-child(n) 根据n来选择父元素中的子元素,若选中的子元素为E,则选中,否则选择器不生效

注意,这类选择器的选择步骤如下:

(1)先给所有子元素从1开始进行编号;

(2)根据选择器来进行选择。如:E:first-child就选择第一个子元素,如果这个子元素是E的话,那么就选中了;但如果第一个子元素不是E的话,那么这类选择器就不会生效。

总之,这类选择器是“先编号,再选择,选择的元素为E,则选中”。

可能语法太模糊?上实例:

① ul li:first-child :选择 ul 下的第1个子元素,若该元素为li,则选中该元素,否则不生效;

② ul li:nth-child(6)  :选择 ul 下的第6个子元素,若该元素为li,则选中该元素,否则不生效;

③ ul li:nth-child(2n) :选择 ul 下的所有第偶数个子元素(2n即为偶数),若其为 li 则选中。

接着,这里还要对E:nth-child(n)这一基本语法按照 n 的分类进行详细的说明:

E:nth-child(n)中 n 的类型 说明(选中的子元素为E则生效)
数字 选择第n个子元素
关键字"even" 选择所有第偶数个子元素
关键字"odd" 选择所有第奇数个子元素
公式 根据公式进行选择。注意:公式中的 n 从0开始计算,但子元素是从1开始计数的,因此第0个子元素是不存在的

当E:nth-child(n)中 n 的类型为“公式”时,提供以下实例供理解(n 从0开始计算):

选择器 说明(选中的子元素为E则生效)
E:nth-child(n) 选择从第0个开始的所有子元素
E:nth-child(n+3) 选择从第3个开始的所有子元素
E:nth-child(2n) 选择所有第偶数个子元素
E:nth-child(2n+1) 选择所有第奇数个子元素
E:nth-child(-n+3) 选择前3个子元素

实际上,在日常使用中,由于nth-child(n)会给所有子元素进行编号(不管是不是E),因此E:nth-child(n) 中 n 的值和 E 作为子元素的位置往往是对应的(这样选择器才会生效)。

3 结构伪类选择器(下)

接着是第二类常用的结构伪类选择器,这类选择器也用于根据父级选择器来选择里面的子元素,但和第一类有些差别。

基础语法如下表:

语法 说明
E:first-of-type 选择父元素中的第一个子元素E
E:last-of-type 选择父元素中的最后一个子元素E
E:nth-of-type(n) 根据n来选择父元素中的子元素E

注意,这类选择器的选择步骤如下:

(1)先给所有子元素E从1开始进行编号;

(2)根据选择器来进行选择。如:E:first-of-type就选择第一个子元素E。

直接上实例:

① div p:first-of-type :选择 div 下的第1个子元素p;

② div p:nth-of-type(2) :选择 div 下的第2个子元素p。

4 结构伪类选择器的比较

  结构伪类选择器 说明
不同点 :first-child、:last-child、:nth-child(n) 先给所有子元素编号,再选择,选中若是E则选择器有效,否则无效
:first-of-type、:last-of-type、:nth-of-type(n) 先给所有子元素E编号,再选择,选中一定是E
共同点 结构伪类选择器(如: first-child)的权重是0,0,1,0 E:first-child的权重是 E 的权重 + 0,0,1,0

5 伪元素选择器

伪元素选择器可以利用css创建新标签,简化HTML结构。

伪元素选择器的基础语法如下表:

语法 说明
E::before 在元素E内部的前面插入内容
E::after 在元素E内部的后面插入内容

需要注意的地方如下:

(1)创建的标签属于行内元素;

(2)新创建的元素在文档树中找不到;

(3)before和after必须有content属性;

(4)伪元素选择器(::before 和 ::after)权重为0,0,0,1。

提供一个实例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        div::before{
            content: "前面的";
        }
        div::after{
            content: "后面的";
        }
    </style>
</head>
<body>
    <div>
        选择器
    </div>
</body>
</html>

页面效果如下:

可见,通过伪元素选择器,div元素中的文字“选择器”前后分别添加了文字“前面的”和“后面的”,这就是::before和::after的基础用法。

有关CSS3新增选择器(属性选择器、结构伪类选择器、伪元素选择器)的更多相关文章

  1. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过,我不想只删除标签,我想智能地保留尽可能多的格式。为插入换行符标签,检测段落并格式化它们等。输入非常简单,通常是格式良好的html(不是整个文档,只是一堆内容,通常没有anchor或图像)。我可以将几个正则表达式放在一起,让我达到80%,但我认为可能有一些现有的解决方案更智能。 最佳答案 首先,不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案,它会随着HTML的变化而崩溃,或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  2. ruby - capybara field.has_css?匹配器 - 2

    我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解,字段“Email”是一个节点,因此调用must_have_css绝对有效!我做错了什么? 最佳答案 通过JonasNicklas得到了答案:No

  3. ruby-on-rails - 如果为空或不验证数值,则使属性默认为 0 - 2

    我希望我的UserPrice模型的属性在它们为空或不验证数值时默认为0。这些属性是tax_rate、shipping_cost和price。classCreateUserPrices8,:scale=>2t.decimal:tax_rate,:precision=>8,:scale=>2t.decimal:shipping_cost,:precision=>8,:scale=>2endendend起初,我将所有3列的:default=>0放在表格中,但我不想要这样,因为它已经填充了字段,我想使用占位符。这是我的UserPrice模型:classUserPrice回答before_val

  4. ruby-on-rails - 在混合/模块中覆盖模型的属性访问器 - 2

    我有一个包含模块的模型。我想在模块中覆盖模型的访问器方法。例如:classBlah这显然行不通。有什么想法可以实现吗? 最佳答案 您的代码看起来是正确的。我们正在毫无困难地使用这个确切的模式。如果我没记错的话,Rails使用#method_missing作为属性setter,因此您的模块将优先,阻止ActiveRecord的setter。如果您正在使用ActiveSupport::Concern(参见thisblogpost),那么您的实例方法需要进入一个特殊的模块:classBlah

  5. ruby - 多个属性的 update_column 方法 - 2

    我有一个具有一些属性的模型:attr1、attr2和attr3。我需要在不执行回调和验证的情况下更新此属性。我找到了update_column方法,但我想同时更新三个属性。我需要这样的东西:update_columns({attr1:val1,attr2:val2,attr3:val3})代替update_column(attr1,val1)update_column(attr2,val2)update_column(attr3,val3) 最佳答案 您可以使用update_columns(attr1:val1,attr2:val2

  6. ruby - Nokogiri 剥离所有属性 - 2

    我有这个html标记:我想得到这个:我如何使用Nokogiri做到这一点? 最佳答案 require'nokogiri'doc=Nokogiri::HTML('')您可以通过xpath删除所有属性:doc.xpath('//@*').remove或者,如果您需要做一些更复杂的事情,有时使用以下方法遍历所有元素会更容易:doc.traversedo|node|node.keys.eachdo|attribute|node.deleteattributeendend 关于ruby-Nokog

  7. ruby-on-rails - Rails 模型——非持久类成员或属性? - 2

    对于Rails模型,是否可以/建议让一个类的成员不持久保存到数据库中?我想将用户最后选择的类型存储在session变量中。由于我无法从我的模型中设置session变量,我想将值存储在一个“虚拟”类成员中,该成员只是将值传递回Controller。你能有这样的类(class)成员吗? 最佳答案 将非持久属性添加到Rails模型就像任何其他Ruby类一样:classUser扩展解释:在Ruby中,所有实例变量都是私有(private)的,不需要在赋值前定义。attr_accessor创建一个setter和getter方法:classUs

  8. ruby - 是否有用于序列化和反序列化各种格式的对象层次结构的模式? - 2

    给定一个复杂的对象层次结构,幸运的是它不包含循环引用,我如何实现支持各种格式的序列化?我不是来讨论实际实现的。相反,我正在寻找可能会派上用场的设计模式提示。更准确地说:我正在使用Ruby,我想解析XML和JSON数据以构建复杂的对象层次结构。此外,应该可以将该层次结构序列化为JSON、XML和可能的HTML。我可以为此使用Builder模式吗?在任何提到的情况下,我都有某种结构化数据-无论是在内存中还是文本中-我想用它来构建其他东西。我认为将序列化逻辑与实际业务逻辑分开会很好,这样我以后就可以轻松支持多种XML格式。 最佳答案 我最

  9. ruby - Rails 3 的 RGB 颜色选择器 - 2

    状态:我正在构建一个应用程序,其中需要一个可供用户选择颜色的字段,该字段将包含RGB颜色代码字符串。我已经测试了一个看起来很漂亮但效果不佳的。它是“挑剔的颜色”,并托管在此存储库中:https://github.com/Astorsoft/picky-color.在这里我打开一个关于它的一些问题的问题。问题:请建议我在Rails3应用程序中使用一些颜色选择器。 最佳答案 也许页面上的列表jQueryUIDevelopment:ColorPicker为您提供开箱即用的产品。原因是jQuery现在包含在Rails3应用程序中,因此使用基

  10. ruby - 在哈希的键数组中追加元素 - 2

    查看我的Ruby代码:h=Hash.new([])h[0]=:word1h[1]=h[1]输出是:Hash={0=>:word1,1=>[:word2,:word3],2=>[:word2,:word3]}我希望有Hash={0=>:word1,1=>[:word2],2=>[:word3]}为什么要附加第二个哈希元素(数组)?如何将新数组元素附加到第三个哈希元素? 最佳答案 如果您提供单个值作为Hash.new的参数(例如Hash.new([]),完全相同的对象将用作每个缺失键的默认值。这就是您所拥有的,那是你不想要的。您可以改用

随机推荐