0
点赞
收藏
分享

微信扫一扫

035.属性选择器( = 是绝对等于 , *= 是包含这个元素 , ^= 以这个开头 , $= 以这个结尾)

1.属性名,属性名=属性值(正则)   = 是绝对等于  *= 是包含这个元素  ^= 以这个开头  $= 以这个结尾

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>2021-11-23</title>
<style type="text/css">
.demo a{
float: left;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
background: #0000FF;
text-align: center;
color: #7CFC00;
text-decoration: none;
margin-right: 5px;
font: bold 20px/50px Arial;
}
/*
1.属性名,属性名=属性值(正则)
= 是绝对等于
*= 是包含这个元素
^= 以这个开头
$= 以这个结尾
*/

/*存在ID属性的元素把他选中 a[]{}
a[id=first]{
background: #FF0000;
}

a[id]{
background: #FF0000;
}
*/


/* class 中有links的元素
a[class*="links"]{
background: #FF0000;
} */


/* 选中href中以http开头的元素
a[href^=http]{
background: #000000;
} */


/*以html结尾*/
a[href$=html]{
background: #FFFFFF;
}



</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="拼多多首页导航布局.html" class="links item ">3</a>
<a href="#" href="拼多多首页导航布局.html" class="links item ">4</a>
<a href="#" class="links item ">5</a>
<a href="#" class="links item ">6</a>
<a href="#" class="links item ">7</a>
<a href="#" class="links item ">8</a>
<a href="#" class="links item ">9</a>
<a href="#" class="links item ">10</a>
</p>
</body>
</html>

 



举报

相关推荐

CSS元素选择器是怎样运作的

0 条评论