pbootcms网站模板|日韩1区2区|织梦模板||网站源码|日韩1区2区|jquery建站特效-html5模板网

每隔三個(gè)元素設(shè)置樣式?

Style every third element?(每隔三個(gè)元素設(shè)置樣式?)
本文介紹了每隔三個(gè)元素設(shè)置樣式?的處理方法,對(duì)大家解決問(wèn)題具有一定的參考價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧!

問(wèn)題描述

如何使用純 CSS 設(shè)置每三個(gè)元素的樣式.

How can I style every third element with plain CSS.

我見(jiàn)過(guò)這樣的問(wèn)題,但它們涉及到 javascript.我想要一個(gè)簡(jiǎn)單的 CSS 解決方案.我知道我可以將 evenodd:nth-child 一起使用,但 :nth-child(third) 不能:nth-child(3)

I have seen questions like this, but they involve javascript. I want a plain CSS solution. I know I can use even or odd with :nth-child but :nth-child(third) doesn't work neither does :nth-child(3)

例子:

<section>
  <div class="someclass"></div>             STYLE
  <div id="someId"></div>                   DON'T STYLE
  <div class="someotherclass"></div>        DON'T STYLE
  <div id="someotherId"></div>              STYLE
  <div class="someclass"></div>             DON'T STYLE
  <div id="someId"></div>                   DON'T STYLE
  <div class="someotherclass"></div>        STYLE
</section>

這可以通過(guò) CSS 實(shí)現(xiàn)嗎?沒(méi)有 javascript 或 jQuery?

Is this possible with CSS - no javascript or jQuery?

推薦答案

純 CSS 可以做到這一點(diǎn).無(wú)需 javascript.

This is possible with pure CSS. No javascript needed.

使用 nth-child 選擇器.1

section > div:nth-child(3n+1) {
    background:red;
}

其中1"是樣式的開(kāi)始位置,3 表示應(yīng)該每隔三個(gè)元素設(shè)置樣式.這里解釋得更好.

Where '1' is where the style starts, and 3 indicates that it should style every third element. It is explained much better here.

jsFiddle 演示在這里.

1注意 - 正如其他人所提到的,這是 不完全支持 IE8 及以下版本.

這篇關(guān)于每隔三個(gè)元素設(shè)置樣式?的文章就介紹到這了,希望我們推薦的答案對(duì)大家有所幫助,也希望大家多多支持html5模板網(wǎng)!

【網(wǎng)站聲明】本站部分內(nèi)容來(lái)源于互聯(lián)網(wǎng),旨在幫助大家更快的解決問(wèn)題,如果有圖片或者內(nèi)容侵犯了您的權(quán)益,請(qǐng)聯(lián)系我們刪除處理,感謝您的支持!

相關(guān)文檔推薦

Why shouldn#39;t I use ID selectors in CSS?(為什么我不應(yīng)該在 CSS 中使用 ID 選擇器?)
What does img[class*=quot;alignquot;] mean in CSS?(CSS 中的 img[class*=“align] 是什么意思?)
CSS: Last element on line(CSS:最后一個(gè)元素)
How do I select every other div class element using just CSS (no js)(如何僅使用 CSS(無(wú) js)選擇所有其他 div 類元素)
Tool for checking unused CSS selectors?(檢查未使用的 CSS 選擇器的工具?)
How to show the first N elements of a block and hide the others in css?(如何在css中顯示塊的前N個(gè)元素并隱藏其他元素?)
主站蜘蛛池模板: 次氯酸钠厂家,涉水级次氯酸钠,三氯化铁生产厂家-淄博吉灿化工 | 临海涌泉蜜桔官网|涌泉蜜桔微商批发代理|涌泉蜜桔供应链|涌泉蜜桔一件代发 | 防锈油-助焊剂-光学玻璃清洗剂-贝塔防锈油生产厂家 | 安全阀_弹簧式安全阀_美标安全阀_工业冷冻安全阀厂家-中国·阿司米阀门有限公司 | 加中寰球移民官网-美国移民公司,移民机构,移民中介,移民咨询,投资移民 | 深圳市宏康仪器科技有限公司-模拟高空低压试验箱-高温防爆试验箱-温控短路试验箱【官网】 | 深圳激光打标机_激光打标机_激光焊接机_激光切割机_同体激光打标机-深圳市创想激光科技有限公司 深圳快餐店设计-餐饮设计公司-餐饮空间品牌全案设计-深圳市勤蜂装饰工程 | 浙江红酒库-冰雕库-气调库-茶叶库安装-医药疫苗冷库-食品物流恒温恒湿车间-杭州领顺实业有限公司 | 搜木网 - 木业全产业链交易平台,免费搜货、低价买货! | 扬尘在线监测系统_工地噪声扬尘检测仪_扬尘监测系统_贝塔射线扬尘监测设备「风途物联网科技」 | 安徽净化工程设计_无尘净化车间工程_合肥净化实验室_安徽创世环境科技有限公司 | 厦门ISO认证|厦门ISO9001认证|厦门ISO14001认证|厦门ISO45001认证-艾索咨询专注ISO认证行业 | 全自动贴标机-套标机-工业热风机-不干胶贴标机-上海厚冉机械 | 全自动定氮仪-半自动凯氏定氮仪厂家-祎鸿仪器 | 嘉兴泰东园林景观工程有限公司_花箱护栏 | 洗瓶机厂家-酒瓶玻璃瓶冲瓶机-瓶子烘干机-封口旋盖压盖打塞机_青州惠联灌装机械 | 菏泽知彼网络科技有限公司| 重庆网站建设,重庆网站设计,重庆网站制作,重庆seo,重庆做网站,重庆seo,重庆公众号运营,重庆小程序开发 | 定制奶茶纸杯_定制豆浆杯_广东纸杯厂_[绿保佳]一家专业生产纸杯碗的厂家 | 杭州货架订做_组合货架公司_货位式货架_贯通式_重型仓储_工厂货架_货架销售厂家_杭州永诚货架有限公司 | 维泰克Veertek-锂电池微短路检测_锂电池腐蚀检测_锂电池漏液检测 | 膜结构车棚|上海膜结构车棚|上海车棚厂家|上海膜结构公司 | 酒店厨房设计_中央厨房设计_北京商用厨房设计公司-奇能商厨 | SPC工作站-连杆综合检具-表盘气动量仪-内孔缺陷检测仪-杭州朗多检测仪器有限公司 | 轴流风机-鼓风机-离心风机-散热风扇-罩极电机,生产厂家-首肯电子 | 模具ERP_模具管理系统_模具mes_模具进度管理_东莞市精纬软件有限公司 | 生物制药洁净车间-GMP车间净化工程-食品净化厂房-杭州波涛净化设备工程有限公司 | 氢氧化钾厂家直销批发-济南金昊化工有限公司 | 泰来华顿液氮罐,美国MVE液氮罐,自增压液氮罐,定制液氮生物容器,进口杜瓦瓶-上海京灿精密机械有限公司 | 定制/定做衬衫厂家/公司-衬衫订做/订制价格/费用-北京圣达信 | LED投光灯-工矿灯-led路灯头-工业灯具 - 山东普瑞斯照明科技有限公司 | 无锡网站建设-做网站-建网站-网页设计制作-阿凡达建站公司 | 注塑_注塑加工_注塑模具_塑胶模具_注塑加工厂家_深圳环科 | 软文推广发布平台_新闻稿件自助发布_媒体邀约-澜媒宝 | 金属管浮子流量计_金属转子流量计厂家-淮安润中仪表科技有限公司 | 水冷散热器_水冷电子散热器_大功率散热器_水冷板散热器厂家-河源市恒光辉散热器有限公司 | 辐射色度计-字符亮度测试-反射式膜厚仪-苏州瑞格谱光电科技有限公司 | 阳光1号桔柚_无核沃柑_柑橘新品种枝条苗木批发 - 苧金网 | 包塑丝_高铁绑丝_地暖绑丝_涂塑丝_塑料皮铁丝_河北创筹金属丝网制品有限公司 | 五轴加工中心_数控加工中心_铝型材加工中心-罗威斯 | 扬尘监测_扬尘监测系统_带证扬尘监测设备 - 郑州港迪科技有限公司 |