属性选择器
id+class结合~
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
.demo a{
float: left;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
background: lightpink;
text-align: center;
color: black;
text-decoration: none;
margin-right: 5px;
font: bold 20px/50px Arial;
}
/*属性名，属性名 = 属性值(正则)
= 绝对等于
*= 包含
^= 以什么什么开头
$= 以什么什么结尾
*/
/*存在id属性的元素 a[]{}*/
/*a[id]{*/
/* background: yellow;*/
/*}*/
/*id=first的元素*/
/*a[id=first]{*/
/* background: yellow;*/
/*}*/
/*class 中有links的元素*/
/*a[class*="links"]{*/
/* background:yellow;*/
/*}*/
/*选中href中以http开头的元素*/
/*a[href^=http]{*/
/* background: yellow;*/
/*}*/
/*选中href中以doc结尾的元素*/
a[href$=doc]{
background: yellow;
}
style>
head>
<body>
<p class="demo">
<a href="https:www.baidu.com" class="links item first" id="first">1a>
<a href="" class="links item active" target="_blank" title="test">2a>
<a href="images/123.html" class="links item">3a>
<a href="images/123.png" class="links item">4a>
<a href="images/123.jpg" class="links item">5a>
<a href="abc" class="links item">6a>
<a href="/a.pdf" class="links item">7a>
<a href="/abc.pdf" class="links item">8a>
<a href="abc.doc" class="links item">9a>
<a href="abcd.doc" class="links item last">10a>
p>
body>
html>