CSS选择器一（+号和checked）
2017-12-29 本文已影响23人
OnyWang
虽千万人而吾往矣...
+号选择器
该选择器是相邻兄弟选择器，什么是相邻兄弟选择器呢？
即----两个元素同级别，有同一个父元素，相当于jquery的next。
举例
- css代码
<style type="text/css">
h1 + p {margin-top:50px;}
</style>
- html代码
<body>
<h1>This is a heading.</h1>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
</body>
-
运行效果
image.png
- 解释
body下面的h1和五个p元素为兄弟元素，他们有同一个父元素body。
h1+p的话仅仅是选择的其后的第一个p元素，对于其他的p元素无效。
checked元素
选择所有被选中的元素。仅仅适用于input的多选按钮和单选按钮。
比较常用的方式如下：
input:checked
{
background-color: #ff0000;
}
此时，所有被选中的单选按钮和多选按钮都会改变背景色。
特别注意
该选择器仅仅适用于Opera，对于其他任何浏览器都不适用。
