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>