<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 属性选择器是通过元素的属性及属性值来选择元素的。 -->
<!-- 1.作用:选择含有指定属性的元素。 语法:[属性名]{}
2.作用:选择含有指定属性及指定属性值的元素。语法:[属性名=属性值]{}
3.作用:选择含有指定属性及指定属性之开头的元素。语法:[属性名^=属性值]{}
4.作用:选择含有指定属性及指定属性值结尾的元素。语法:[属性名$=属性值]
5.作用:选择含有指定属性,只要含有某个属性值的元素。语法:[属性值*=属性名]{} -->
<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>
<h4> -------------------------属性选择器------------------------------------</h4>
<div>
<h1 title="a">one</h1>
<h2 title="ab">two</h2>
<p title="abc">three</p>
<p title="abab">five</p>
<p title="c">six</p>
<p>zero</p>
</div>
</body>
</html>
属性选择器
最新推荐文章于 2024-10-16 11:23:07 发布