CSS选择器
CSS2的选择器
包括：通配符、标签、类名、ID、并集、交集、层集
通配符选择器：*{ ...}
标签选择器：标签名 { ...}
后代选择器 祖先 后代 { ... }(后代可以是儿子也可以是它的孙子等等)
子集选择器 父 > 子 { ... }(子元素是父元素的直接子元素不能是孙子元素)
类名选择器：.类名{...}
ID选择器：#ID名 { ... }
并集选择器：子元素1, 子元素2 { ... }
交集选择器：标签名.类名或标签名#ID名{ ...}(中间无空格，用来选择符合标签且类名的元素)
兄弟选择器：.box + div{ ... }(此时选中.box后面第一个兄弟元素，且该兄弟元素必须为div)
<style>
div{
width: 200px;
height: 200px;
background-color: blue;
}
p{
width: 100px;
height: 100px;
background-color: yellow;
}
.box1 + div{
background-color: red;
}
</style>
</head>
<body>
<div class="box1">
</div>
<p></p>
<div></div>
</body>
</html>
可以看出，由于.box1与下个div中间隔着一个p元素所以兄弟div并没有变红
兄弟选择器：.box1 ~ div{ ...}(选中.box1后面所有的div兄弟元素,但无法选中之前的)
CSS3中的选择器
子元素选择器
补充说明：E:nth-child(n) 匹配的是父类的第n个子元素 且该子元素为E才生效，若不是E则匹配不到
E:nth-of-type(n) 匹配的是父元素的第n个元素为E的子元素，只要父元素中有n个E元素作为子元素
则能匹配到
投递百度等公司8个岗位 >
华为开奖230人在聊