【CSS】尝试性使用一下css容易混淆的属性选择器

属性选择器(拷贝自菜鸟教程)

[attribute~=value]	[title~=flower]	选择标题属性包含单词"flower"的所有元素
[attribute\|=language]	[lang\|=en]	选择 lang 属性等于 en，或者以 en- 为开头的所有元素
[attribute^=value]	a[src^="https"]	选择每一个src属性的值以"https"开头的元素
[attribute$=value]	a[src$=".pdf"]	选择每一个src属性的值以".pdf"结尾的元素
[attribute*=value]	a[src*="runoob"]	选择每一个src属性的值包含子字符串"runoob"的元素

栗子


html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        img{
            width: 100px;
        }
 
        img[src$='.jpg']{
            width: 150px;
        }
 
        img[src^='./']{
            border: 1px solid red;
        }
 
        /*[attribute~=value]只对属性值为英文句子的属性生效*/
        div[title~='name']{
            color: red;
        }
 
        div[name~='李逍遥']{
            color: black;
        }
 
        img[src*='5b']{
            width: 500px;
        }
        /*[attribute|=value]只对属性值使用了连词符号的属性,中英文都可以()*/
        div[hi|=你好]{
            color:blue;
        }
 
        div[do|=you]{
            font: 20px '方正姚体';
        }
    style>
head>
<body>
    <img src="1.属性选择器.html" />
    <img src="./asset/img/5b75696a1aaf0.jpg" />
    <img src="./asset/img/5b75696ab7a0d.jpg" />
    <div title="my name is gh" name="我是李逍遥" hi="你好-世界" do="you-do">我系渣渣辉div>
body>
html>

相关阅读:
手把手教你安装VSCode（附带图解步骤）
JDBC:获取数据库连接（一）
基于jquery开发的Windows 12网页版
UE5 C++ 斯坦福 1
Guitar Pro2024吉他软件好不好用？
SpringBoot 官方推荐，连接池，太快了！
idea未知的解决方案
控制器接受广播信息并反馈IP的python服务，和一个window上广播搜索的服务
优思学院｜质量工程师：他们的使命与职责
标签类目体系（面向业务的数据资产设计方法论）-读书笔记6

原文地址：https://blog.csdn.net/m0_43599959/article/details/126735435