首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

获取最后一个可见div的CSS选择器

可以使用以下方法:

  1. 使用伪类选择器:last-of-type:这个选择器可以选择同类型的最后一个元素。但是需要注意的是,它选择的是同类型的最后一个元素,而不是最后一个可见元素。如果在最后一个可见div之后还有其他类型的元素,那么这个选择器将选择这个元素而不是最后一个可见div。
  2. 使用JavaScript:通过JavaScript可以动态获取最后一个可见div的CSS选择器。可以使用document.querySelectorAll方法获取所有的div元素,然后通过循环遍历判断每个div元素是否可见,最后获取最后一个可见div的CSS选择器。

以下是一个示例代码:

代码语言:javascript
复制
function getLastVisibleDivSelector() {
  var divs = document.querySelectorAll('div');
  var lastVisibleDiv = null;

  for (var i = divs.length - 1; i >= 0; i--) {
    var div = divs[i];
    var style = window.getComputedStyle(div);

    if (style.display !== 'none' && style.visibility !== 'hidden' && style.opacity !== '0') {
      lastVisibleDiv = div;
      break;
    }
  }

  if (lastVisibleDiv) {
    var selector = '';
    var currentElement = lastVisibleDiv;

    while (currentElement !== document.body) {
      var tagName = currentElement.tagName.toLowerCase();
      var index = Array.prototype.indexOf.call(currentElement.parentNode.children, currentElement) + 1;
      selector = tagName + ':nth-child(' + index + ') ' + selector;
      currentElement = currentElement.parentNode;
    }

    return selector.trim();
  }

  return null;
}

var lastVisibleDivSelector = getLastVisibleDivSelector();
console.log(lastVisibleDivSelector);

这段代码会在控制台输出最后一个可见div的CSS选择器。你可以将其应用到你的项目中,并根据需要进行修改和优化。

注意:以上代码只是一个示例,实际应用中可能需要根据具体情况进行适当的调整。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • jQuery 选择器

    层叠样式表 良好地继承了css选择器语法,还继承了其获取页面元素便捷高效特点 于css不同,jQuery选择器获取元素后,为该元素添加是行为 有良好兼容性 优势 1. ...简洁写法 (1) $(选择) 2. 完善处理机制 (1) 简洁,避免某些错误 类型: 可通过css选择器和过滤选择器两种方式选择元素,每种又有不同方法来获取元素 1. ...通过 过滤选择呢亲选择元素 (1) 基本过滤选择器 (2) 可见性过滤选择器 详解: 通过css选择器选取元素 jQuery支持大多数css选择器 最常用有:基本选择器,层次选择器和属性选择器 在jQuery...Css:type=”hidden”  隐藏域 在可见选择器中需要注意是,选择器 :hidden获取元素不仅包括样式属性display为“none”元素,还包括文本隐藏域和visibility:hidden...而代码: /1不带空格jQuery选择器 var $t b= $(".test:hidden") ; 选取是隐藏class 为“test" 元素。 最后: ? (C) 房上猫 。

    2.6K90

    JS数组at函数(获取最后一个元素方法)介绍

    本文介绍js中数组at函数,属于比较简单知识普及性文章,难度不大。 0x00 首先,我们可以思考如下一个问题,如果要获取一个数组最后一个元素(这是很常用操作),我们应该怎么做?...相信大部分人能够想到代码是这样: let last = array[ array.length - 1]; 嗯,这是最常用获取数组最后一个元素方式,依此类推获取倒数第二个,第三个方式类似。...当然除了这种方式之外,还有其他方式,比如: let last = array.slice(-1)[0] 先通过slice获取后面一个元素数组,然后通过下标0获取最后一个元素。...这就让人羡慕python里面的数组操作,可以通过负索引方式获取最后一个元素,代码如下: last = array[-1] js里面不支持负索引方式。...不过es6新增了一个at方法,可以获取数组指定索引元素,并且支持负索引。负索引从后往前计算,-1表示最后一个,-2 表示倒数第二个,依此类推。 因此试用此方法获取最后一个元素会变得简单很多。

    4.6K30

    微软出品自动化测试神器【Playwright+Java】系列(十一)元素定位详解

    例如,它将多个空格变成一个,将换行符变成空格,并忽略前后空格。 6、在给定范围内元素,匹配元素 给定元素范围「参数传递任何选择器」至少匹配一个元素,它将返回一个元素,也是模糊匹配!...,简单说就是从这么多列表中找到一个匹配选择器去选择元素。...「示例代码如下:」 //获取一个元素文本 String first = page.locator("button").locator("nth=0").textContent(); //获取最后一个元素文本...不是CSS选择器,因此不支持任何特定于CSS选项。...选择器被链接时,下一个选择器相对于前一个选择器结果被查询,个人感觉就是按照层级去定位元素。

    82120

    jQuery基础与JavaScript与CSS交互-第五章

    下元素名是子元素 $(‘.one + div’):class为one一个元素 $(‘#two ~ div’):id为two元素后面的所有兄弟元素 过滤选择器...元素中一个元素 $(" li:last" ):选取所有元素中最后一个元素 $(" li:even" ):选取索引为偶数所有元素 $(" li:odd" )...:选取索引为奇数所有元素 $(" li:not(.three)" ):选取class不是three元素 $(":header" ):选取网页中所有标题元素 $(":focus" ):选取当前获取焦点元素...(text) :empty :has(selector) :parent 选择器书写规范很严格,多一个空格或少一个空格,都会影响选择器结果。...要求 选择器 基本选择器 层次选择器 过滤选择器 表单选择器 技能 (1)基本过滤选择器 (2)jQuery对象click()方法 (3)jQuery对象css()方法 (4)选择器 (5)

    91430

    jQuery 常用方法

    子元素 相邻元素选择器 集合元素 $(".item+div") 选取 Class 为 item 一个 兄弟元素 兄弟元素选择器 集合元素 $("#item~div")...选取 ID 为 item 元素后面的所有 兄弟元素 过滤选择器,主要是通过特定过滤规则来筛选出所需 DOM 元素,过滤规则与 CSS伪类选择器语法相同,即选择器都以一个冒号:开头...,按照不同过滤规则,过滤选择器可以分为基本过滤,内容过滤,可见性过滤,属性过滤,子元素过滤和表单对象属性过滤选择器,总结如下: 选择器 返回 示例 :first 单个元素 $("div:first")...:animated 集合元素 $("div: animated") 选取正在执行动画 元素 表单选择器,利用表单选择器我们可以极其方便地获取表单某个或某类型元素,总结如下: 选择器...(); 返回上一层操作对象 .end(); 第一个 .first(); 最后一个 .last(); 查找最近 元素 .closest(“li”); 获取当前元素所有 元素

    2.6K50

    与Ajax同样重要jQuery(1)

    pre元素一个兄弟元素 $("label + input") prev ~ siblings 获取pre元素后边所有兄弟元素 $("form ~ input") 练习2: ² 将class属性值为...③:基本过滤选择器 :first 选取第一个元素 $("tr:first") :last 选取最后一个元素 $("tr:last") :not(selector) 去除所有与给定选择器匹配元素 $("...字体颜色为红色 $("div:contains('传智播客')").css("color","red"); // 设置没有子元素div元素 文本内容 ”这是一个DIV“ $("div:empty...⑤:可见性过滤选择器 根据元素可见与不可见状态来选取元素 :hidden 选取所有不可见元素 $("tr:hidden") :visible 选取所有可见元素 $("tr:visible") 练习5...区别 eq :first-child 选取第一个子元素 :last-child 选取最后一个子元素 :only-child 选取唯一子元素,它父元素只有它这一个子元素 练习7: ² 选择id属性mytable

    10K60

    javaWeb核心技术第五篇之jQuery

    ,jquery页面加载成功事件可以出现多次,从上到下依次执行,js页面加载成功事件只能出现一次,即使出现多次,也只有最后一个生效 - 重点事件 - click - change...- 基本过滤: - :first 第一个 - :last 最后一个 - :even 偶数 - :odd 奇数 - :eq(index) 索引=...hidden:不可见 主要针对是 文本隐藏域和指定display=none - :visible:可见 - 属性选择器★ - [属性名]:有指定属性元素 - [属性名='...//a.获取省份value值 //b.获取所对应市数组 //c.获取下拉选对象 //d.遍历市数组,将每一个市拼成option插入到市下拉选中 案例2-左右选择...2.编写改变事件函数 //a.获取省份value值 //b.获取所对应市数组 //c.获取下拉选对象 //d.遍历市数组,将每一个市拼成option插入到市下拉选中

    8K10

    JavaScript学习笔记(四)—— jQuery入门

    并列选择器 这类选择器将每一个选择器匹配到元素合并后一起返回 id="notMe" id="...简单伪类选择器 伪类选择器 说明 :not(selector) 选择除了某个选择器之外所有元素 :first或first() 选择某元素一个元素 :last或last() 选择某元素最后一个元素...odd").css("background-color", "#bbbbff"); 子元素伪类选择器 子元素伪类选择器就是选择某一个元素下面的子元素方式,在jQuery中,子元素伪类选择器分为两大类...可见性伪类选择器,就是根据元素可见”和“不可见”这两种状态来选取元素: 选择器 说明 :hidden 选取有不可见元素 :visible 选取可见元素 display:none type=“hidden...属性操作 jQuery提供css()方法,用来获取或设置匹配元素一个或多个样式属性。

    11.2K50

    CSS一个div内两个子元素高度自适应

    ---- 设想这样一个情况:一个父元素有两个子元素,父元素高度不确定,用子元素撑起来。 但是这会导致一个问题:各个子元素高度不一致,为子元素添加height:100%是无效。...这种方式需要父元素高度确定,然而父元素高度由子元素确定。 猜想渲染时由于父元素高度不确定,会计算出各个子元素高度再确定父元素高度,但计算子元素高度时并没有父元素高度可以参考,因此上述方法行不通。...你可以 为父元素设置固定高度 配合height:100%,两个子元素都能撑满父元素 利用span元素与布局 如果span定位是absolute类型,那么它高度可以等于父元素高度。...父元素只根据相对定位子元素决定高度,也就是说,absolute定位span设置height:100%是有效,父元素高度对它来说是已知。...这种方法下,父元素高度仍然由最高相对定位子元素确定,其它元素放到span中,所以需要知道最高子元素。 使用同色背景 虽然很简单,却很实用方法。子元素高度虽然不都是100%,但效果一样。

    5K30

    Jquery简介选择

    依赖库:jquery-XXX.js 语法:$() 正文 5择器 id选择器 $(“#id值”) 样例:$(#span1).css(“color”,”red”); 标签选择器 $(“标签名称”) Class...选择器 $(“.class值”) 群组选择器 $(“标签名称1,标签名称2”) 包括选择器 $(“标签名称1 标签名称2”) 表单选择器 $(“:input”)全部Input标签 $(“:text...:has(selector)返回值:Array匹配含有选择器所匹配元素元素一个用于筛选选择器演示样例描写叙述:给全部包括 p 元素 div 元素加入一个 text 类HTML...不包含select中option;varc = ops[e.selectedIndex].value;通过获取当前訪问option对象在数组中位置。...‘:last’仅仅匹配一个元素,而此选择符将为每一个父元素匹配一个子元素 演示样例描写叙述:在每一个 ul 中查找最后一个 li HTML 代码: John

    1.6K20
    领券