1.1 :contains(text)（取包含text文本的元素）

$(document).ready(function () {
      // dd元素中包含"jQuery"文本的会变色
      $('dd:contains("jQuery")').css('color', '#FF0000');
    });

下面的代码，第一个dd会变色


内容过滤选择器_jQuery

<dl>
    <dt>技术</dt>
    <dd>jQuery, .NET, CLR</dd>
    <dt>SEO</dt>
    <dd>关键字排名</dd>
    <dt>其他</dt>
    <dd></dd>
</dl>

1.2 :empty（取不包含子元素或文本为空的元素）

$(document).ready(function () {
            $('dd:empty').html('没有内容');
});


内容过滤选择器_css_02

上面第三个dd会显示"没有内容"文本

1.3 :has(selector)（取选择器匹配的元素）

$(document).ready(function () {
            // 为包含span元素的div添加边框
            $('div:has(span)').css('border', '1px solid #000');
        });

即使span不是div的直系子元素，也会生效


内容过滤选择器_jQuery_03

<div>
    <h2>
        A        <span>B</span>
    </h2>
</div>

1.4 :parent（取包含子元素或文本的元素）

$(document).ready(function () {
            $('ol li:parent').css('border', '1px solid #000');
        });

下面的代码，A和D所在的li会有边框


内容过滤选择器_jQuery_04

<ol>
    <li></li>
    <li>A</li>
    <li></li>
    <li>D</li>
</ol>