jQuery中，children()方法作用于所有后代

问题遇到的现象和发生背景

用代码块功能插入代码，请勿粘贴截图


html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>筛选方法title>
    <script src="../jquery.min.js/jquery.min.js">script>
    <style>
        .grandfather{
            width: 200px;
            height: 200px;
            border: 1px solid red ;
        }
        .father{
            width: 100px;
            height: 200px;
            border: 1px solid;
        }
        .son1{
            width: 50px;
            height: 70px;
            border: 1px solid;
        }
    style>
head>
<body>
    <div class="grandfather">
        <div class="father">
            <div class="son1">son1
                <div>ss1
                    <div>ss2div>
                div>
            div>
            <p>son2
                <span>small sonspan>
            p>
            <p>son3p>
            <span>son4span>
        div>
    div>

    <script>
        $(function(){
            // parent()
                //parent() 返回的是 最近一级的父级元素 亲爸爸
                console.log($('.son1').parent())

            // children() 亲儿子  <==>  子代选择器 ul>li
                $('.father').children('p').css('color','red')
                $('.father').children('div').css('color','red')
            //
        })
    script>
body>
html>

运行结果及报错内容

我想要达到的结果

只想知道我写的children方法，为什么和它的功能不一样

现在没什么问题，children只对第一层子级元素生效，你这里是因为color具有继承性质，所以显得所有后代都生效了，具体的更改打开控制台看就能看出来，或者换用其他的属性进行测试，比如border

文章：jQuery遍历children()方法中也许有你想要的答案，请看下吧

现在没什么问题啊