CSS尝试性使用一下css容易混淆的属性选择器
Posted GHUIJS
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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"的元素 |
栗子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<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>
以上是关于CSS尝试性使用一下css容易混淆的属性选择器的主要内容,如果未能解决你的问题,请参考以下文章