摘要:本篇教程探讨了HTML5+CSS3从入门到精通 CSS3选择器教程,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 。
本篇教程探讨了HTML5+CSS3从入门到精通 CSS3选择器教程,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 。
<
1.属性选择器
HTML
<p name="a">用于选取带有指定属性的元素</p>
<p name="line">用于选取带有指定属性和值的元素</p>
<p name="line1 line2">此属性值是一个词列表,并且以空格隔开,其中词列表中包含了一个value词</p>
<p name="b">用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。</p>
<p name="mline">匹配属性值以指定值开头的每个元素</p>
<p name="mlines">匹配属性值以指定值结尾的每个元素</p>
<p name="mliKnes">选择器匹配属性值包含指定值的每个元素</p>
CSS
/*
css属性选择器
[attr]用于选取带有指定属性的元素
[attr=value]用于选取带有指定属性和值的元素
[attr~=value]此属性值是一个词列表,并且以空格隔开,其中词列表中包含了一个value词
[attr|=value]用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。
[attr^=value]匹配属性值以指定值开头的每个元素
[attr$=value]匹配属性值以指定值结尾的每个元素
[attr*=value]选择器匹配属性值包含指定值的每个元素
*/
p{
border: 1px solid #000;
width: 500px;
}
p[name]{
background: pink;
}
p[name=line]{
background: red;
}
p[name~=line2]{
background: #00CC99;
}
p[name|=b]{
background: #880000;
}
p[name^=m]{
background: #6347ED;
}
p[name$=s]{
background: yellow;
}
p[name*=K]{
background: fuchsia;
}
本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端HTML5/CSS3频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号