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

web前端开发2019-01-10 15:46:24

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

答案只需要点击标题下面的蓝色字【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"]...


这些都有助于改进用户在站点上的浏览体验(-. - IE6不支持 忽视之...)


练习题


1、代码如下: <li class="abc">第一行</li><li class="acb">第二行</li><li class="bac">第三行</li><li class="bca">第四行</li>。CSS 为li[class$="b"]{color:#f00;}, 表示第( )行红色?()

A、1

B、2

C、3

D、4


相关文章

【教程】html+css零基础入门教程(一)

【教程】html+css零基础入门教程(二)

【教程】html+css零基础入门教程(三)

【教程】html+css零基础入门教程(四)

【教程】html+css零基础入门教程(五)

【教程】html+css零基础入门教程(六)

【教程】html+css零基础入门教程(七)

【教程】html+css零基础入门教程(八)

【教程】html+css零基础入门教程(九)

【教程】html+css零基础入门教程(十)

【教程】html+css零基础入门教程(十一)

【教程】html+css零基础入门教程(十二)

【教程】html+css零基础入门教程(十三)

【教程】html+css零基础入门教程(十四)

【教程】html+css零基础入门教程之CSS尺寸(十五)

【教程】html+css零基础入门教程之CSS边框(十七)

【教程】html+css零基础入门教程之CSS外边距(十八)

【教程】html+css零基础入门教程之CSS 外边距合并(十九)

【教程】html+css零基础入门教程之CSS 布局(二十)

【教程】html+css零基础入门教程之CSS 定位(二十一)

【教程】html+css零基础入门教程之CSS 相对定位(二十二)

【教程】html+css零基础入门教程之CSS 绝对定位(二十三)

【教程】html+css零基础入门教程之CSS 浮动(二十四)

【教程】html+css零基础入门教程之CSS选择器(二十五)

【教程】html+css零基础入门教程之类选择器详解(二十六)

【教程】html+css零基础入门教程之ID 选择器详解(二十七)

【教程】html+css零基础入门教程之属性选择器详解(二十八)

【教程】html+css零基础入门教程之后代选择器(二十九)

【教程】html+css零基础入门教程之 伪类(三十)


关注我们