大家好,给大家分享一下CSS的属性选择器
写十个标签:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p class="demo">
<a href="">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>
<a href="">5</a>
<a href="">6</a>
<a href="">7</a>
<a href="">8</a>
<a href="">9</a>
<a href="">10</a>
</body>
</html>
看结果:
加属性:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p class="demo">
<a href="http://www.baidu.com"class="item first" id="first">1</a>
<a href=""class="links item active" target="_blank"title="test">2</a>
<a href="images/java关键字.png"class="links item ">3</a>
<a href="images/java关键字.png">4</a>
<a href="images/java关键字.png">5</a>
<a href="images/java关键字.png">6</a>
<a href="images/java关键字.png">7</a>
<a href="images/java关键字.png">8</a>
<a href="images/java关键字.png">9</a>
<a href="images/java关键字.png">10</a>
</body>
</html>
1 里面写了个到百度的超链接:
写css代码:
(属性选择器)
<style>
.demo a{
float:left ;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
background: green;
text-align: center;
color: aqua;
text-decoration: none;
margin-right: 5px;
font: bold 20px/50px Arial;
}
</style>
整体代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.demo a{
/*调节属性参数*/
float:left ; /*浮动:想做*/
display: block; /*变成方块元素*/
height: 50px; /*高度调节*/
width: 50px; /*调节宽度*/
border-radius: 10px; /*圆角边框*/
background: green; /*背景颜色*/
text-align: center; /*文字居中对齐*/
color: aqua; /*文字颜色*/
text-decoration: none; /*去掉下划线*/
margin-right: 5px; /*元素向右进行偏移*/
font: bold 20px/50px Arial; /*字体大小和行高*/
}
</style>
</head>
<body>
<p class="demo">
<a href="http://www.baidu.com"class="item first" id="first">1</a>
<a href=""class="links item active" target="_blank"title="test">2</a>
<a href="images/java关键字.png"class="links item ">3</a>
<a href="images/java关键字.png">4</a>
<a href="images/java关键字.png">5</a>
<a href="images/java关键字.png">6</a>
<a href="images/java关键字.png">7</a>
<a href="images/java关键字.png">8</a>
<a href="images/java关键字.png">9</a>
<a href="images/java关键字.png">10</a>
</body>
</html>
结果:
a[id]{
background: yellow;
/*存在id属性的元素 a[][] */
下一个:
a[id=first]{
background: brown;
/* id=first的元素设定 */
}
显示效果:
a[href^=http]{
background: burlywood;
/* 选中herf中以http开头的元素*/
}
显示效果:
a[href$=png]{
background: deeppink;
}
效果
完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.demo a{
float:left ;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
background: green;
text-align: center;
color: aqua;
text-decoration: none;
margin-right: 5px;
font: bold 20px/50px Arial;
/* 属性名:属性名=属性值(正则)*/
/* = 绝对等于*/
/* *=包含这个字符*/
/* ^=以这个开头 */
/* $= 以这个结尾 */
/*存在id属性的元素 a[][] */
/*}*/
/*a[id]{*/
/* background: yellow;*/
/* !*存在id属性的元素 a[][] *!*/
/*}*/
/*a[id=first]{*/
/*background: brown;*/
/*!* id=first的元素设定 *!*/
/*}*/
}
a[href$=png]{
background: deeppink;
}
/* 选中herf中以http开头的元素*/
/*a[class="links item first"]{*/
/* background: red;*/
/*}*/
/*a[href^=http]{*/
/* background: burlywood;*/
/*!* 选中herf中以http开头的元素*!*/
/*}*/
</style>
</head>
<body>
<p class="demo">
<a href="http://www.baidu.com"class=" links item first" id="first">1</a>
<a href=""class="links item active" target="_blank"title="test">2</a>
<a href="images/java关键字.png"class="links item ">3</a>
<a href="images/java关键字.png">4</a>
<a href="images/java关键字.png">5</a>
<a href="images/java关键字.png">6</a>
<a href="images/java关键字.png">7</a>
<a href="images/java关键字.png">8</a>
<a href="images/java关键字.png">9</a>
<a href="images/java关键字.png">10</a>
</body>
</html>
属性选择器是很常用的(标签定位某一个属性)
选择器是前端当中很重要的部分
好了,有关css属性选择器就到这里了,谢谢大家