本文详细介绍了CSS中的交集选择器、并集选择器、相邻兄弟选择器、通用兄弟选择器和伪类选择器的用法。通过实例解析了如何对网页元素进行精准样式控制，包括对元素状态、位置及内容的编辑。同时提到了通配符选择器在清除元素间间距上的作用。理解并掌握这些选择器将有助于提升CSS布局和交互设计能力。
一、交集选择器。
故名思意就是一个程序中两个或多个部分所具有的共同内样式元素和相同的div标签，并进行对他们所具有的共同元素进行编辑样式。例如：
<style>
div.box{ （注意不要输入成div box这会变成后代选择器）
color:red;
}
</style></head><body>
(1)<div>没有样式的div</div>
(2)<p><div class="box">在p标签中的div</div></p>
(3)<div class="box">带有样式的div</div></body>
这个时候（2）（3）的字就会在网页上呈现出红色，因为它们既具有div还有内样式“box”而（1）只具有div没有内样式，这是重要特征。
小结：只有具有div标签和所要编辑的部分的内样式才能被编辑。【div（标签）.内样式】
二、并集选择器。
同数学里的交并集类似，对编辑的如“div,.box”只要程序主体中含有其中的div或者box都会被进行编辑。具体可以参考“一”中的内容，只不过在此(1)、(2)、(3)都会现红色。但是若如下所示：
<p>没有样式的p标签</p>
就不会显示出红色，但是注意格式：div(标签),.内样式
三(1)、相邻兄弟选择器。
若想要选择一个标签所相连的标签就可以使用“相邻兄弟选择器”，但它只会往后面选择。即如下：
(1)<p>'''''''''</p>
<div>
<p>xxxxxx</p><p>.........</p>
</div>
(2)<p>.......</p> （注意只有紧挨着的才会被选中）
(3)<p>,,,,,,,,</p>
当我用div+p时（2）会被编辑成你所编辑的样子，若没有与div相连着的p标签，则不显示此编辑。
三(2)、通用的兄弟选择器。
选择div的所有兄弟标签(即它之后的所有选择的标签)，即例如三(1)中的(2).(3)就会变成红色，此时需要如此输入div~p。
四、伪类选择器。
就是通过冒号来定义的，且以冒号开头哦，它定义的是元素的状态。但它需要配合其他选择器一起使用。例如：
（1）.box:hover{
cursor:pointer；(鼠标指针的样式）
background-color：red；}(鼠标移到div上后就会显示出此样式）
其中：hover表示鼠标移到元素上时会自动触发的效果
（2）li：first-child{在此处进行你们的编辑}。
但只有第一个和最后一个特殊可以用first和last来选择，而其他顺序的需要用其他方式来定义，即如下的通用式：
li：nth-child(位置序号）；此时被选中的序号的位置就会显示出你所想要编辑成的样式。
(3)before和after
即如：<style>
.box:before{内容1}
.box:after{内容2}
</style></head><body>
<div class="box">内容3</div>
此时1的内容会出现在3之前，2的内容会出现在3之后。
另外若相对样式生成的元素定位。注意在此中的定位，我们的页面是处在坐标轴的四象限，其中向左走是变负的，向右走是变正的，向上走是负的，往下走是正的。（当你没有对器做出位置定位是，系统默认顺序：上右下左。
border-方向（方向边线）【决定总体的大位置】
在下方输入另外的方向值来定义上面所定义的位置的小框处的样式。【决定小位置】
五、通配符选择器。
它会匹配页面中所有的元素，通常用来去掉两标签之间的内边距和外边距。
（1）：padding-内边距 margin-外边距（用冒号来输入）
（2）：position:absolute(绝对定义）：相对于一个参考物(一般是页面的左上角)移动包括边框一起
position：relative(相对定位)：相对页面中的一个物体(一般是前面个元素在动，若没有则以主页面移动)移动，但它的边框不会移动，会继续在原位置上占位，只有内容会跟着走。
之后在页面中移动时，需要我们自己进行定位，而且在图形定位时是以其的左上角为移动的点来移动整个图形
(3)transform：translate（定位的位置），但他是以编辑的图形为基准，为四象限进行移动
margin-方向：xx px；是移动图形的外边距，同时也是以编辑的图形为四象限来进行移动。
(4)position-fixed(固定定位)：相对与一个页面框为参照物，在上下滑动位置是它始终显示在页面的那个位置，不受改变。
谨记：各类选择器可以混合使用会有更棒的效果！
扫一扫
680
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
