AI智能
改变未来

CSS选择器之div:first-child&div :first-child


div:first-child&div :first-child的区别

  • div:first-child属于组合选择器
    既满足是div元素,又满足是父级元素的“第一个孩子”,至于父级元素是谁,无所谓。
  • div :first-child属于后代选择器
    必须是div元素的“第一个孩子”,父级元素明确要求是div元素,至于“第一个孩子”是什么元素,无所谓。

div:first-child

<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Document</title><style>/* 为了便于观察,将外层div和内层div设置不同的宽高 */#outer{width: 200px;height: 200px;}#inner{width: 100px;height: 100px;}/* 组合选择器 */div:first-child{border: 1px solid red;}</style></head><body><div id=\"outer\"><!-- 该div是其父级元素body的第一个孩子 --><div id=\"inner\"></div><!-- 该div是其父级元素div(id=\"outer\")的第一个孩子 --><p></p><span></span></div></body></html>

浏览器解析效果如下:

内外div都加上了红色边框的样式,因为它们都既是div元素,又是其父级元素的“第一个孩子”。

div :first-child

<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Document</title><style>/* 为了便于观察,将外层div和内层div设置不同的宽高,并且给外层div加上蓝色边框 */#outer{width: 200px;height: 200px;border: 1px solid blue;}#inner{width: 100px;height: 100px;}/* 后代选择器 */div :first-child{border: 1px solid red;}</style></head><body><div id=\"outer\"><!-- 该div是父级元素body的第一个孩子 --><div id=\"inner\"></div><!-- 该div是父级元素div(id=\"outer\")的第一个孩子 --><p></p><span></span></div></body></html>

浏览器解析效果如下:

红色边框样式只作用到了div元素下的“第一个孩子”——div(id=“inner”)

赞(0) 打赏
未经允许不得转载:爱站程序员基地 » CSS选择器之div:first-child&div :first-child