为什么我这里的右耳朵就是不出來呢？调试了半天也没出来。。

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Cartoon Dog</title>
       <style type="text/css">
       :root{
           --h1: #1b2f90;
           --bg: #f9f9f6;
       }
       body{background: #ffc400;}
       .dog{
           width: 300px;
           height: 400px;
           position: relative;
       }
       .center{
            position:absolute;
            left: 50%;
            transform: translate(-50%,0);
       }
       .forehead{
            width: 102px;
            height: 48px;
            background: var(--bg);
            border-radius: 51px / 40px 40px 8px 8px;
            z-index: 1;
       }
       .face{
           width: 110px;
           height: 68px;
           background: var(--bg);
           border-radius: 50%;
            top: 20px;
            z-index: 1;
       }
       .chin{
           width: 104px;
           height: 36px;
           background: var(--bg);
           border-radius: 52px / 0px 0px 36px 36px;
           top: 60px;
           z-index: 1;
       }
       .ear{
           width: 16px;
           height: 70px;
           background: var(--h1);
           border-radius: 50%;
           position: absolute;
           z-index: 0;
           left: 50%;
           top: 34px;
           transform-origin: 50% 0;
           transform: translate(-42px,0) rotate(10deg);
       }
       .ear .right{
           transform: scale(-1,1) translate(-26px,0) rotate(10deg);
       }
   </style>
</head>
<body>
   <div class="dog center">
       <div class="forehead center"></div>
        <div class="face center"></div>
        <div class="chin center"></div>
        <div class="ear"></div>
        <div class="ear right"></div>
   </div>
</body>
</html>

xxy流沙 2018-05-01

源自：CSS3实现汉克狗案例 2-1 汉克狗头部轮廓和耳朵

收起

1回答

提问者 xxy流沙 2018-05-01 16:53:26

我找到出现问题的位置了，这个.ear.right之间不能有空格，这是为什么呢？

收起回答

提问者 xxy流沙 #1

可以选中同时满足多个选择器

2018-05-01 16:59:27
好帮手慕星星回复提问者 xxy流沙 #2

.ear选中的class名为ear的div标签，但是有两个，后面的.right就是选中class名.right的div标签，也就选中了第二个耳朵，也可以理解为div.right。

2018-05-02 10:36:53