前端学习笔记23-属性选择器
这节学的是几个属性选择器,由于容易理解,我也就不过多解释,主要就是学习下怎么表示。
指定属性
我们想设置有title属性的p,可以用属性选择器。直接看代码。
<style>
p[title]{
color: red;
}
</style>```
```html
<p title="abc">少小离家老大回</p>
<p title="abcdef">乡音无改鬓毛衰</p>
<p title="helloabc">儿童相见不相识</p>
<p>笑问客从何处来</p>
<p>秋水共长天一色</p>
<p>落霞与孤鹜齐飞</p>
效果如下图
指定属性和属性值
这次只设置title是abc的。
<style>
p[title=abc]{
color: red;
}
</style>
效果如下图
指定属性,其属性值以指定值开头
我们想选择title属性值是以abc开头的,看代码
<style>
p[title^=abc]{
color: red;
}
</style>
指定属性,其属性值以指定值结尾
这个是结尾的
<style>
p[title$=abc]{
color: red;
}
</style>
指定属性,其属性值含有指定值
设置title的属性值含有e的
<style>
p[title*=e]{
color: red;
}
</style>