爱站程序员基地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”)
