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

来源：互联网发布：华道数据编辑：程序博客网时间：2024/05/16 17:03

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 0