css3中追加的三种选择器-白红宇

css3中追加的三种选择器

阅读量：7069 次

发布时间：2019-06-28

本文共 1755 字，大约阅读时间需要 5 分钟。

1.css3追加的3中选择器：[att*=val],[att^=val],[att$=val]

2.[att*=val]

*是通配符，表示只要字符串中出现了这个val的（哪怕val只是一部分），如这个例子：[class*=div]:表示凡是div这个类都会出现效果（包含即可，不论是sdfas

div还是

divsfas）。

比如下面的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<style>

[class*=div]{

color:#00F;}

</style>

</head>

<body>

i'm a student

</div>

i'm a student

</div>

i'm a student

</div>

i'm a student

</div>

</body>

</html>

3.[att^=val]:表示首字母串是val的会出现效果，比如下面的例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<style>

[class^=div]{

color:#0F0}

</style>

</head>

<body>

i'm a student

</div>

i'm a student

</div>

i'm a student

</div>

i'm a student

</div>

</body>

</html>

4.[att$=val]：表示结束字母串是val的出现效果，如下面这个例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<style>

[class$=i]{

color:#0F0}

</style>

</head>

<body>

i'm a student

</div>

i'm a student

</div>

i'm a student

</div>

i'm a student

</div>

</body>

</html>

转载于:https://www.cnblogs.com/comefuture/p/8305989.html

你可能感兴趣的文章

鸟哥私房菜第2章如何学习Linux 课后习题

.关于oracle latch和lock的一点点

查看>>

Python学习笔记（3）-Python基础

mysql5.7.13免安装版超详细安装教程