选择器

层级选择器

            // 后代选择器
            $("#box div").css("background-color","blue");

            // 子选择器
            $("#box>div").css("background-color","blue");

            // 相邻兄弟选择器
            // 选到与box相邻的c
            $("#box+div").css("background-color","blue");

            // 后面所有兄弟选择器   
            // 选到box后面所有的兄弟div
            $("#box~div").css("background-color","blue");
        })

过滤选择器

            // :first 选择第一个元素
            // 一组元素中的第一个
            $("ul li:first").css("color","red");

            // :last 选择最后一个元素
            //一组元素中的最后一个元素
            $("ul li:last").css("color","pink");

            // not 不选择的那个元素
            $("div:not(.c)").css("color","red");

            // :even 选取索引值偶数的所有元素，索引从零开始
            $("div:even").css("color","red");

            // :odd 选取索引值奇数的所有元素，索引从零开始
            $("div:odd").css("color","blue");

            // :eq() 选取指定的元素，括号中写索引值
            $("div:eq(2)").css("color","pink");

            // :gt() 选取索引值大于index的元素，索引从零开始
            $("div:gt(index)").css("color","pink");

            // :lt() 选取索引值小于index的元素，索引从零开始
            $("div:lt(index)").css("color","pink");

            // :header() 选取所有的标题元素
            $(".f :header").css("color","red");
        })

内容过滤选择器

            // :contains() 选取含有指定内容的元素
            $("p:contains('hello')").css("background-color","blue");

            // :empty 选取内容为空的元素
            $("p:empty").css("background-color","blue");

            // :has() 选取含有选择器所匹配的元素的元素
            $("p:has(span)").css("background-color","blue");

            // :parent 选取非空元素
            $("p:parent").css("background-color","blue");
        })