CSS-属性选择器(常用-重点)
以下属性都可以写在stype中的选择器上:
float: left;:向左浮动
display: block;:陈列:变成块元素
height: 50px;:高度:50px
width: 50px;:宽度:50px
border-radius: 10px;:边框-半径:10px,能产生边框圆角效果
background: #2700ff;:背景颜色
text-align: center;:文字居中
color: gainsboro;文字颜色
text-decoration: none;:清除下划线
margin-right:5px;:每个元素往右边偏移5px
font: bold 20px/50px Arial;:bold:粗体,字体大小20px 行高:50px Arial:使用的字体
正则表达式:
=:等于绝对等于 *=:等于包含这个元素 ^=:以这个开头
$=:以这个结尾
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>属性选择器</title> <style> .demo a{ float: left; display: block; height: 50px; width: 50px; border-radius: 10px; background:#2780ff; text-align: center; color: gainsboro; text-decoration: none; margin-right: 5px; font: bold 20px/ 50px Arial; } /*选中存在id属性的元素 属性选择器结构:标签[属性类型]{} 方法1:a标签中带有id属性的 a[id]{ background:yellow;} */ /*方法2::标签中带有id属性并且值为first,详细到id的值,值的话可以使用正则表达式 a[id=first]{ background:yellow; */ /*class中有Links的元素 =:等于绝对等于 *=:等于包含这个元素 ^=:以这个开头 $=:以这个结尾 */ a[class*="links"]{ background:yellow; } /*选中href中以http开头的元素*/ a[href^=http]{ background:red; } /*选中href中以pdf结尾的元素*/ a[href$=pdf]{ background:red; } } </style> </head> <body> <p class="demo"> <!-- 在给属性起名称时,空格再写另一个名称时,代表这个属性有多名字,比如:class="links item firs",这个class有三个名称--> <a href="http://www.baidu.com" class="links item firs" id="first">1</a> <a href="" 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="abc" class="links item">5</a> <a href="/abc.pdf" class="links item">6</a> <a href="abd.doc" class="links item">7</a> </p> </body> </html>