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


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <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 id="inner">div>
        <p>p>
        <span>span>
    div>
body>
html>

浏览器解析效果如下:
CSS选择器之div:first-child&div :first-child_第1张图片
内外div都加上了红色边框的样式,因为它们都既是div元素,又是其父级元素的“第一个孩子”。

div :first-child


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <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 id="inner">div>
        <p>p>
        <span>span>
    div>
body>
html>

浏览器解析效果如下:
CSS选择器之div:first-child&div :first-child_第2张图片

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

你可能感兴趣的:(CSS选择器,CSS,css)