有关CSS3中选择器（一）

来源：互联网发布：上网端口号是什么编辑：程序博客网时间：2024/05/17 13:13

关系选择器

1. 后代选择器（E F）

作为元素E的后代的任何元素F。

例如：ol元素中包含的li元素以及li元素中包含的a元素

2. 子选择器（E> F）

作为E元素的直接子元素的任何元素F。也就是说F不可以被嵌套！

<h1>This is <strong>very</strong><strong>very</strong> important.</h1>

<h1>This is<em> really<strong>very</strong> </em>important.</h1>

h1 > strong {color:red;}

第一个h1中的两个very都会变红，而第二个不会！

3. 相邻兄弟选择器（E +F）

匹配与E具有相同的父元素并为紧挨着E之后的任何元素F

例如：li+li 定位为指定容器中除第一个li之外所有li元素

4. 一般兄弟选择器（E ~F）

将匹配与E元素具有相同父元素并且标记中位于E之后的任何元素F

<!doctype html><html lang="en"><head><meta charset="utf-8"><title>CSS3选择器</title><style type="text/css">*{margin:0;padding:0;}.demo {margin:0 auto;width: 300px;border: 1px solid #ccc;padding: 10px;height:30px;}ul{padding:0 auto;list-style:none;}li {float: left;height: 20px;line-height: 20px;width: 20px;border-radius: 50%;text-align: center;background: #f36;color: green;margin-right: 5px;}li {background-color:gray; color:orange;}/*元素选择器*/.important {font-weight: bold;}.active {color: green;background: lime;}.items {color: #fff;background: #000;}.important.items {background:#ccc;}/*只有同时包括才可以改变属性*/.first.last {color: blue;}/*所以对于这个例子，样式blue并不起作用*//*后代选择器*/.demo li { color:blue;}ul > li {color:yellow; background:green;}/*好吧。。这个例子举的并不好。。。。*//*相邻兄弟选择器*/li+li {color:green;background:purple;}/*通用/一般兄弟选择器*/.active~li {color:yellow; background:green;}</style>></head><body><div class="demo"><ul class="clearfix"><li id="first" class="first">1</li><li class="active important">2</li><li class="important items">3</li><li class="important">4</li><li class="items">5</li><li>6</li><li>7</li><li>8</li><li>9</li><li id="last" class="last">10</li></ul></div></body></html>

属性选择器

其实都是CSS2中引进的，CSS3扩展了这些属性选择器，支持基于模式匹配来定位元素！

1. E[attr]

选择具有某个属性的元素，并不在乎属性的值究竟是多少

a[href][title] {color:red;}//可以进行多个个属性的选择

*[title] {color:red;}//将包含title的所有元素变成红

2. E[attr=val]

选择具有某个特定属性固定值的元素相匹配，属性与属性值必须完全匹配

p.important 和 p[class="important"] 应用到 HTML 文档时是等价的

3. E[attr|=val]

*[lang|="en"] {color: red;}//将lang值为en和以en为开头的所有元素标记为红色

<p lang="en">Hello!</p>

<p lang="en-us">Greetings!</p>

<p lang="en-au">G'day!</p>

<p lang="fr">Bonjour!</p>

<p lang="cy-en">Jrooana!</p>  //前三个将会被标记

4. E[attr~=val]

需要根据属性值中的词列表的某个词进行选择

p[class~="important"] {color: red;}//将类名中包含important的段落标记为红色

5. E[attr^=val]

[title^="def"]//选择title以def为开头的所有元素

6. E[attr $=val]

[title^="def"]//选择title以def为结尾的所有元素

7. E[attr *=val]

[atitle*="def"]//选择title中包含def子串的所有元素

0 0