您现在的位置是：网站首页> 编程资料编程资料

CSS3中31种选择器使用方法教程CSS3 选择器 基本选择器介绍CSS3 选择器 伪类选择器介绍CSS3 选择器 属性选择器介绍CSS3结构性伪类选择器九种写法css3高级选择器使用方法HTML5/CSS3实现的华丽的日期选择器源码css3选择器基本介绍

2021-09-06 932人已围观

简介 本人为大家介绍了30 种最常用的 CSS 选择器用法，多加了一种，变成了牢记 31 种选择器用法

*{margin:0;padding:0;}

#container*{border:1pxsolidblack;}

#container{width:960px;margin:auto;}

.error{color:red;}

lia{text-decoration:none;}

a{color:red;}ul{margin-left:0;}

a:link{color:red;}a:visted{color:purple;}

ul+p{color:red;}

div#container>ul{border:1pxsolidblack;}

id="container">
 List Item 
 Child 
 List Item 
 List Item 
 List Item 

兼容 IE6+

ul~p{color:red;}

同样也是临近选择器，前面第 7 条 X + Y 选取紧邻在 X 后出现的第一个元素，而 X ~ Y 将选取 X 元素后出现的所有同级元素。上面这段代码将选取 ul 元素后出现的所有同级 p 元素，而不是像 ul + p 这样选取第一个出现的 p 元素。

兼容 IE7+

a[title]{color:green;}

属性选择器 (attributes selector)，根据元素使用的属性进一步缩小选取范围，上面这段代码将选取所有使用了 title 属性的链接，或者 a[title="title content"]{color:green} 再进一步缩小选取范围。

兼容 IE7+

a[href="http://net.tutsplus.com"]{color:#1f6053;/* nettuts green */}

上面这段代码将选取所有跳转到 http://net.tutsplus.com 的链接，这些链接将显示为绿色，其他链接不受影响。

只是这种方式很严格不能相差一个字符，下面将会逐一介绍更灵活的用法。

兼容 IE7+

a[href*="tuts"]{color:#1f6053;/* nettuts green */}

* 表示只要属性值中包含双引号内的内容就满足选取要求，这段代码将选取跳转到 nettuts.com，net.tutsplus.com，或者 tutsplus.com 等链接。

兼容 IE7+

a[href^="http"]{background:url(path/to/external/icon.png)no-repeat;padding-left:10px;}

^ 表示只要属性值以双引号内的内容开头就满足选取要求，这段代码也常用来给页面中所有外部接设定样式。

兼容 IE7+

a[href$=".jpg"]{color:red;}

$ 表示只要属性值以双引号内的内容结尾就满足选取要求，这段代码将选取所有跳转到 jpg 图片的链接。

兼容 IE7+

上面第 14 条提到了如何选取所有跳转到 jpg 图片的链接，若要选取跳转到图片的所有链接可以用下面的方法：

a[href$=".jpg"],a[href$=".jpeg"],a[href$=".png"],a[href$=".gif"]{color:red;}

或者，先给图片链接添加 data- 属性（注：HTML5 Custom Data Attributes）

href="path/to/image.jpg"data-filetype="image"> Image Link 

然后再通过属性选择器选取：

a[data-filetype="image"]{color:red;}

兼容 IE7+

a[data-info~="external"]{color:red;}a[data-info~="image"]{border:1pxsolidblack;}

如果属性值中有用空格分隔的一连串属性值，~ 可以选取其中一个属性值，比如：

href="path/to/image.jpg"data-info="external image"> Click Me, Fool 

借助 ~ 选取包含 external 或者 image 属性值的元素：

/* Target data-info attr that contains the value "external" */a[data-info~="external"]{color:red;}/* And which contain the value "image" */a[data-info~="image"]{border:1pxsolidblack;}

兼容 IE7+

input[type=radio]:checked{border:1pxsolidblack;}

:checked 伪类选择器用于选取所有标记为 checked 的元素，比如单选框 (radio button) 或复选框 (checkbox)。

兼容 IE9+

:before 与 :after 是两个令人兴奋的伪类选择器，几乎每天都有人发明出一些新用法，这里简单介绍一下如何用它清除浮动：

.clearfix:after{content:"";display:block;clear:both;visibility:hidden;font-size:0;height:0;}.clearfix{*display:inline-block;_height:1%;}

这种方式通过 :after 在元素后面添加一块区域，然后将其隐藏，可以弥补 overflow: hidden; 的缺陷。

根据 CSS3 选择器标准，理论上伪类选择器应该使用双冒号，但实际上浏览器也支持单冒号的形式，所以可以继续使用单冒号。

兼容 IE8+

div:hover{background:#e3e3e3;}

最常用的伪类选择器，不多解释了，只是需要注意 IE6 不支持将 :hover 作用于除 a 链接外的其他元素。

a:hover{border-bottom:提示：
                    本文由神整理自网络，如有侵权请联系本站删除！
                    

                    本站声明： 

                    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持； 

                    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
                

                

                

                                            
上一篇：CSS样式子代选择符(大于号 >)使用实例详解CSS选择符之子代选择符
                                                                
下一篇：IE7 设置z-index的覆盖问题的解决方法浅谈原生页面兼容IE9问题的解决方案新版chrome浏览器设置允许跨域的实现css hack之\9和\0就可能对hack IE11\IE9\IE8无效css区分ie8/ie9/ie10/ie11 chrome firefox的代码解决CSS浏览器兼容性问题的4种方案常见的浏览器兼容性问题(小结)border-radius IE8兼容处理的方法浅谈遇到的几个浏览器兼容性问题base64图片在各种浏览器的兼容性处理 对常见的css属性进行浏览器兼容性总结(推荐)