CSS选择器笔记
2018-06-27 09:06:31来源:未知 阅读 ()
一、元素选择符
序号 | 选择器 | 含义 |
1. | * | 通用元素选择器,匹配任何元素 |
2. | E | 标签选择器,匹配所有使用E标签的元素 |
3. | .info | class选择器,匹配所有class属性中包含info的元素 |
4. | #footer | id选择器,匹配所有id属性等于footer的元素 |
1. *
* { margin: 0; padding: 0; }
在我们看比较高级的选择器之前,应该认识下这个众所周知的清空选择器。星号呢会将页面上所有每一个元素都选到。许多开发者都用它来清空`margin`和`padding`。当然你在练习的时候使用这个没问题,但是我不建议在生产环境中使用它。它会给浏览器凭添许多不必要的东西。
`*`也可以用来选择某元素的所有子元素。
#container * { border: 1px solid black; }
它会选中`#container`下的所有元素。
2. E
a { color: red; } ul { margin-left: 0; }
如果你想定位页面上所有的某标签,不是通过`id`或者是’class’,直接使用标签选择器。
3. .info
.error { color: red; }
这是个`class`选择器。它跟`id`选择器不同的是,它可以定位多个元素。当你想对多个元素进行样式修饰的时候就可以使用`class`。当你要对某个特定的元素进行修饰那就是用`id`来定位它。
4. #footer
#container { width: 960px; margin: auto; }
在选择器中使用`#`可以用id来定位某个元素。
二、多元素的组合选择器
序号 | 选择器 | 含义 |
5. | E,F | 多元素选择器,同时匹配所有E元素或F元素,E和F之间用逗号分隔 |
6. | E F | 后代元素选择器,匹所有属于E元素后代的F元素,E和F之间用空格分隔 |
7. | E > F | 子元素选择器,匹配所有E元素的子元素F |
8. | E + F | 相邻元素选择器,匹配所有紧随E元素之后的同级元素F |
9. | E~F | 匹配任何在E元素之后的同级F元素 |
5. E,F
a,li { color: red; }
匹配所有的a元素和li元素
6. E F
li a { text-decoration: none; }
只匹配li后面多有的a元素(包括孙子辈)
7. E > F
div#container > ul { border: 1px solid black; }
只匹配li后面多有的a元素(不包括孙子辈)`E F`和`E > F`的差别就是后面这个指挥选择它的直接子元素。看下面的例子:
1 <div id="container"> 2 <ul> 3 <li> List Item</li> 4 <ul> 5 <li> Child </li> 6 </ul> 7 <li> List Item </li> 8 <li> List Item </li> 9 <li> List Item </li> 10 </ul> 11 </div>
`#container > ul`只会选中`id`为’container’的`div`下的所有直接`ul`元素。它不会定位到如第一个`li`下的`ul`元素。
8. E + F
ul + p { color: red; }
这个叫相邻选择器。它指挥选中指定元素的直接后继元素。上面那个例子就是选中了所有`ul`标签后面的第一段,并将它们的颜色都设置为红色。
9. E~F
ul ~ p { color: red; }
`ul + p`选择器只会选择紧挨跟着指定元素的那些元素。而这个选择器,会选择跟在目标元素后面的所有匹配的元素。
三、关系选择器
序号 | 选择器 | 含义 |
10. | E[att] | 匹配所有具有att属性的E元素,不考虑它的值。(注意:E在此处可以省略,比如"[cheacked]"。以下同。) |
11. | E[att=val] | 匹配所有att属性等于"val"的E元素 |
12. | E[att~=val] | 匹配所有att属性具有多个空格分隔的值、其中一个值等于"val"的E元素 |
13. | E[att|=val] | 匹配所有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。 |
14. | E[att^="val"] | 匹配所有att属性以"val"开头的元素 |
15. | E[att$="val"] | 匹配所有att属性以"val"结尾的元素 |
16. | E[att*="val"] | 匹配所有att属性包含"val"字符串的元素 |
10. E[att]
匹配所有具有att属性的E元素,不考虑它的值。
1 <style> 2 a[class]{color:#f00;} 3 </style> 4 </head> 5 <body> 6 <ul> 7 <li><a href="?" class="external">外部链接</a></li> 8 <li><a href="?">内部链接</a></li> 9 <li><a href="?" class="external">外部链接</a></li> 10 <li><a href="?">内部链接</a></li> 11 </ul> 12 </body>
上面的这个例子中,只会选择有class属性的元素。那些没有此属性的将不会被这个代码修饰。
11. E[att=val]
匹配所有att属性等于"val"的E元素
a[class="external"]{color:#f00;}
上面这片代码将会把`class`属性值为`external`的标签设置为红色,而其他标签则不受影响。
12. E[att~=val]
匹配所有att属性具有多个空格分隔的值、其中一个值等于"val"的E元素
<style> a[class~="external"]{color:#f00;} </style> </head> <body> <ul> <li><a href="?" class="external txt">外部链接</a></li> <li><a href="?" class="txt">内部链接</a></li> <li><a href="?" class="external txt">外部链接</a></li> <li><a href="?" class="txt">内部链接</a></li> </ul> </body>
这个`~`符号可以定位那些某属性值是空格分隔多值的标签(因此只有外部链接是红色字体)。
13. E[att|=val]
选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。
1 <style> 2 li[class|="test3"]{color:#f00;} 3 </style> 4 </head> 5 <body> 6 <ul> 7 <li class="test1-abc">列表项目1</li> 8 <li class="test2-abc">列表项目2</li> 9 <li class="test3-abc">列表项目3</li> 10 <li class="test4-abc">列表项目4</li> 11 <li class="test5-abc">列表项目5</li> 12 <li class="test6-abc">列表项目6</li> 13 </ul> 14 </body>
因此只有项目3为红色。
14. E[att^="val"]
1 <body> 2 <ul> 3 <li class="abc">列表项目1</li> 4 <li class="acb">列表项目2</li> 5 <li class="bac">列表项目3</li> 6 <li class="bca">列表项目4</li> 7 <li class="cab">列表项目5</li> 8 <li class="cba">列表项目6</li> 9 </ul> 10 </body>
li[class^="a"]{color:#f00;}
选择具有class属性且属性值为以a开头的字符串的E元素(因此只有项目1、2为红色)。
15. E[att$="val"]
匹配所有att属性以"val"结尾的元素
li[class$="a"]{color:#f00;}
选择具有class属性且属性值为以a结尾的字符串的E元素(项目4、6为红色)。
16. E[att*="val"]
匹配所有att属性包含"val"字符串的元素
li[class*="a"]{color:#f00;}
因为class的属性中都含有字母a所以结果均为红色。
四、伪类选择器
17. | E:link | 匹配所有未被点击的链接 |
18. | E:visited | 匹配所有已被点击的链接 |
19. | E:hover | 匹配鼠标悬停其上的E元素 |
20. | E:active | 匹配鼠标已经其上按下、还没有释放的E元素 |
21. | E:first-child | 匹配父元素的第一个子元素E |
22. | E:last-child | 匹配父元素的最后一个子元素E |
23. | E:only-child | 匹配父元素仅有的一个子元素E |
24. | E:nth-child(n) | 匹配父元素的第n个子元素E |
25. | E:nth-last-child(n) | 匹配父元素的倒数第n个子元素E |
26. | E:first-of-type | 匹配同类型中的第一个同级兄弟元素E |
27. | E:last-of-type | 匹配同类型中的最后一个同级兄弟元素E |
28. | E:only-of-type | 匹配同类型中的唯一的一个同级兄弟元素E |
29. | E:nth-of-type(n) | 匹配同类型中的第n个同级兄弟元素E |
30. | E:nth-last-of-type(n) | 匹配同类型中的倒数第n个同级兄弟元素E |
17. E:link
设置超链接a在未被访问前的样式。
1 <ul> 2 <li><a href="?" class="external">外部链接</a></li> 3 <li><a href="?">内部链接</a></li> 4 <li><a href="?" class="external">外部链接</a></li> 5 <li><a href="?">内部链接</a></li> 6 </ul>
a:link{color:#03c;} .external:link{color:#f00;}
运行结果:外部链接为红色;内部链接为蓝色
18. E:visited
设置超链接a在其链接地址已被访问过时的样式。
19. E:hover
设置元素在其鼠标悬停时的样式。
20. E:active
设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式。
21. E:first-child
匹配父元素的第一个子元素E。
1 <body> 2 <ul> 3 <li>test1</li> 4 <li>test2</li> 5 <li>test3</li> 6 <li>test4</li> 7 <li>test5</li> 8 </ul> 9 </body>
li:first-child{color:#f00;}
结果只有列表第一条信息test1为红色
22. E:last-child
匹配父元素的最后一个子元素E。
li:last-child{color:#f00;}
结果只有列表最后一条信息test5为红色
23. E:only-child
匹配父元素仅有的一个子元素E。
1 <ul> 2 <li>test1</li> 3 </ul> 4 <ul> 5 <li>test2</li> 6 <li>test3</li> 7 <li>test4</li> 8 </ul>
li:only-child{color:#f00;}
结果只有列表test1为红色
24. E:nth-child(n)
匹配父元素的第n个子元素E。
li:nth-child(3){color:#f00;}
结果只有列表test3为红色
25. E:nth-last-child(n)
匹配父元素的倒数第n个子元素E。
li:nth-last-child(3){color:#f00;}
结果只有列表test3为红色
26. E:first-of-type
匹配同类型中的第一个同级兄弟元素E。
1 <div class="test"> 2 <div><b>我是一个div元素</b></div> 3 <p>这是段落1</p> 4 <p>这是段落2</p> 5 <p>这是段落3</p> 6 <p>这是段落4</p> 7 <p>这是段落5</p> 8 </div>
p:first-of-type{color:#f00;}
结果只有这是段落1为红色。
27. E:last-of-type
匹配同类型中的最后一个同级兄弟元素E。
p:last-of-type{color:#f00;}
结果只有这是段落5为红色。
28. E:only-of-type
匹配同类型中的唯一的一个同级兄弟元素E。
b:only-of-type{color:f00;}
结果只有我是一个div元素为红色。
29. E:nth-of-type(n)
匹配同类型中的第n个同级兄弟元素E,n 可以代表数字也可以代表字母。
p:nth-of-type(2){color:#f00;}
结果只有这是段落2为红色。
n为odd时表示奇数;n为even表示偶数;
p:nth-of-type(odd){color:#f00;}
结果:段落1、3、5显示为红色。
p:nth-of-type(even){color:#f00;}
结果:段落2、4显示为红色。
30. E:nth-last-of-type(n)
匹配同类型中的倒数第n个同级兄弟元素E,n 可以代表数字也可以代表字母。。
p:nth-last-of-type(2){color:#f00;}
结果:段落4显示为红色。
n为odd时表示奇数;n为even表示偶数;
p:nth-last-of-type(odd){color:#f00;}
结果:段落1、3、5显示为红色。
p:nth-last-of-type(even){color:#f00;}
结果:段落2、4显示为红色。
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:用CSS3产生动画效果
下一篇:HTML+CSS基础
- DIV居中的经典方法 2020-06-13
- CSS中的float和margin的混合使用 2020-06-11
- Html/css 列表项 区分列表首尾 2020-06-11
- css与javascript重难点,学前端,基础不好一切白费! 2020-06-11
- ie8下透明度处理 2020-06-11
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash