首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

纯css Chessboard与div,没有类或ID,是否可能?

是可能的。CSS可以通过选择器来选择元素,而不仅仅是通过类或ID来选择。可以使用CSS选择器来选择特定的元素,然后对其应用样式。

对于纯CSS的棋盘,可以使用伪元素和伪类来创建。可以使用:before:after伪元素来创建棋盘的行和列,然后使用nth-child伪类来选择特定的方格并对其应用样式。

以下是一个示例代码:

代码语言:html
复制
<div class="chessboard">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
代码语言:css
复制
.chessboard {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  width: 400px;
  height: 400px;
}

.chessboard div {
  background-color: #fff;
}

.chessboard div:nth-child(odd) {
  background-color: #000;
}

这段代码创建了一个8x8的棋盘,使用了CSS的网格布局来实现。通过设置grid-template-columnsgrid-template-rows属性,可以定义棋盘的行和列。然后使用:nth-child伪类选择奇数个方格,并对其应用黑色背景色,从而实现黑白相间的效果。

这只是一个简单的示例,你可以根据需要进行样式的调整和扩展。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 谈谈一些有趣的CSS题目(十四)-- CSS 方式实现 CSS 动画的暂停播放!

    - 结构性伪选择器 谈谈一些有趣的CSS题目(十一)-- reset.css知多少 谈谈一些有趣的CSS题目(十二)-- 深入探讨 CSS 特性检测 @supports Modernizr 谈谈一些有趣的...使用 CSS 的方法,能否暂停、播放 CSS 动画?看起来不可能,至少很麻烦。...{ animation-play-state: paused; } Demo -- CSS 方式实现 CSS 动画的暂停播放 (Hover): 当然,这个方法不够智能,...checked 伪实现 之前的文章《谈谈一些有趣的CSS题目(八)-- CSS的导航栏Tab切换方案》也谈过,使用 radio 标签的 checked 伪,加上  实现 CSS...DEMO -- CSS 方式实现 CSS 动画的暂停播放: 上面的示例 Demo 中,实现了 CSS 方式实现 CSS 动画的暂停播放。

    97330

    HTML详解连载(4)

    /my.css> 行内样式 配合javaScript使用 CSS写在标签的style属性值里 代码示例 这是div标签 选择器 作用 查找标签,设置样式 基础选择器 标签选择器 选择器 id选择器 通配符选择器 标签选择器 使用标签名作为选择器->选中同名标签设置相同的样式。...--使用选择器--> 这是div标签 强调 一个选择器可以给多个标签使用 一个标签可以有多个名,class属性值写多个名,名间用空格隔开...注意 名自定义,不能数字中文,尽量用英文命名 开发习惯 名见名知意,多个单侧可以用-连接,例如news-hd id选择器 作用 查找标签,差异化设置标签的显示效果 场景 id选择器一般配合JavaScript...使用,很少用来设置CSS格式 步骤 定义id选择器->#id名 使用id选择器->标签添加id=”id名” 规则 同一个id选择器再一个页面只能使用一次 通配符选择器 作用 查找页面所有标签,设置相同样式

    13410

    神奇的选择器 :focus-within

    大家听的多了,伪元素可能听到的不是那么频繁,其实 CSS 对这两个是有区分的。...通常而言, #id:after{ ... } #id::after{ ... } 符合标准而言,单冒号(:)用于 CSS3 伪,双冒号(::)用于 CSS3 伪元素。...伪选择器 :focus-within 言归正传,今天要说的就是:focus-within 伪选择器。 它表示一个元素获得焦点,,该元素的后代元素获得焦点。划重点,它它的后代获得焦点。...editors=1100) TAB导航切换 在之前的一篇文章里,介绍了两种 CSS 实现的 TAB 导航栏切换方法: CSS的导航栏Tab切换方案 现在又多了一种方式,利用了 :focus-within...可以看到,上面的效果没有用到任何 JS,可以实现: 整个 input(包括父元素所在区域)获焦非获焦样式控制 placeholder 属性设置的文字出现消失后样式控制 CodePen Demo —

    1.1K20

    神奇的选择器 `:focus-within`

    CSS 的伪选择器和伪元素选择器,让 CSS 有了更为强大的功能。 伪大家听的多了,伪元素可能听到的不是那么频繁,其实 CSS 对这两个是有区分的。...通常而言, #id:after{  ... } #id::after{ ... } 符合标准而言,单冒号(:)用于 CSS3 伪,双冒号(::)用于 CSS3 伪元素。...伪选择器 :focus-within 言归正传,今天要说的就是:focus-within 伪选择器。 它表示一个元素获得焦点,,该元素的后代元素获得焦点。划重点,它它的后代获得焦点。...我们无须去给获焦的元素设置 :focus 伪,而是可以给需要的父元素设置,这样当元素获焦时,我可以一并控制它的父元素的样式 核心思想用 CSS 代码表达出来大概是这样: <div class="g-container...[purecssfocus] DEMO -- PURE CSS FOCUS By :focus-within TAB导航切换 在之前的一篇文章里,介绍了两种 CSS 实现的 TAB 导航栏切换方法:

    1.2K50

    【青训营】月影带我学js——各司其责

    /script> 这个代码看起来是没有什么问题,我们仔细想想它是否有优化的空间,往各司其责上想。...我们这里修改样式,是直接动用css属性,其实我们可以直接给给class的。...但是这样优化的还是不够,我们仔细想想这个其实是一个css的职责,没必要让js来参与操作。 最好的代码就是不写代码!...我们用css的checkbox选中事件来做处理,直接就避免了编写js代码。 其实在这里还存在一些问题,比如刷新页面后状态就无法保存了。这时候就需要用到js了。但是展示的我们还是尽量追求零JS。...总结 HTML CSS JS 应该各司其责 应当避免不必要的由JS直接操作样式 可以用class来表示状态 展示交互寻求零JS方案

    45320

    Tailwind CSS 真有那么好吗?讨厌它的前六大原因

    与此相比,使用 CSS,你可以使用语义化和描述性的名,这些名反映了你的元素的含义和功能: <img class="card-image" src="some-image.jpg...通过将表现<em>与</em>内容混合,你违反了代码的模块性和可维护性。你还使在不同的上下文<em>或</em>设备中重用<em>或</em>覆盖样式变得更加困难。 3....你并<em>没有</em>学习实际的 <em>CSS</em> 属性和值,而是学习 Tailwind <em>CSS</em> <em>类</em>及其含义。这<em>可能</em>会让你认为你知道 <em>CSS</em>,但实际上,你只熟悉 Tailwind <em>CSS</em>。...它有一个庞大的库,学习普通的 <em>CSS</em> 更容易 Tailwind <em>CSS</em> 为每种<em>可能</em>的场景提供了数千个实用程序<em>类</em>,但这也意味着你必须记住<em>或</em>查找所有这些<em>类</em>及其含义。...例如,它不使用破折号<em>或</em>驼峰命名来分隔<em>类</em>名中的单词,而是使用冒号<em>或</em>括号。它不使用百分比<em>或</em>像素来指定值,而是使用任意的数字<em>或</em>字母。这<em>可能</em>会使你的代码看起来不一致和不熟悉。

    1.4K10

    Web前端中的命名规则

    可能减少div嵌套, 如欢迎访问XXX, 您的用户名是用户名</...规避classid命名(此条重要, 若有不明白请及时i沟通): a) 通过从属写法规避, 示例见d; b)取父级元素id/class命名部分命名, 示例见d; c)重复使用率高的命名...原生JavaScript变量要求是英文字母, 首字母须小写, 如iTaoLun; jQuery变量要求首字符为'_', 其他原生JavaScript 规则相同, 如: _iTaoLun; 另, 要求变量集中声明...命名: 首字母大写, 驼峰式命名. 如 ITaoLun; 5. 函数命名: 首字母小写驼峰式命名. 如iTaoLun(); 6. 命名语义化, 尽可能利用英文单词其缩写; 7....注重html分离, 减小reflow, 注重性能. 图片规范 1. 所有页面元素图片均放入img文件夹, 测试用图片放于img/demoimg文件夹; 2.

    2.3K90

    CSS3中的变量var了解

    ,html代码: 这是一段文字 css代码: #jsDom { --my-varwidth: 200px; background-color:...那么进行如下操作: html代码: 这是一段文字...是否应该限定其范围为文件模块?是否应该限制在块中? 由于CSS最终目的是为HTML添加样式,事实证明还有另一种有效的方法给变量限定作用域:DOM元素。...例如,确保文本始终可读,并充分背景颜色形成鲜明对比。 有了自定义属性和新的CSS颜色函数,很快这将成为可能。 预处理器变量不可互操作 这是预处理器相对明显的一个缺点,提到它是因为我觉得它重要。...跨不同的工具集CDN上托管的第三方样式表共享预处理器变量是不可能至少不容易)的。 原生的CSS自定义属性可以任何CSS预处理器CSS文件一起使用。反之则不然。

    1.4K30

    【项目设计】网页版五子棋游戏

    VSCode/Vim:通过 VSCode 远程连接服务器直接使用 Vim 进行代码编写功能测试。 g++/gdb:通过 g++/gdb 进行代码编译调试。...需要注意的是,我们并没有封装获取 sql 查询结果的相关接口,因为是否要获取查询结果、要获取哪部分查询结果以及以何种形式获取查询结果,这些都是业务需求强相关的。...对于一般的数据库来说,数据库中有可能存在很多张表,而每张表中管理的数据以及要进行的数据操作都各不相同,因此我们可以为每⼀张表中的数据操作都设计⼀个,通过实例化的对象来访问这张数据库表中的数据。...同时,由于同一时间段内进行匹配或者正在对战的玩家有很多,所以游戏房间可能会有多个;那么我们就需要设计一个游戏房间管理来对多个房间进行管理。.../css/game_hall.css"> 网络五子棋对战游戏 <!

    28500

    【项目设计】网络版五子棋游戏

    VSCode/Vim:通过 VSCode 远程连接服务器直接使用 Vim 进行代码编写功能测试。 g++/gdb:通过 g++/gdb 进行代码编译调试。...需要注意的是,我们并没有封装获取 sql 查询结果的相关接口,因为是否要获取查询结果、要获取哪部分查询结果以及以何种形式获取查询结果,这些都是业务需求强相关的。...对于一般的数据库来说,数据库中有可能存在很多张表,而每张表中管理的数据以及要进行的数据操作都各不相同,因此我们可以为每⼀张表中的数据操作都设计⼀个,通过实例化的对象来访问这张数据库表中的数据。...同时,由于同一时间段内进行匹配或者正在对战的玩家有很多,所以游戏房间可能会有多个;那么我们就需要设计一个游戏房间管理来对多个房间进行管理。.../css/game_hall.css"> 网络五子棋对战游戏 <!

    1.2K70

    【JavaWeb】78:CSS的学习

    「①id选择器」 格式为:#+id名{} 关于id我做了个测试,发现不能用数字,老实说我还挺奇怪的,一般id不都是数字么。 就当是CSS的命名规则好了,不能是数字,否则没有作用。...其中id选择器是唯一的,也就是一个id在一个HTML文件中只能有一个。 「②选择器」 格式为:.+名{} 是可以有多个的,比如同样是font标签,相同的id只能有一个,但是相同的可以有多个。...「关于这三种选择器的优先级:」 id选择器最大,选择器次之,标签选择器最小。...「①层级选择器」 格式为:div+空格+标签名{} 标签标签之间是用空格隔开的。 在HTML中有一个div标签,这个标签和CSS结合起来很有用。...「②并集选择器」 格式为:div+逗号+标签名{} 标签标签之间是用逗号隔开的,也就是相当于将标签选择器并起来了,同时修改多个标签的样式。 ?

    49730

    CSS】381- 提升你的CSS选择器技巧

    此外,还可以检查属性是否存在,参看下面的一个例子: button[icon] 匹配 标签中有 icon 属性存在的元素 ,不论 icon 属性是否有值。 更多相关的例子: ?...用户界面选择器 如果你处理过表单样式,那么你之前一定遇到过这些伪选择器: :enabled 启用状态(可激活获取焦点)的元素。 :disabled 禁用状态的元素。...(codepen链接:https://codepen.io/dgwyer/embed/ELMoNK) 下面的伪选择器可以匹配输入值是否有效,以及在提交表单之前检查必填项是否填写。...:target 选择器匹配的是一个ID元素,其ID当前URL片段相对应。...使用CSS可以做很多很酷的事情,这在几年前是不可能实现的。 非常炫目的效果和动画现在都可以CSS实现,不用任何的JavaScript,这真的让人感到兴奋。

    1.1K40

    如何使用 CSS 制作四子连珠游戏

    序言:你有没有想过单纯使用 CSS 也可以制作一款游戏?甚至可以双人对决?这是一篇非常有趣的文章,作者详细讲解了使用 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法。...“ CSS”演示很早就有了,但是随着浏览器和CSS的发展,新的挑战又出现了。CSS 和 HTML 预处理器也促进了 CSS 演示的发展。...有时候,预处理程序用于硬编码每个可能的场景,比如 :checked 的长字符串和相邻兄弟选择器。 在本文中,我将介绍使用CSS 制作的四子连珠游戏的关键思想。...:nth-child 选择器 “统计”父中的子元素,包括所有类型,、伪等等。:nth-of-type 选择器 “统计”在父中某类型的子类,不包括。...下一个目标是检测玩家是否赢得了游戏。要想赢得比赛,玩家必须在一列、一行对角线上放四个圆盘。在许多编程语言中,这是一个非常简单的任务,但是在 CSS 世界中,这是一个巨大的挑战。

    2K20

    WebMonitor 实时监控网页变化,并发送通知程序

    /string() css selector 获取元素文本信息,在浏览器得到的选择器后加::text,如 div#id3 > h3 => div#id3 > h3::text 获取元素属性信息,在浏览器得到的选择器后加...::attr(属性名),如想获取元素href值 div#id3 > h3 => div#id3 > h3::attr(href) JsonPath 针对返回 json 数据的接口, 可以使用 JsonPath...是否选择无头浏览器 如果源网页没有异步加载,可以不使用无头浏览器获取网页 建议先选择不使用,假如提交时提示获取不到文本信息,再使用无头浏览器尝试 正则表达式 如果获取到的文本信息有冗余,可以采用正则进一步筛选...监测到变化,最新值:{最新值} 成功执行但未监测到变化 出错显示异常信息 可以通过修改任务状态,暂停重启任务 数据导入导出 WARNING: 网页监控任务和RSS监控任务的通知方式是通过外键通知方式表连接...,在数据表发生变化的情况下,外键id可能失效无法和导出时保持一致,建议每次导入任务数据后检查通知方式是否正常。

    12.6K32
    领券