伪对象选择器&&属性选择器

来源：互联网发布：html引入jquery.js 编辑：程序博客网时间：2024/06/05 07:22

伪对象选择器

属性选择器：

属性选择器eg:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>属性选择器</title>    <style>        p[class]{text-align: center}        p[class="red"]{color:red}        p[class="green"]{color:green;font-size: 16px}        p[id*="n"]{color:blue}        /*选择具有id属性且属性值为包含n的字符串的E元素*/        p[class$="w"]{color:blue}        /*选择具有class属性且属性值以w结尾的E元素*/        p[class^="b"]{color:blue}        /*选择具有class属性且属性值以r开头的E元素*/        p[class~="w"]{color:blue}        /*选择具有class属性且属性值为一用空格分隔的字词列表，其中一个等于的w元素*/        p[id|="n"]{color:blue}        /*选择具有class属性且属性值以r开头的E元素,并用连接符"-"分隔的字符串的E元素*/    </style></head><body><p class="red">haohfoahfohsfgfswg</p><p class="yellow">haohfoahfohsfgfswg</p><p class="green">haohfoahfohsfgfswgd</p><p  id="blue">haohfoahfohsfgfswgd</p><p  id="black">haohfoahfohsfgfswgd</p><p  class="black">haohfoahfohsfgfswgd</p><p  class="pure">haohfoahfohsfgfswgd</p><p  class="grey">haohfoahfohsfgfswgd</p></body></html>

伪对象选择器&&属性选择器综合运用：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>伪对象选择器&&属性选择器</title>    <style>        a{           text-decoration: none;            color:blue;        }        a[id]::before{content:url(img/word.jpg)}        a[class*="c"]::before{content:url(img/txt.jpg)}        a[class$="e"]::before{content:url(img/ppt.jpg)}        a[class|="aa"]::before{content:url(img/ppt.jpg)}        a[class~="book"]::before{content:url(img/word.jpg)}        a[class~="excel"]::before{content:url(img/excel.jpg)}    </style></head><body><p><a href=""  id="aa.word">演讲稿写作格式及范例</a></p><p><a href=""  class="aa.doc">演讲稿的基本写作方法</a></p><p><a href="" class="aa.write">演讲稿的写作课件</a></p><p><a href="" class="aa-system">演讲稿的系统分析</a></p><p><a href="" class="fl book">秘书公文写作知识</a></p><p><a href="" class="fl excel">表格表格表格制作</a></p></body></html>

阅读全文

0 0