CSS3符号
元素^=g (修改元素为g开头的内容)
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> p {height: 30px;border: 1px solid #000;} p[cat^=g] {background: pink;} </style> </head> <body> <p cat="bleo old">leo</p> <p cat="bdp">杜鹏</p> <p cat="bzM">子鼠</p> <p cat="gxm">小美</p> </body> 元素$=M (修改元素M结尾的内容) <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> p{height: 30px;border: 1px solid #000;} p[cat$=M] {background: #CC0;} </style> </head> <body> <p cat="bleo old">leo</p> <p cat="bdp">杜鹏</p> <p cat="bzM">子鼠</p> <p cat="gXM">小美</p> </body>
元素|=b (修改元素单独为b的内容)
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> p {height: 30px;border: 1px solid #000;} p[cat|=b] {background: #C3C;} </style> </head> <body> <p cat="b-leo">leo</p> <p cat="bleo">杜鹏</p> <p cat="b-leo">子鼠</p> <p cat="g-xm">小美</p> <p cat="b">无名氏</p> </body>元素*=d (修改元素含有d的内容)
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> p {height: 30px;border: 1px solid #000;} p[cat*=d] {background: #C3C;} </style> </head> <body> <p cat="bleo old">leo</p> <p cat="bdp">杜鹏</p> <p cat="bzM">子鼠</p> <p cat="gxm">小美</p> </body>结构伪类选择器语法
选择器 功能描述 E ： first-child 作为父元素的第一个子元素的E元素 E ： last-child 作为父元素的最后一个子元素的E元素 E ： root E F：nth-child（n） 选中的F元素是E元素的第n个子元素 E F： nth-last-child（n） 选中的F元素是E元素的倒数第n个子元素 E ： nth-of-type（n） 选择父元素内具有指定类型的第n个E元素 E ： nth-last-of--type（n） 选择父元素内具有指定类型的倒数第n个E元素 E ： first-of-type 选择父元素内具有指定类型的第1个E元素 E ： last-of-type 选择父元素内具有指定类型的倒数第1个E元素 E ： only-child 选择父元素内只包含一个子元素,且该元素是E元素 E ： only-of-type 选择父元素内只包含一个类型的子元素，且该元素是E元素 E ： empty 选择没有子元素的元素
文本新增伪类
选择器 功能描述 E ：： first-letter 选择文本块的第一个字母 E ：： first-line 选择文本快的第一行 E ：： before 和E ：： after 主要用于清除浮动 E ：： selection 选中的E元素
