文章目录
一、属性选择器是什么？
属性选择器是通过元素的属性及属性值来选择元素的。下面介绍属性选择器的五种用法。
二、属性选择器
1.第一种用法
作用：选择含有指定属性的元素。
语法：[属性名]{}
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
/* 第一种用法：选择含有指定属性的元素。
语法：[属性名]{} */
/*选择属性名title,设置字体颜色红色 */
[title]{
color:red;
}
</style>
</head>
<body>
<h1 title="a">《出塞》</h1>
<h2 title="ab">唐·王昌龄</h2>
<p title="abc">秦时明月汉时关，</p>
<p title="abab">万里长征人未还。</p>
<p title="c">但使龙城飞将在，</p>
<p>不教胡马度阴山。</p>
</body>
</html>运行结果如下：
![css属性选择器怎么用_属于jquery属性选择器的是[通俗易懂]](https://img.bianchenghao.cn/app/bianchenghao_cn/ed20d7a7b60c463790ca996d89349681.png "css属性选择器怎么用_属于jquery属性选择器的是[通俗易懂]插图")
2.第二种用法
作用：选择含有指定属性及指定属性值的元素。
语法：[属性名=属性值]{}
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
/* 第一种方法：选择含有指定属性的元素。
语法：[属性名]{} */
/*选择属性名为title,设置字体颜色红色 */
[title]{
color:red;
}
/* 第二种用法：选择含有指定属性及指定属性值的元素。
语法：[属性名=属性值]{} */
/*选择属性名为title和属性值为ab的元素 ,设置字体颜色绿色 */
[title=ab]{
color: green;
}
</style>
</head>
<body>
<h1 title="a">《出塞》</h1>
<h2 title="ab">唐·王昌龄</h2>
<p title="abc">秦时明月汉时关，</p>
<p title="abab">万里长征人未还。</p>
<p title="c">但使龙城飞将在，</p>
<p>不教胡马度阴山。</p>
</body>
</html>运行结果如下：
![css属性选择器怎么用_属于jquery属性选择器的是[通俗易懂]](https://img.bianchenghao.cn/app/bianchenghao_cn/fb09d961c23d44c98c00369d79906ac6.png "css属性选择器怎么用_属于jquery属性选择器的是[通俗易懂]插图2")
3.第三种用法
作用：选择含有指定属性及指定属性之开头的元素。
语法：[属性名^=属性值]{}
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
/* 第一种方法：选择含有指定属性的元素。
语法：[属性名]{} */
/*选择属性名为title,设置字体颜色红色 */
[title]{
color:red;
}
/* 第二种用法：选择含有指定属性及指定属性值的元素。
语法：[属性名=属性值]{} */
/*选择属性名为title和属性值为ab的元素 ,设置字体颜色绿色 */
[title=ab]{
color: green;
}
/* 第三种用法：选择含有指定属性及指定属性之开头的元素。
语法：[属性名^=属性值]{} */
/* 选择属性名为title和属性值以ab开头的元素，设置背景色黄色 */
[title^=ab]{
background-color: yellow;
}
</style>
</head>
<body>
<h1 title="a">《出塞》</h1>
<h2 title="ab">唐·王昌龄</h2>
<p title="abc">秦时明月汉时关，</p>
<p title="abab">万里长征人未还。</p>
<p title="c">但使龙城飞将在，</p>
<p>不教胡马度阴山。</p>
</body>
</html>运行结果如下：
![css属性选择器怎么用_属于jquery属性选择器的是[通俗易懂]](https://img.bianchenghao.cn/app/bianchenghao_cn/8fa60e28e2974414bb2a4e9951248956.png "css属性选择器怎么用_属于jquery属性选择器的是[通俗易懂]插图4")
4.第四种用法
作用：选择含有指定属性及指定属性值结尾的元素。
语法：[属性名$=属性值]
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
/* 第一种方法：选择含有指定属性的元素。
语法：[属性名]{} */
/*选择属性名为title,设置字体颜色红色 */
[title]{
color:red;
}
/* 第二种用法：选择含有指定属性及指定属性值的元素。
语法：[属性名=属性值]{} */
/*选择属性名为title和属性值为ab的元素 ,设置字体颜色绿色 */
[title=ab]{
color: green;
}
/* 第三种用法：选择含有指定属性及指定属性之开头的元素。
语法：[属性名^=属性值]{} */
/* 选择属性名为title和属性值以ab开头的元素，设置背景色黄色 */
[title^=ab]{
background-color: yellow;
}
/* 第四种用法：选择含有指定属性及指定属性值结尾的元素。
语法：[属性名$=属性值] */
/* 选择属性名为title和属性值以ab结尾的元素，设置字体为30px */
[title$=ab]{
font-size: 30px;
}
</style>
</head>
<body>
<h1 title="a">《出塞》</h1>
<h2 title="ab">唐·王昌龄</h2>
<p title="abc">秦时明月汉时关，</p>
<p title="abab">万里长征人未还。</p>
<p title="c">但使龙城飞将在，</p>
<p>不教胡马度阴山。</p>
</body>
</html>运行结果如下：
![css属性选择器怎么用_属于jquery属性选择器的是[通俗易懂]](https://img.bianchenghao.cn/app/bianchenghao_cn/c48d84693c044e7d97eb02ed203400c4.png "css属性选择器怎么用_属于jquery属性选择器的是[通俗易懂]插图6")
5.第五种用法
作用：选择含有指定属性，只要含有某个属性值的元素。
语法：[属性值*=属性名]{}
运行代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
/* 第一种方法：选择含有指定属性的元素。
语法：[属性名]{} */
/*选择属性名为title,设置字体颜色红色 */
[title]{
color:red;
}
/* 第二种用法：选择含有指定属性及指定属性值的元素。
语法：[属性名=属性值]{} */
/*选择属性名为title和属性值为ab的元素 ,设置字体颜色绿色 */
[title=ab]{
color: green;
}
/* 第三种用法：选择含有指定属性及指定属性之开头的元素。
语法：[属性名^=属性值]{} */
/* 选择属性名为title和属性值以ab开头的元素，设置背景色黄色 */
[title^=ab]{
background-color: yellow;
}
/* 第四种用法：选择含有指定属性及指定属性值结尾的元素。
语法：[属性名$=属性值] */
/* 选择属性名为title和属性值以ab结尾的元素，设置字体为30px */
[title$=ab]{
font-size: 30px;
}
/* 第五种用法：选择含有指定属性，只要含有某个属性值的元素。
语法：[属性值*=属性名]{} */
/* 选择属性名为title和属性值含有c的元素，设置背景色为绿色 */
[title*=c]{
background-color: green;
}
</style>
</head>
<body>
<h1 title="a">《出塞》</h1>
<h2 title="ab">唐·王昌龄</h2>
<p title="abc">秦时明月汉时关，</p>
<p title="abab">万里长征人未还。</p>
<p title="c">但使龙城飞将在，</p>
<p>不教胡马度阴山。</p>
</body>
</html>运行结果如下：
![css属性选择器怎么用_属于jquery属性选择器的是[通俗易懂]](https://img.bianchenghao.cn/app/bianchenghao_cn/a90026a42a8c4774871307a51c8526fd.png "css属性选择器怎么用_属于jquery属性选择器的是[通俗易懂]插图8")
总结
以上就是今天要讲的内容，本文仅仅简单介绍了属性选择器的使用，属性选择器的用法及语法应该掌握，后面将继续介绍其它选择器。
今天的文章css属性选择器怎么用_属于jquery属性选择器的是[通俗易懂]分享到此就结束了，感谢您的阅读。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/78508.html
