您的位置：首页 > Web前端 > CSS

CSS——其他选择器（交集/并集/儿子/序）

2017-09-13 00:22 501 查看

Pre

浏览器兼容问题：

IE：微软的浏览器，随着操作系统安装的，所以每个window都有IE浏览器。

windows xp操作系统安装的IE6

windows vista操作系统安装的IE7

windows 7操作系统安装的IE8

windows 8操作系统安装的IE9

windows10操作系统安装的edge

一般来说IE6、7由于版本低级，经常存在浏览器的兼容问题。

1.交集选择器

如：

h3.special｛
color:red;
｝

选择的元素需同时满足两个条件——必须是h3标签，且必须是special标签。

交集选择器没有空格，所以div.red和div .red不是同一个意思。

交集选择器可以连续交，虽然一般并不这么写。

h3.special.zhongyao{
color:red;
}

2.并集选择器（分组选择器）

用逗号表示：

h3,li{
color:red;
}

3.通配符

*表示所有元素：

*{
color:red;
}

效率不高。页面上的标签越多，效率越低，所以页面上不太可能出现这个选择器。

4.儿子选择器

IE7开始兼容，IE6不兼容

<style type="text/css">
div>p{
color:red;
}
</style>
</head>
<body>
<div>
<p>猜猜我是什么颜色</p>
</div>
</body>

p标签相当于div标签的儿子。

以下情况无法选择，因为div的儿子是ul，不是p：

<style type="text/css">
div>p{
color:red;
}
</style>
</head>
<body>
<div>
<ul>
<li>
<p>猜猜我是什么颜色</p>
</li>
</ul>
</div>
</body>

5.序选择器

IE8开始兼容，IE6、7都不兼容。

<style type="text/css">
ul li:first-child{
color:red;
}
</style>
</head>
<body>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</body>

若是选择最后一个li，则ul li: last-child；选择第n个li，则ul li: nth-child。

由于浏览器更新需要过程，所以现在如果公司还要求兼容IE6、7，那么就要自己写类名，我们可以用类选择器来选择第一个或最后一个：

ul li.first{
color:red;
}
ul li.last{
color:blue;
}

6.下一个兄弟选择器

IE7开始兼容，IE6不兼容。

+表示选择下一个兄弟

<style type="text/css">
h3+p{
color:red;
}
</style>
</head>
<body>
<h3>这是一个标题</h3>
<p>这是一个段落</p>
<p>这是一个段落</p>
<h3>这是一个标题</h3>
<p>这是一个段落</p>
<p>这是一个段落</p>
</body>

如果CSS选择器：
div.content div.news ul li.first{

}
则：
< div class="content">
< div class="news">
< ul>
< li class="first">< /li>
< li>< /li>
< li>< /li>
< li>< /li>
< /ul>
< /div>
</div>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航