CSS选择器

来源：互联网发布：阿里云播放器编辑：程序博客网时间：2024/06/06 14:06

参考博客：WEB前端开发，网址：http://www.cnblogs.com/webblog/archive/2009/07/07/1518274.html

1 常见的选择器有id #myid--#info { background:#ff0; }---p#info { background:#ff0; }

2 类选择器 .myclassname---.info { background:#ff0; }---p.info { background:#ff0; }

3 标签选择器 div,p,h1-----p { font-size:2em; }

4 子选择器ul>li----div > strong { color:#f00; }

5 后代选择器 li a----#nav li { display:inline; }---li a { font-weight:bold; }

6 相邻选择器h1+p ------ p + p { color:#f00; }

7 通配符 * ------匹配任何元素，* { margin:0; padding:0; }

8 属性选择器a[rel="external"]---p[title] { color:#f00; }---div[class=”error”] { color:#f00; }---

注：E[att~=val] ---匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素---td[class~=”name”] { color:#f00; }

9 伪类选择器(a:hover,li:nth-child)

E:first-child-匹配父元素的第一个子元素-p:first-child { font-style:italic; }

E:link-匹配所有未被点击的链接 E:visited匹配所有已被点击的链接 E:hover匹配鼠标悬停其上的E元素

E:active匹配鼠标已经其上按下、还没有释放的E元素 E:focus匹配获得当前焦点的E元素

。。。。

E:root匹配文档的根元素，对于HTML文档，就是HTML元素

E:nth-child(n)匹配其父元素的第n个子元素，第一个编号为1

E:nth-last-child(n)匹配其父元素的倒数第n个子元素，第一个编号为1

0 0