两个class均为circle的div如何仅给第一个应用CSS样式？

可以实现，根据你的HTML结构不同有多种CSS方案，另外你当前写的CSS存在语法错误：属性与值之间需要用冒号分隔，长度值要带单位且不需要加引号，修正后的基础样式可参考如下：

.circle {
  width: 100px;
  height: 200px;
}

通用最优方案 #

不受结构限制、兼容性最好的实现方式是直接给第一个需要应用样式的.circle元素新增专属类名：

<!-- 给第一个div新增first-circle类 -->
<div class="circle first-circle"></div>
<div class="circle"></div>

对应CSS代码：

.first-circle {
  width: 100px;
  height: 200px;
}

这种方式不依赖DOM结构层级、位置，后续调整HTML结构也不会导致样式匹配错误，兼容所有浏览器版本。

场景1：两个.circle为同级兄弟元素 #

如果你的HTML是同级结构（你给出的代码未闭合标签，大概率是漏写）：

<div class="circle"></div>
<div class="circle"></div>

使用:first-child选择器即可匹配同级第一个.circle元素：

.circle:first-child {
  width: 100px;
  height: 200px;
}

如果同级第一个元素不是.circle，需要匹配同级里第一个带circle类的元素，可以使用：

.circle:nth-child(1 of .circle) {
  width: 100px;
  height: 200px;
}

场景2：两个.circle为嵌套父子关系 #

如果你的HTML是嵌套结构：

<div class="circle">
  <div class="circle"></div>
</div>

使用:not()选择器排除作为子元素的.circle，只选中外层的第一个.circle：

.circle:not(.circle .circle) {
  width: 100px;
  height: 200px;
}

内容的提问来源于stack exchange，提问作者edwin gerry