CSS子元素 后代元素 及 兄弟元素选择器

元素之间的关系：

父元素：直接包含子元素的元素

子元素：直接被父元素包含的元素

祖先元素：直接或间接包含后代的元素，父元素也是祖先元素

后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素

兄弟元素：拥有相同父元素的元素叫做兄弟元素

兄弟元素选择器

float属性不具有继承特性，就是说子元素不会继承父元素的浮动属性，详情参考css手册float版本：CSS1 兼容性：IE4+ NS4+ 继承性：无 语法： float : none | left |right 参数： none : 对象不浮动left : 对象浮在左边right : 对象浮在右边 说明： 该属性的值指出了对象是否及如何浮动。请参阅clear属性。当该属性不等于none引起对象浮动时，对象将被视作块对象(block-level)，即display属性等于block。也就是说，浮动对象的display特性将被忽略。

CSS 中父级元素的高度一般由子元素撑开，不会特意设置高度，但是以下情况会造成父级元素高度坍塌，也就是高度为零，影响后面元素的排版。

子元素使用绝对定位

子元素浮动

针对第一种情况，即子元素使用绝对定位，可以使用以下方案：

子元素的绝对定位改为相对定位，如果可以改的话

针对第二种情况，即由子元素浮动造成父元素坍塌，可以使用以下方案：

/父级元素绝对定位/

position: absolute

/父级元素添加/

overflow: hidden;

/伪元素清除浮动造成的影响/

clearfix::before,clearfix::after {

content: "";

display: block;

height: 0px;

line-height: 0px;

clear: both;

visibility: hidden;

}

/清除兄弟元素,添加空元素添加样式/

<div class="dad">

<div class="son"></div>

<div style="clear: both"></div>

</div>

作用：通过元素选择器可以选择页面中的所有指定元素

语法：标签名{}

作用：通过元素的class属性值选中一组元素

语法：class属性值{}

id选择器

作用：通过元素的id属性值选中唯一的一个元素

语法：#id属性值{}

复合选择器（交集选择器）

作用：可以选中同时满足多个选择器的元素

语法：选择器1选择器2选择器N{}

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

作用：通过选择器分组可以同时选中多个选择器对应的元素

语法：选择器1,选择器2,选择器N{}

通配选择器

作用：可以用来选中页面中的所有的元素

语法：{}

元素之间的关系：

父元素：直接包含子元素的元素

子元素：直接被父元素包含的元素

祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素

后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素

兄弟元素：拥有相同父元素的元素叫做兄弟元素

作用：选中指定元素的指定后代元素

语法：祖先元素 后代元素{}

有时候，你需要选择本身没有标签，但是 仍然易于识别的网页部位，比如段落首行 或鼠标滑过的连接。CSS为他们提供一些选 择器：伪类和伪元素。

给链接定义样式：

有四个伪类可以让你根据访问者与该链接的交互方式，将链接设置成4中不同的方式。

其他：

否定伪类

否定伪类可以帮助我们选择不是其他东西的某种东西。

语法： :not(选择器){}

比如p:not(hello)标识选择所有的p元素，但是class为hello的除外。

属性选择器可以挑选带有特殊属性的标签。

语法：

[属性名]

[属性名 = "属性值"]

[属性名 ~= "属性值"]

[属性名 ^= "属性值"]

[属性名 |= "属性值"]

[属性名 $= "属性值"]

[属性名 = "属性值"]

作用：选中指定父元素的指定子元素

语法：父元素 > 子元素

比如body > h1将选择body字标签中的所有h1标签

IE6及以下的浏览器不支持子元素选择器

其他子元素选择器

除了根据祖先父子关系，还可以根据兄弟关系查找元素。

语法：

兄弟元素 + 兄弟元素 ：查找后边一个兄弟元素

兄弟元素 ~ 兄弟元素：查找后边所有的兄弟元素

在页面中使用CSS选择器选中元素时，经常都是一个元素同时被多个选择器选中。

比如：

这两个选择器都会选择h1元素，如果两个选择器设置的样式不一样那还好不会产生冲突，但是如果两个选择器设置的是同一个样式，这样h1到底要应用哪个样式呢？CSS中会默认使用权重较大的样式，下面看一下权重又是如何计算的。

不同的选择器有不同的权重值：

以上就是关于CSS子元素 后代元素 及 兄弟元素选择器全部的内容，包括:CSS子元素 后代元素 及 兄弟元素选择器、在css中 父元素不固定高度，怎样实现子元素的高度100、cssbefore高度为0等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！