菜单 学习猿地 - LMONKEY

VIP

开通学习猿地VIP

尊享10项VIP特权 持续新增

知识通关挑战

打卡带练!告别无效练习

接私单赚外块

VIP优先接,累计金额超百万

学习猿地私房课免费学

大厂实战课仅对VIP开放

你的一对一导师

每月可免费咨询大牛30次

领取更多软件工程师实用特权

入驻

CSS属性选择器

原创
05/13 14:22 更新

选择具有title属性的元素

<!DOCTYPE html>
<html>
<head>
<style>
    [title]
    {
    color:blue;
    }
</style>
</head>

<body>
    <h2>适用于:</h2>
    <h1 title="Hello world">你好世界</h1>
    <a title="lmonkey" href="https://www.lmonkey.com">学习猿地</a>
    <hr>
    <h2>不适用于:</h2>
    <p>你好!</p>
</body>
</html>

选择标题=一个特定值的元素

<!DOCTYPE html>
<html>
<head>
<style>
    [title=学习猿地]
    {
    border:5px solid green;
    }
</style>
</head>

<body>
    <h2>适用于:</h2>
    <img title="lmonkey" src="https://www.lmonkey.com/_nuxt/img/logo.2a324bb.png" width="247" height="48" />
    <br>
    <a title="lmonkey" href="https://www.lmonkey.com/">学习猿地</a>
    <hr>
    <h2>不适用于:</h2>
    <p title="greeting">嗨!</p>
    <a class="lmonkey" href="https://www.lmonkey.com/">学习猿地</a>
</body>
</html>

选择标题=一个特定值的元素(使用(~)分隔属性和值)

<!DOCTYPE html>
<html>
<head>
<style>
    [title~=hello]
    {
    color:blue;
    } 
</style>
</head>

<body>
    <h2>适用于:</h2>
    <h1 title="hello world">你好世界</h1>
    <p title="student hello">你好 CSS 学员!</p>
    <hr>
    <h2>不适用于:</h2>
    <p title="student">嘿 CSS 学员!</p>
</body>
</html>

选择标题=一个特定值的元素(使用(|)分隔属性和值)

<!DOCTYPE html>
<html>
<head>
<style>
    [lang|=en]
    {
    color:blue;
    }
</style>
</head>

<body>
    <h2>适用于:</h2>
    <p lang="en">你好!</p>
    <p lang="en-us">嗨!</p>
    <p lang="en-gb">小明!</p>
    <hr>
    <h2>不适用于:</h2>
    <p lang="us">嗨!</p>
    <p lang="no">嘿!</p>
</body>
</html>
综合评分:9.9 评分 请对本文进行纠错,及学习过程中有困难疑惑可在此进行讨论