前端实用的常见CSS选择器

移动的的前端开发框架 前端界面开发框架d 前端模块化开发框架

1. *

{
margin:0;
padding:0;
}
号这个选择器相信不用多说,大家都会用到,会将页面中的每一个元素都选择到。许多开发者都用它来清空margin和padding。当然也可以用来选择某元素的所有子元素。
如下:

container *{

border:1px solid #ccc;
}
它会选中#container下的所有元素。

2. #X

container {

width:1024px;
height:auto;
margin:auto;
}
相信这个选择器也不用多说,大家都用的非常多的id选择器。d选择器是很严格的并且你没办法去复用它。id选择器具有唯一性。

3. .X

.container {
color:#ccc;
font-size:14px;
}
和上面一样,这个也不用多说,这是个class选择器。它跟id选择器不同的是,它可以定位多个元素。当你想对多个元素进行样式修饰的时候就可以使用class。当你要对某个特定的元素进行修饰那就是用id来定位它。

4. X

a{
color:#ff7500;
}
这个也是非常常用的,如果你想定位页面上所有的某标签,不是通过id或者是class,那就直接使用类型选择器吧。

5. X Y

li a {
text-decoration: none;
}
如果你想更加具体的去定位元素,你可以使用它。例如,假如,你不需要定位所有的a元素,而只需要定位li标签下的a标签?这时候你就需要使用上面这个选择器了。
上述五个选择器都可以兼容ie6+ Firefox Chrome Safari Opera等。

6. X:visited and X:link

a:link {
color:#ff7500;
}
a:visited {
color: gray;
}
这个选择器也是用到的非常的多,我们使用:link这个伪类来定位所有还没有被访问过的链接。另外,我们也使用:visited来定位所有已经被访问过的链接。

7. X+Y

div+p{
color:#ff7500;
}
这个是相邻选择器。它只会选中指定元素的直接后继元素。上面那个例子就是选中了所有div标签后面的第一段,并将它们的颜色都设置为橙黄色。

8. X>Y

div#container > ul {
border: 1px solid #ff7500;
}
这个X>Y和X Y非常相似,两者的差别是X>Y只会选择它的直接子元素。例如:
<div id=”container”>
<ul>
<li>
<ul>
<li> 1 </li>
</ul>
</li>
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
</ul>
</div>

container > ul只会选中id为container的div下的所有直接ul元素。它不会定位到第一个li下的ul元素。

9. X~Y

div~p{
color:#ff7500;
}
这个组合选择器跟X+Y很相似,然后它又不是那么的严格。X+Y选择器只会选择紧挨跟着指定元素的那些元素。而这个选择器,会选择跟在目标元素后面的所有匹配的元素。

10. X

a[title]{
color:#ff7500;
}
上面这种选择器叫做属性选择器,只会选择有title属性的元素,上面的例子就是选中那些有title的a标签。

11. X

a[href=”http://www.blibao.com>]{
color:#ff7500;
}
上面这片代码将会把href属性值为http://www.blibao.com的锚点标签设置为橙黄色,而其他标签则不受影响。这里需要注意的是,值必须用双引号括起来,这样虽然可以使用了,但是因为是固定死的链接,所以实际意义不大。

12. X

a[href*=”foo”] {
color: #ff7500;
}
这里正是上面那个的补充,这样,就指定了foo这个值必须出现在锚点标签的href属性中,不管是foo.cn还是foo.com还是www.foo.cn都可以被选中。但是记得这是个很宽泛的表达方式。如果锚点标签指向的不是foo相关的站点,如果要更加具体的限制的话,那就使用^和$,分别表示字符串的开始和结束。

13. X

a[href^=”http”] {
background: url(xxx.png) no-repeat;
}
大家肯定好奇过,有些站点的锚点标签旁边会有一个外链图标,我也相信大家肯定见过这种情况。这样的设计会很明确的告诉你会跳转到别的网站。上面这个选择器就可以做到,它通常使用在正则表达式中标识开头。如果我们想定位锚点属性href中以http开头的标签,那我们就可以用与上面相似的代码。

14. X

a[href$=”.jpg”] {
color: #ff7500;
}
这次我们又使用了正则表达式$,表示字符串的结尾处。这段代码的意思就是去搜索所有的图片链接,或者其它链接是以.jpg结尾的。但是记住这种写法是不会对gifs和pngs起作用的。
上述选择器都可以兼容ie7+ Firefox Chrome Safari Opera等。

15. X:checked

input[type=radio]:checked {
border: 1px solid #ff7500;
}
上面这个伪类写法可以定位那些被选中的单选框和多选框。

16. X:after

before和after这俩伪类。好像每天大家都能找到使用它们的创造性方法。它们会在被选中的标签周围生成一些内容。
当使用.clear-fix技巧时许多属性都是第一次被使用到里面的。
.clearfix:after {
content: “”;
display: block;
clear: both;
visibility: hidden;
font-size: 0;
height: 0;
}
.clearfix {
*display: inline-block;
_height: 1%;
}
上面这段代码会在目标标签后面补上一段空白,然后将它清除。这个方法你一定得放你的聚宝盆里面。特别是当overflow:hidden方法不顶用的时候,这招就特别管用了。

17. X:hover

div:hover {
background: #ff7500;
}
这个也用到的非常的多,如果想在用户鼠标飘过的地方涂点儿彩,那这个伪类就非常的适合。

18. X:not(selector)

div:not(#container) {
color: #ff7500;
}
这个就是楼主写这篇笔记的缘由所在,楼主就是遇到这个选择器才去查看选择器的种类,发现选择器竟然是如此的多姿多彩啊。
这个选择器取反伪类是相当有用的,假设我们要把除id为container之外的所有div标签都选中。那上面那么代码就可以做到。

19. X:nth-child(n)

li:nth-child(7) {
color:#ff7500;
}
用上面的这个nth-child取子元素也是非常的方便,但是请注意nth-child接受一个整形参数,然后它不是从0开始的。如果你想获取第二个元素那么你传的值就是li:nth-child(2).
我们甚至可以获取到由变量名定义的个数个子标签。例如我们可以用li:nth-child(4n)去每隔3个元素获取一次标签。

20. X:nth-last-child(n)

li:nth-last-child(2) {
color: #ff7500;
}
假设你在一个ul标签中有N多的元素,而你只想获取最后两个个元素,甚至是这样li:nth-child(222),你可以用nth-last-child伪类去代替它。

21. X:nth-of-type(n)

ul:nth-of-type(3) {
border: 1px solid #ff7500;
}
想象一下有5个ul标签。如果你只想对其中的第三个进行修饰,而且你也不想使用id属性,那你就可以使用nth-of-type(n)伪类来实现了,上面的那个代码,只有第三个ul标签会被设置边框。

22. X:nth-last-of-type(n)

ul:nth-last-of-type(3) {
border: 1px solid #ff7500;
}
同样,我们也可以类似的使用nth-last-of-type来倒序的获取标签。

23. X:first-child

ul li:first-child {
border:1px solid #ff7500;
}
这个结构性的伪类可以选择到第一个子标签,你会经常使用它来取出第一个和最后一个的边框。

24. X:last-child

ul li:last-child {
border:1px solid #ff7500;
}
跟first-child相反,last-child取的是父标签的最后一个标签。

25. X:only-child

div p:only-child {
color: #ff7500;
}
说实话,你会发现你几乎都不会用到这个伪类。然而,它是可用的,有会需要它的。它允许你获取到那些只有一个子标签的父标签。就像上面那段代码,只有一个段落标签的div才被着色。

26. X:only-of-type

li:only-of-type {
color: #ff7500;
}
结构性伪类可以用的很聪明。它会定位某标签只有一个子标签的目标。设想你想获取到只有一个子标签的ul标签?

27. X:first-of-type

first-of-type伪类可以选择指定标签的第一个兄弟标签。

如何开发构建前端框架 网页前端开发后端开发框架 前端webapp开发框架

» 本文来自:前端开发者 » 《前端实用的常见CSS选择器》
» 本文链接地址:https://www.rokub.com/5506.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!