<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
a{
/*元素外边框右间距为5px*/
margin-right: 5px;
width: 50px;
/*display: block;此元素将显示为块级元素,此元素前后会带有换行符*/
display: block;
border-radius: 5px;
/* border-radius: 5px;给元素添加圆角边*/
/*text-decoration: none 默认。定义标准的文本,作用即去除超链接下划线*/
text-decoration: none;
float: left;
/*float让块级元素并排在一行当中显示*/
text-align: center;
/* text-align: center;文本居中*/
color: yellow;
background: darkgray;
font: bold 20px/50px "Adobe Caslon Pro";
/*font属性从左到右分别为 加粗 字体大小20px 行高50px 字体样式Adobe Caslon Pro
font 简写属性在一个声明中设置所有字体属性。
可设置的属性是(按顺序): "font-style font-variant font-weight font-size/line-height font-family"
font-variant 属性设置小型大写字母的字体显示文本,这意味着所有的小写字母均会被转换为大写,但是
转换出的大写字母与其余文本相比,其字体尺寸更小
font-size和font-family的值是必需的。如果缺少了其他值,默认值将被插入,如果有默认值的话。*/
/*line-height: 50px;*/
/*line-height值与标签高度值保持一致,使得文本高度居中*/
}
/* 属性选择器*/
a[class*="first"]{
/* *=选择class中包含first字段的a标签*/
color: green;
background: darkgoldenrod;
}
a[class~="first"]{
/* ~=选择class中包含独立的first单词的a标签*/
color: darkred;
}
a[id]{
/*选择带有id属性的a标签*/
background: darkblue;
}
a[href^="https"]{
/*选择href中前几个字母为https的a标签*/
background: darkcyan;
}
a[href|="https"]{
/*选择href属性中必须是完整的单词,或者以-分隔开的https开头的a标签*/
background: darkseagreen;
}
a[href$="jpg"]{
/*选择href属性中以jpg结尾的a标签*/
background: darkorchid;
}
</style>
</head>
<body>
<p>
<a href="https-https" class="firstChild love hate">1</a>
<a href="https://www.bilibili.com" class="first love">2</a>
<a href="../src/CSS的导入方式/css/style.css" id="lover">3</a>
<a href="https://www.baidu.com" title="鼠标悬停文字">4</a>
<a href="123.jpg">5</a>
<a href="123.png" class="mid">6</a>
<a href="what.jpg" class="last">7</a>
<a href="a.pdf" class="hate">8</a>
<a href="hhh.doc" class="love hate">9</a>
<a href="sss.pdf" class="first hate">10</a>
</p>
</body>
</html>
CSS - 属性选择器
最新推荐文章于 2024-09-14 17:04:32 发布