CSS - 属性选择器 - 代码天地

<!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 - 属性选择器

猜你喜欢
