CSS超详细知识点及实战案例解析-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_50767381/article/details/118422432

CSS超详细知识点总结2

10.0 层次选择器对比

选择器	类型	功能描述
E F	后代选择器	选择匹配的F元素,且匹配的F元素被包含在匹配的E元素内
E>F	子选择器	选择匹配的F元素,且匹配的F元素是匹配的E元素的子元素
E+F	相邻兄弟选择器	选择匹配的F元素,且匹配的F元素紧位于匹配的E元素后面
E~F	通用兄弟选择器	选择匹配的F元素,且位于E元素后的所有F元素

10.1 后代选择器案例

<title>后代选择器</title>
    <style>
        .cuxiao li {
            list-style: none;
        }

        .cuxiao p {
            color: red;
        }

        .div1 {
            border: 1px solid red;
            width: 300px;
            height: 300px;
        }
        .div2{
            border: 1px solid red;
            width: 200px;
            height: 200px;
        }
        .div3{
            border: 1px solid blue;
            width: 100px;
            height: 100px;
        }

        .div1 div{
            color: green;
        }

    </style>
</head>
<body>


<div class="cuxiao">
    <ul>
        <li>大促销</li>
        <li>低价大甩卖</li>
        <li>走过路过别错过</li>
    </ul>

    <p>这个案例为了说明后代选择器</p>

    <div class="div1">
        <div class="div2">
            div2
            <div class="div3">
                div3
            </div>
        </div>
        div1
    </div>
</div>
</body>
</html>

10.2 子选择器案例

body>p{
          background: red;
      }
    </style>

</head>
<body>

<p>你好我是一个段落</p>
<p>你好我是一个段落</p>
<p>你好我是一个段落</p>

10.3 相邻兄弟选择器

 <style>

        .first+p{
            background: red;
        }
    </style>

</head>
<body>


<p class="first">第一段</p>
<p>第二段</p>
<p>第三段</p>

10.4 通用兄弟选择器

<title>通用兄弟选择器</title>
    <style>
        .first~p{
            background: red;
        }
    </style>
</head>
<body>

<p class="first">第一</p>
<p>第二</p>
<p>第三</p>

11.0 使用css3结构伪类选择器选择器

<title>结构伪类选择器</title>
    <style>
        /*ul下面第一个子元素*/
        ul li:first-child{
            background: red;
        }
        /*ul下面最后一个子元素*/
       ul li:last-child{
           background: #1f87cc;
       }
      /*  body下面的第2个p元素*/
      body p:nth-child(2){
          background: blue;
      }
     /* 选择父级里的第一个子元素p*/
       p:nth-child(1){
           background: pink;
       }
       /* 父级元素里面第二个类型为p的元素*/
        p:nth-of-type(2){
            background: green;
        }
    </style>

</head>
<body>


<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>

案例:制作开心餐厅页面

<title>制作开心餐厅</title>
    <link rel="stylesheet" href="a/style.css">
</head>
<body>
<img src="happycook/game01.jpg" alt="主题图片"><br/>
<img src="happycook/game02.jpg" alt="游戏简介">
<p>
    开心餐厅,让你可以开心的烹饪出美味佳肴,从一个简洁的小餐厅起步,逐步打造出自己的餐饮大时代<br/>
    烹饪美食,雇佣好友帮忙,装饰个性餐厅,获得顾客美誉<br>
    步步精心经营,精细打理,我们都能成为餐饮大亨.
</p>
<img src="happycook/game03.jpg" alt="游戏特色">
<h2 class="firstH2">如何做菜</h2>
<p>
    1.点击餐厅中的灶炉,选择自己做得食物后,进行烹饪,不断点击灶卢,知道事务进入自动烹饪阶段<br/>
    2.每道菜所需要的步骤和时间不一样<br/>
    3.食物完成后,服务员会自动端给顾客,然后顾客吃完付钱
</p>
<h2>如何丰富餐厅?</h2>
<p>
    1.自己做老板,当大厨,雇佣好友帮忙 心情越好:好友亲密度越高<br>
    2.随着等级越高,可雇佣人越多<br>
    3.餐桌摆放越讲究
</p>
<h2>如何吸引顾客</h2>

<p>
    1.自己做老板,当大厨,雇佣好友帮忙 心情越好:好友亲密度越高<br>
    2.随着等级越高,可雇佣人越多</p><br>
    3.餐桌摆放越讲究
</p>
<h2>如何和好用互动</h2>
<p>
    1.自己做老板,当大厨,雇佣好友帮忙 心情越好:好友亲密度越高<br>
    2.随着等级越高,可雇佣人越多<br>
    3.餐桌摆放越讲究<br>
</p>
<img src="happycook/game04.jpg" alt="游戏口碑">
<p>开心餐厅,让你可以开心的烹饪美食,自己做老板,当大厨,雇佣好友帮忙 <br>
    心情越好:好友亲密度越高</p>
</body>

style.css

/*
层次选择器*/
p{
    font-size: 14px;
}
body h2{
    font-size: 16px;
}
/*
第一个h2变成红色*/
.firstH2{
color: red;
}
/*第一个h2元素后面的所有h2元素变成蓝色*/
.firstH2~h2{
    color: blue;
}
/*让第一个图片设置宽高*/
img:first-child{
    width: 100%;
    height: 400px;
}
/*找个图片类型为第二个的img*/
img:nth-of-type(2){
    border: 1px solid red;
}

总结

选择器	功能描述
E:first-child	作为父元素的第一个子元素E
E:last-child	作为父元素的最后一个子元素E
E:nth-child(n)	先择父级元素E的第n个子元素F,n(可以是任意整数),关键字even,odd
E:first-of-type	选择父级元素内具有指定类型的第一个E元素
E F:nth-of-type(n)	选择父级元素内具有指定类型的第n个元素F