2022.4.6 屬性選擇器
阿新 • • 發佈：2022-04-07
屬性選擇器（常用）
id + 類 結合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>屬性選擇器</title>
<style>
/* demo下的所有a標籤*/
.demo a{
float: left;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
background: #2700ff;
text-align: center;
color: gainsboro;
text-decoration: none;
margin-right: 5px;
font: bold 20px/50px Arial;
}
/*[]中可以是屬性名、屬性名=屬性值(可以是正則表示式)
= 絕對等於
*= 包含這個屬性值
^= 以這個開頭
$= 以這個結尾
*/
/*a標籤中帶有id屬性的 1變*/
a[id]{
background: yellow;
}
/*a標籤中id=first的 不帶引號， id只能唯一 1變*/
a[id=first]{
background: blue;
}
/*a標籤中class屬性中包含links的 帶引號，class有多個 全部變 */
a[class*="links"]{
background: yellowgreen;
}
/*a標籤中href屬性以http開頭的 12變*/
a[href^=http]{
background: #5dff4c;
}
/*a標籤中href屬性以pdf開頭的 78變*/
a[href$=pdf]{
background: #5dff4c;
}
</style>
</head>
<body>
<p class="demo">
<a href="http://www.baidu.com" class="links item first" id="first">1</a>
<a href="http://blog.kuangstudy.com" class="links item active" target="_blank" title="test">2</a>
<a href="images/123.html" class="links item">3</a>
<a href="images/123.png" class="links item">4</a>
<a href="images/123.jpg" class="links item">5</a>
<a href="abc" class="links item">6</a>
<a href="/a.pdf" class="links item">7</a>
<a href=