css3-review

来源：互联网发布：看图学单词知乎编辑：程序博客网时间：2024/06/08 04:06

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元素

0 0