CSS3之选择器

末蓝、 2023-06-25 10:24 6阅读 0赞

CSS3已经出来有一段时间了。大家天天在使用的选择器又有了些新的选择方法，相比大家一定很兴奋。因为一些头疼的元素都可以轻松选到了。对于这些新问世的选择器来说，大家运用起来还是有一定难度的，那么我们一起来慢慢看看CSS3选择器的运用。

下面这张图就是CSS中的选择器，就是我们要掌握的选择器。CSS3中新出来很多的选择器，现在我把他们简略分了些类。第一部分是属性选择器，第二部分是结构类选择器，第三部分是尾类选择器。

![css选择器][css]

**一、属性选择器**

CSS3中的属性选择器，大部分的使用方法，如同jQuery中的选择器。个人看法是由于jQuery使用的范围越来越广泛，普遍的工程师都善于运用jQuery的选择器，所以css3中大部分的属性选择器的使用方法酷似jQuery的选择器使用方法。而且不仅支持元素默认属性，还支持元素自定义属性的获取。Demo如下。

*CSS代码：*

/*去除默认样式，及添加些为了美观的样式*/
    li{list-style:none;float:left;height:30px;margin:0 3px;}
    /*只使用属性名，但没有确定任何属性值*/
    li[title]{background:Red;}
    /*指定属性名，并指定了该属性的属性值*/
    li[tit="leeA"]{background:gray;}
    /*指定属性名，该属性中包含meng，“~”必须写*/
    li[include~="meng"]{background:purple;}
    /*指定属性名，属性值是以meng开头的*/
    li[include^="meng"]{background:green;}
    /*指定属性名，属性值是以meng结束的*/
    li[include$="meng"]{background:orange;}
    /*指定属性名，属性值是以“meng-”开头的值（如zh-cn）*/
    li[include|="meng"]{background:yellow;}
    /*指定属性名，属值中包含了dis*/
    li[include*="dis"]{background:brown;}

*Html代码：*

*预览效果：*

![属性选择器][SouthEast]

**二、尾类选择器**

CSS3中提供了些尾类选择器，这样更方便的进行一些有效的选取。好，废话不多说，Demo2如下。

*CSS代码：*

/*表示当前的URL片段的元素类型，这个元素必须是span*/
    span:target{ border:1px solid green;}
    /*表示不可点击的表单控件*/
    input:disabled{background:yellow;}
    /*表示可点击的表单控件*/
    input:enabled{background:blue;}
    /*表示span元素在用户选中文字时状态*/
    span::selection{background:orange;color:purple;}
    /*表示span元素不含class名“bg”*/
    span:not(.bg){background:red;}

*HTML代码：*

*预览效果：*

![伪类选择器][SouthEast 1]

其中，“:target”这个选择器只有点击描点时候才会出现样式的改变，如Demo2中，点击0和1的描点链接，才会出现相应的变化。

**三、结构性尾类选择器**

结构性尾类选择器，是用来选择一些DOM节点的。好处是节点的标签可以不固定，节点的类名及id名可以不固定，就能被选中。这其中的很多选择器，熟悉jQuery的朋友看后一定不会很陌生。Demo如下。

*CSS代码：*

/*去除默认样式，及添加些为了美观的样式*/
    div {height:30px;margin:0;border:1px solid #000;width:300px;line-height:30px;}
    /*表示span父元素中的第3个字节点*/
    .a span:nth-child(3){background:gray;}
    /*表示span父元素中的第3个字节点，从后向前计算*/
    .a span:nth-last-child(3){background:brown;}
    /*表示span父元素中的第4个字节点，且类型为E*/
    .a span:nth-of-type(4){background:yellow;}
    /*表示span父元素中的第2个字节点，且类型为E,从后向前计算*/
    .a span:nth-last-of-type(2){background:green;}
    /*表示span元素中没有子节点。注意：子节点包含文本节点*/
    .a span:empty{background:orange;float:left;width:30px;height:30px;}
    /*表示span元素中的第一个子节点*/
    .b span:first-child{background:gray;}
    /*表示span元素中的最后一个子节点*/
    .b span:last-child{background:brown;}
    /*表示span父元素中的第一个子节点且节点类型是E的*/
    .c span:first-of-type{background:yellow;}
    /*表示span父元素中的最后一个子节点且节点类型是E的*/
    .c span:last-of-type{background:green;}
    /*表示span元素中只有一个子节点。注意：子节点不包含文本节点*/
    .d span a:only-child{background:orange;}
    /*表示span的父元素中只有一个子节点，且这个唯一的子节点的类型必须是E。注意：子节点不包含文本节点*/
    .e span a:only-of-type{background:purple;}

*　HTML代码：*

*　预览效果：*

![结构性伪类选择器][SouthEast 2]

上面几种选择器都是CSS3中新添加的选择器，不过这些选择器在旧版本的浏览器上面还是有些兼容性问题的。在一些PC中高端浏览器和移动设备上的浏览器还是没问题的。关于CSS3选择器方面就介绍到这里，希望能对初次接触CSS3的朋友们有所帮助。

[css]: https://img-blog.csdn.net/20130827093502781?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGVlX21hZ251bQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast]: https://img-blog.csdn.net/20130827103940328?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGVlX21hZ251bQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 1]: https://img-blog.csdn.net/20130827104113640?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGVlX21hZ251bQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 2]: https://img-blog.csdn.net/20130827104513828?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGVlX21hZ251bQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast