您的位置：首页 > Web前端 > CSS

【教程】html+css零基础入门教程之伪类（三十二）

2017-12-10 00:00 281 查看

问题：我怎么才能收到你们公众号平台的推送文章呢？

答案：只需要点击标题下面的蓝色字【web前端开发】关注即可。

整个基础入门的教程，到今天为止，已经全部分享完，包括教材后面的练习题答案，我也在每个教程后，做了留言公布，具体的教材，请大家自行学习。

E[att]
语法:

E[att]{ sRules }

说明: 选择具有att属性的E元素

a[class]{color:#f00;}

上述表示如果a链接里含class元素, 则显示红色.

E[att="val"]
语法:

E[att="val"]{ sRules }

说明: 选择具有att属性且属性值等于val的E元素。

a[class="external"]{color:#f00;}

上述表示如果a链接的class属性等于external样式的, 则显示红色.

E[att~="val"]
语法:

E[att~="val"]{ sRules }

说明: 选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素。

a[class~="external"]{color:#f00;}

上述表示如果a链接的class属性里含有external样式的, 则显示红色.

E[att|="val"]
语法:

E[att|="val"]{ sRules }

说明: 选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。

li[class|="test3"]{color:#f00;}

上述表示如果li的class属性里含有"test3-"开头的样式, 则显示红色.

E[att^="val"]
语法:

E[att^="val"]{ sRules }

(CSS3)
说明: 选择具有att属性且属性值为以val开头的字符串的E元素。

li[class^="a"]{color:#f00;}

上述表示如果li的class属性里含有以a开头的样式, 则显示红色.

E[att$="val"]
语法:

E[att$="val"]{ sRules }

(CSS3)
说明: 选择具有att属性且属性值为以val结尾的字符串的E元素。

li[class$="a"]{color:#f00;}

上述表示如果li的class属性里含有以a结尾的样式, 则显示红色.

E[att*="val"]
语法:

E[att*="val"]{ sRules }

(CSS3)
说明: 选择具有att属性且属性值为包含val的字符串的E元素。

li[class*="a"]{color:#f00;}

上述表示如果li的class属性里含有以a的样式, 则显示红色.

应用例子
运用属性选择器给外部链接添加外链图标

a[href^="http:"]
{ background: url(images/externalLink.gif) no-repeat right top;...}

这样会突出显示所有外部链接, 但是也会选中使用绝对URL而不是相对URL的内部链接
为了避免这个问题, 需要重新设置指向自己站点的所有链接, 删除它们的外部链接图标:

a[herf^=”http://yoursite.com”]{background-image:none;...}

也可以对邮件链接也进突出显示

a[href^="mailto:"]{background:url(images/email.png) no-repeat right top; ....}

也可以突出显示可以下载的文档摘要,订阅

a[href$=".pdf"]...
a[href$=".exe"]...
a[href$=".rss"]...

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

【教程】html+css零基础入门教程之 伪类（三十二）