Classy 主题的 CSS 选择器

记录 Drupal8 RC 2 classy 主题中所有的 CSS 类选择器。

格式:

.foo { }
.foo-bar { }

filename.html.twig / filename.css

Twig - Classy 主题中可用的 CSS 选择器：

布局（LAYOUT）

Body

.user-logged-in { }
.path-frontpage { }
.path-[root_path] { }
.node--type-[node_type] { }
.db-offline { }
.visually-hidden { }
.focusable { }
.skip-link { }

文件: html.html.twig
 

Page

.layout-container { }
.layout-content { }
.layout-sidebar-first { }
.layout-sidebar-second { }

文件: page.html.twig
 

Region

.region { }
.region-[region] { }

文件: region.html.twig
 

Book export

.section-[i] { }

文件: layout/book-export-html.html.twig
 

维护页面

.layout-container { }
.name-and-slogan { }
.site-name { }
.site-slogan { }
.layout-sidebar-first { }
.layout-sidebar-second { }

文件: layout/maintenance-page.html.twig

 

区块（BLOCK）

基础

.block { }
.block-[configuration.provider] { }
.block-[plugin_id] { }

文件: block/block.html.twig
 

搜索表单

.block { }
.block-search { }
.container-inline{ }

文件: block/block--search-form-block.html.twig
 

菜单

.block { }
.block-menu { }
.navigation { }
.menu--[derivative_plugin_id] { }
.visually-hidden { }

文件: block/block--system-menu-block.html.twig
 

标签（Tabs）

.tabs { }

文件: block/block--local-tasks-block.html.twig
 

本地操作

.action-links { }

文件: block/block--local-actions-block.html.twig
 

品牌区块

.site-logo { }
.site-name { }
.site-slogan { }

文件: block/block--system-branding-block.html.twig

 

内容（CONTENT）

页面标题

.page-title { }

文件: content/page-title.html.twig
 

节点（Node）

.node { }
.node--type-[node.bundle] { }
.node--promoted { }
.node--sticky { }
.node--unpublished { }
.node--view-mode-[view_mode] { }
.node__meta { }
.node__submitted { }
.node__content { }

文件: content/node.html.twig
 

节点链接

.node__links { }

文件: content/links--node.html.twig
 

分类术语

.taxonomy-term { }
.vocabulary-[term.bundle] { }
.content { }

文件: content/taxonomy-term.html.twig
 

搜索结果

.search-result__title { }
.search-result__snippet-info { }
.search-result__snippet { }
.search-result__info { }

文件: content/search-result.html.twig
 

评论

.comment { }
.js-comment { }
.[status] { }
.by-anonymous { }
.by-[commented_entity.EntityTypeId]-author { }
.hidden { }
.comment__meta { }
.comment__submitted { }
.parent { }
.visually-hidden { }
.content { }

文件: content/comment.html.twig
 

聚合器条目

.aggregator-item { }
.feed-item-title { }

文件: content/aggregator-item.html.twig
 

标记（Mark）

.marker { }

文件: content/mark.html.twig
 

书籍节点导出

.section-[depth] { }
.book-heading { }

文件: content/book-node-export-html.html.twig

 

CSS - Classy 主题中可用的 CSS 选择器：

菜单（Menu）

ul.menu { }
[dir="rtl"] ul.menu { }
.menu-item--expanded { }
.menu-item--collapsed { }
[dir="rtl"] .menu-item--collapsed { }
.menu-item { }
ul.menu a.is-active { }

文件: components/menu.css
 

条目列表（Item list）

.item-list .title { }
.item-list ul { }
.item-list li { }
[dir="rtl"] .item-list li { }
.item-list--comma-list { }
.item-list--comma-list .item-list__comma-list { }
.item-list__comma-list li { }
[dir="rtl"] .item-list--comma-list .item-list__comma-list { }
[dir="rtl"] .item-list__comma-list li { }

文件: components/item-list.css