css3-1属性选择器课案.docx

属性选择器E[attr]只使用属性名，但没有确定任何属性值例如：stylep{height:30px;border:1px solid #000;}p[miaov]{background:red;}/style/headbodyp miaov=leoleo/p p miaov=dp杜鹏/p p miaov=zM子鼠/p p miaov=xm小美/p/bodyE[attr=value]指定属性名，并指定了该属性的属性值stylep{height:30px;border:1px solid #000;}p[miaov=leo]{background:red;}/style/headbodypmiaov=leoleo/p p miaov=dp杜鹏/p p miaov=zM子鼠/p p miaov=xm小美/p/body/htmlE[attr~=value]指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“?”不能不写stylep{height:30px;border:1px solid #000;}p[miaov~=old]{background:red;}/style/headbodyp miaov=leo oldleo/p p miaov=dp杜鹏/p p miaov=zM子鼠/p p miaov=xm小美/p/bodyE[attr|=value]指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn）stylep{height:30px;border:1px solid #000;}p[miaov|=b]{background:#C3C;}/style/headbodyp miaov=b-leoleo/p p miaov=bleo杜鹏/p pmiaov=b-leo子鼠/p p miaov=g-xm小美/p p miaov=b无名氏/p/bodyE[attr^=value]指定了属性名，并且有属性值，属性值是以value开头的stylep{height:30px;border:1px solid #000;}p[miaov^=g]{background:pink;}/style/headbodyp miaov=bleo oldleo/p p miaov=bdp杜鹏/p p miaov=bzM子鼠/p p miaov=gxm小美/p/bodyE[attr$=value]指定了属性名，并且有属性值，而且属性值是以value结束的stylep{height:30px;border:1px solid #000;}p[miaov$=M]{background:#CC0;}/style/headbodyp miaov=bleo oldleo/p p miaov=bdp杜鹏/p p miaov=bzM子鼠/p p miaov=gXM小美/p/bodyE[attr*=value]指定了属性名，并且有属性值，而且属值中包含了valuestylep{height:30px;border:1px solid #000;}p[miaov*=d]{background:#C3C;}/style/headbodyp miaov=bleo oldleo/p p miaov=bdp杜鹏/p p miaov=bzM子鼠/p p miaov=gxm小美/p/body结构性伪类伪类选择器是CSS中已经定义好的选择器，不能随便起名。利用文档结构树实现元素过滤，通过文档结构的相互关系来匹配特定的元素，从而减少文档内Class属性和ID属性的定义，使得文档更加简洁。E:nth-child(n) 表示E父元素中的第n个字节点p:nth-child(odd){background:red}/*匹配奇数行*/p:nth-child(even){background:red}/*匹配偶数行*/p:nth-child(2n){background:red}//匹配偶数行p:nth-child(2n+1){background:red}//匹配奇数行stylep{height:30px;border:1px solid #000;}body *:nth-child(2){background:red;}/style/headbodypp1/ph1h1/h1pp2/ph1h2/h1pp3/ph1h3/h1pp4/ppp5/p/bodyE:nth-last-child(n) 表示E父元素中的第n个字节点，从后向前计算与1是计算顺序相反的选择器E:nth-of