css后代选择器和属性选择器

最新推荐文章于 2024-03-12 20:08:25 发布

小李讲源码

最新推荐文章于 2024-03-12 20:08:25 发布

阅读量869

点赞数

分类专栏： html&css

本文链接：https://blog.csdn.net/ncut_LJD/article/details/50853333

版权

html&css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1.后代选择器

举两个个例子吧

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<link rel="stylesheet" type="text/css" href="1.css"/>
<p>我是<em>谁谁谁！！！</em></p>
</body>
</html>

@charset "utf-8";
/* CSS Document */
p em
{
	font-weight:bold;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<link rel="stylesheet" type="text/css" href="1.css"/>
<div >
<p class="a">我是谁谁谁！！！</p>
<br />
<div class="b">
你好！
</div>
</div>
</body>
</html>

@charset "utf-8";
/* CSS Document */
div .a
{
	font-weight:bold;
	color:red;
}

2.属性选择器

什么是属性呢

属性选择器可以根据元素的属性及属性值来选择元素。

<a href="">测试数据</a> href就是属性

例子 1
如果您希望把包含标题（title）的所有元素变为红色，可以写作：
*[title] {color:red;}

*=通配符

例子 2
与上面类似，可以只对有 href 属性的锚（a 元素）应用样式：
a[href] {color:red;}

例子 3
还可以根据多个属性进行选择，只需将属性选择器链接在一起即可。
例如，为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色，可以这样写：
a[href][title] {color:red;}

<br/> = <br></br> = 自封闭标签

根据具体属性值选择
除了选择拥有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素。

例子 1
例如，假设希望将指向 Web 服务器上某个指定文档的超链接变成红色，可以这样写：
a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}

例子 2
与简单属性选择器类似，可以把多个属性-值选择器链接在一起来选择一个文档。
a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}

[attribute]            用于选取带有指定属性的元素。
[attribute=value]   用于选取带有指定属性和值的元素。

[attribute~=value]   用于选取属性值中包含指定词汇的元素。

p[title~="张"]

[attribute|=value]   用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。

p[title|="Test"] Test it

[attribute^=value]   匹配属性值以指定值开头的每个元素。

p[title^="Test"] Testit 或者是 Test it

[attribute$=value]   匹配属性值以指定值结尾的每个元素。

[attribute*=value]   匹配属性值中包含指定值的每个元素。

例子过两天再补有点累。。。

小李讲源码

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
css后代选择器和属性选择器

1.后代选择器举两个个例子吧无标题文档我是谁谁谁！！！@charset "utf-8";/* CSS Document */p em{ font-weight:bold;}无标题文档我是谁谁谁！！！你好！@charset "utf-8";/* CSS Document */div .a{ f
复制链接

扫一扫

专栏目录