jQuery内容选择器的掌握_使用选择器:not( ) 设置图片与右侧内容间距10px-优快云博客

本文深入探讨了CSS中:empty、:parent、:contains(text)及:has(selector)等伪类选择器的使用方法与实际应用案例。通过具体代码演示了如何利用这些选择器定位并样式化页面元素。

:empty
既没有文本内容也没有子元素的指定元素
:parent
有文本内容或者有子元素的指定元素
:contains(text)
找到包含指定文本的指定元素
:has(selector)
找到包含指定元素的指定元素

案例：
默认样板

<body>
<div> </div>
<div>我是div</div>
<div>我是div2</div>
<div><span> </span> </div>
<div><p> </p></div>
</body>

        div{
            width:100px;
            height:20px;
            background:red;
            margin-top: 5px;
        }

运行结果：
在这里插入图片描述

:empty
:parent

 <script>
   $(function(){
 //找到:empty既没有文本内容也没有子元素的 指定元素 ，
 也就是 第一个空div ,颜色改为红色
                   var $666 = $(":empty");
                    $666.css("background-color","red");
                     console.log($666);
     //找到:parent有文本内容或者有子元素的 指定元素 ，
     也就是 非空div，颜色设置成黄色
                      var $div =  $("div:parent");
                      $div.css("width","200px");
                      $div.css("background-color","yellow");
                      console.log($div);


      });
 </script>

运行结果
在这里插入图片描述
:contains(text)
找到包含指定文本的元素
:has(selector)
找到包含指定元素的元素


  <script>
               $(function(){
              //找到包含“我是xxx”文本的 元素
                   var $div =  $("div:contains('我是')");
                   $div.css("background-color","yellow");
                    //找到包含指定元素span的，设置成为绿色
                   var $span =  $("div:has('span')");
                   $span.css("background-color","green");
               });
     </script>

运行结果
在这里插入图片描述