p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; text-align: center; font: 18.0px Helvetica; -webkit-text-stroke: #000000} p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Helvetica; -webkit-text-stroke: #000000} p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Helvetica; -webkit-text-stroke: #000000; min-height: 18.0px} p.p4 {margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px Helvetica; -webkit-text-stroke: #000000} span.s1 {font-kerning: none}

Classy css主题选择器

原文地址：https://www.drupal.org/docs/8/theming-drupal-8/classy-themes-css-selectors

更新于2016年8月31日

 

记录所有在classy Drupal8 RC 2主题的css单元选择器

 

格式：

.foo{ }
.foo-bar{ }

filename.html.twig / filename.css

 

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

 

布局

 

主体

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

file: html.html.twig

 

页面

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

file: page.html.twig

 

区域

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

file: region.html.twig

 

 

书本导出

.section-[i] { }

file: layout/book-export-html.html.twig

 

 

维护页面

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

file: layout/maintenance-page.html.twig

 

区块

 

基本的

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

file: block/block.html.twig

 

 

表单

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

file: block/block--search-form-block.html.twig

 

 

菜单

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

file: block/block--system-menu-block.html.twig

 

 

选项卡

.tabs { }

file: block/block--local-tasks-block.html.twig

 

 

本地动作

.action-links { }

file: block/block--local-actions-block.html.twig

 

 

品牌相关

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

file: block/block—system-branding-block.html.twig

 

内容

 

页标题

.page-title { }

file: content/page-title.html.twig

 

 

节点

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

file: content/node.html.twig

 

 

节点链接

.node__links { }

file: content/links--node.html.twig

 

 

术语

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

file: content/taxonomy-term.html.twig

 

 

搜索结果

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

file: 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 { }

file: content/comment.html.twig

 

 

聚合器

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

file: content/aggregator-item.html.twig

 

 

标记

.marker { }

file: content/mark.html.twig

 

 

书籍节点导出

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

file: content/book-node-export-html.html.twig

 

 

 

编辑内容

 

节点编辑表单

.layout-node-form { }
.clearfix { }
.layout-region { }
.layout-region-node-main { }
.layout-region-node-secondary { }
.layout-region-node-footer { }

file: content-edit/node-edit-form.html.twig

 

 

节点添加列表

.node-type-list { }

file: content-edit/node-add-list.html.twig

 

 

文本格式容器

.js-text-format-wrapper { }
.text-format-wrapper { }
.js-form-item { }
.form-item { }
.description { }

file: content-edit/text-format-wrapper.html.twig

 

 

文件表单组件

.js-form-managed-file { }
.form-managed-file { }

file: content-edit/file-managed-file.html.twig

 

 

图形字段组件

.image-preview { }
.image-widget-data { }

file: content-edit/image-widget.html.twig

 

 

筛选标题

.caption { }
.caption-[tag] { }

file: content-edit/filter-caption.html.twig

 

 

筛选参考

.filter-guidelines-item { }
.filter-guidelines-[format.id] { }
.label { }

file: content-edit/filter-guidelines.html.twig

 

 

筛选提示框

.compose-tips { }
.filter-type { }
.filter-[name] { }
.tips { }
.filter-[item.id] { }

file: content-edit/filter-tips.html.twig

 

 

 

数据集

 

项列表

.item-list--[context.list_style] { }
.item-list__[context.list_style] { }
.item-list { }

file: dataset/item-list.html.twig

 

 

搜索结果项目列表

.search-results { }
.[context.plugin]-results { }

file: dataset/item-list--search-results.html.twig

 

 

表格

.is-active { }
.odd { }
.even { }
.empty { }
.message { }

file: dataset/table.html.twig

 

 

论坛和容器的列表

.[forum.zebra] { }
.container { }
.forum-list__forum { }
.indented { }
.forum__icon { }
.forum-status-[forum.icon_class] { }
.visually-hidden { }
.forum__name { }
.forum__description { }
.forum__topics { }
.forum__posts { }
.forum__last-reply { }

file: dataset/forum-list.html.twig

 

 

论坛

.forum { }

file: dataset/forums.html.twig

 

 

论坛帖子状态图标

.forum__icon { }
.forum__topic-status--[icon_status] { }
.visually-hidden { }

file: dataset/forum-icon.html.twig

 

 

聚合器接口

.aggregator-feed { }

file: dataset/aggregator-feed.html.twig

 

 

 

字段

 

基本的

.field { }
.field--name-[field_name] { }
.field--type-[field_type] { }
.field--label-[label_display] { }
.field__label { }
.visually-hidden { }
.field__items { }
.field__item { }

file: field/field.html.twig

 

 

字节标题字段

.field { }
.field--name-[field_name] { }
.field--type-[field_type] { }
.field--label-[label_display] { }

file: field/field--node--title.html.twig

 

 

字节创建字段

.field { }
.field--name-[field_name] { }
.field--type-[field_type] { }
.field--label-[label_display] { }

file: field/field--node--created.html.twig

 

 

字节用户字段

.field { }
.field--name-[field_name] { }
.field--type-[field_type] { }
.field--label-[label_display] { }

file: field/field--node--uid.html.twig

 

 

文本字段

.clearfix { }
.text-formatted { }

file: field/field--text.html.twig

 

 

图像字段

.image-style-[style_name] { }

file: field/image.html.twig

 

 

日期／时间元素

.datetime { }

file: field/time.html.twig

 

 

含有独立标题和地址元素的链接

.link-item { }
.link-title { }
.link-url { }

file: field/link-formatter-link-separate.html.twig

 

 

评论字节

.field { }
.field--name-[field_name] { }
.field--type-[field_type] { }
.field--label-[label_display] { }
.comment-wrapper { }
.title { }
.visually-hidden { }
.comment-form__title { }

file: field/field--comment.html.twig

 

 

 

表单

 

子元素包裹容器

.js-form-wrapper { }
.form-wrapper { }

file: form/container.html.twig

 

 

字段集及其子项

.js-form-item { }
.form-item { }
.js-form-wrapper { }
.form-wrapper { }
.fieldset-legend { }
.js-form-required { }
.form-required { }
.fieldset-wrapper { }
.form-item--error-message { }
.field-prefix { }
.field-suffix { }
.description { }

file: form/fieldset.html.twig

 

 

表单元素

.js-form-item { }
.form-item { }
.js-form-type-[type] { }
.form-type-[type] { }
.js-form-item-[name] { }
.form-item-[name] { }
.form-no-label { }
.form-disabled { }
.form-item--error { }
.description { }
.visually-hidden { }
.field-prefix { }
.field-suffix { }
.form-item--error-message { }

file: form/form-element.html.twig

 

 

字段元素标签

.option { }
.visually-hidden { }
.js-form-required { }
.form-required { }

file: form/form-element-label.html.twig

 

 

个体字节元素

.js-form-item { }
.form-item { }
.description { }
.clearfix { }

file: form/field-multiple-value-form.html.twig

 

 

文本区

.form-textarea { }
.resize-[resizable] { }
.required { }
.form-textarea-wrapper { }

file: form/textarea.html.twig

 

 

日期时间字节容器

.label { }
.js-form-required { }
.form-required { }
.form-item--error-message { }
.description { }

file: form/datetime-wrapper.html.twig

 

 

日期时间

.container-inline { }

file: form/datetime-form.html.twig

 

 

多选框

.form-checkboxes { }

file: form/checkboxes.html.twig

 

 

单选框

.form-radios { }

file: form/radios.html.twig

 

 

细节

.details-wrapper { }
.form-item--error-message { }
.details-description { }

file: form/details.html.twig

 

 

下位按钮容器

.dropbutton-wrapper { }
.dropbutton-widget { }

file: form/dropbutton-wrapper.html.twig

 

 

 

导航

 

管理工具栏

.toolbar { }
.toolbar-bar { }
.visually-hidden { }
.toolbar-tab { }
.toolbar-lining { }
.clearfix { }
.toolbar-tray-name { }

file: navigation/toolbar.html.twig

 

 

菜单

.menu { }
.menu-item { }
.menu-item--expanded { }
.menu-item--collapsed { }
.menu-item--active-trail { }

file: navigation/menu.html.twig

 

 

面包屑轨迹

.breadcrumb { }
.visually-hidden { }

file: navigation/breadcrumb.html.twig

 

 

链接集

.[key] { }

file: navigation/links.html.twig

 

 

一级菜单与二级菜单

.visually-hidden { }
.tabs { }
.primary { }
.secondary { }

file: navigation/menu-local-tasks.html.twig

 

 

本地任务链接

.is-active { }

file: navigation/menu-local-task.html.twig

 

 

区块里的书本目录

.book-block-menu { }

file: navigation/book-all-books-block.html.twig

 

 

书本树

.menu { }
.menu-item { }
.menu-item--expanded { }
.menu-item--collapsed { }
.menu-item--active-trail { }

file: navigation/book-tree.html.twig

 

 

导航书本

.book-navigation { }
.visually-hidden { }
.book-pager { }
.book-pager__item { }
.book-pager__item--previous { }
.book-pager__item--center { }
.book-pager__item--next { }

file: navigation/book-navigation.html.twig

 

 

分页

.pager { }
.visually-hidden { }
.pager__items { }
.js-pager__items { }
.pager__item { }
.pager__item--first { }
.pager__item--previous { }
.pager__item--ellipsis { }
.is-active { }
.pager__item--next { }
.pager__item--last { }

file: navigation/pager.html.twig

 

 

 

视图

 

主要视图模版

.view { }
.view-[id] { }
.view-display-id-[display_id] { }
.js-view-dom-id-[dom_id] { }
.view-header { }
.view-filters { }
.attachment { }
.attachment-before { }
.view-content { }
.view-empty { }
.attachment-after { }
.view-footer { }
.feed-icons { }

file: views/views-view.html.twig

 

 

暴露视图表单

.form--inline { }
.clearfix { }

file: views/views-exposed-form.html.twig

 

 

视图－未格式化行视图

.views-row { }

file: views/views-view-unformatted.html.twig

 

 

网格显示行

.views-view-grid { }
.[options.alignment] { }
.cols-[options.columns] { }
.clearfix { }
.views-row { }
.views-col { }
.row-[loop.index] { }
.col-[loop.index] { }

file: views/views-view-grid.html.twig

 

 

视图－表格视图

.views-table { }
.views-view-table { }
.cols-[header] { }
.responsive-enabled { }
.sticky-enabled { }
.views-field { }
.views-field-[fields[key]] { }
.views-field-[field] { }

file: views/views-view-table.html.twig

 

 

单一视图分组

.view-grouping { }
.view-grouping-header { }
.view-grouping-content { }

file: views/views-view-grouping.html.twig

 

 

汇总行列表

.item-list { }
.views-summary { }
.is-active { }

file: views/views-view-summary.html.twig

 

 

未格式化汇总链接

.views-summary { }
.views-summary-unformatted { }
.is-active { }

file: views/views-view-summary-unformatted.html.twig

 

 

视图迷你网页

.pager { }
.pager__heading { }
.visually-hidden { }
.pager__items { }
.js-pager__items { }
.pager__item { }
.pager__item--previous { }
.is-active { }
.pager__item--next { }

file: views/views-mini-pager.html.twig

 

 

 

用户

 

论坛帖子提交字符

.submitted { }

file: user/forum-submitted.html.twig

 

 

用户数据

.profile { }

file: user/user.html.twig

 

 

用户名

.username { }

file: user/username.html.twig

 

 

 

杂项

 

状态信息

.message { }
.messages--[type] { }
.visually-hidden { }
.messages__list { }
.messages__item { }

file: misc/status-messages.html.twig

 

 

进程条

.progress { }
.progress__label { }
.progress__track { }
.progress__bar { }
.progress__percentage { }
.progress__description { }

file: misc/progress-bar.html.twig

 

 

含RDF属性的空span

.rdf-meta { }
.hidden { }

file: misc/rdf-metadata.html.twig

 

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

菜单 

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

file: components/menu.css

 

 

项列表

.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 { }

file: components/item-list.css

 

 

面包屑

.breadcrumb { }
.breadcrumb ol { }
[dir="rtl"] .breadcrumb ol { }
.breadcrumb li { }
.breadcrumb li:before { }
.breadcrumb li:first-child:before { }

file: components/breadcrumb.css

 

 

标签

div.tabs { }
ul.tabs { }
.tabs > li { }
[dir="rtl"] .tabs > li { }
.tabs a { }
.tabs a.is-active { }
.tabs a:focus { }
.tabs a:hover { }

file: components/tabs.css

 

 

链接按钮和动作链接

.action-links { }
[dir="rtl"] .action-links { }
.action-links li { }
.action-links li:first-child { }
[dir="rtl"] .action-links li:first-child { }
.button-action { }
.button-action:before { }
[dir="rtl"] .button-action:before { }

file: components/action-links.css

 

 

链接

ul.inline { }
ul.links.inline { }
[dir="rtl"] ul.inline { }
[dir="rtl"] ul.links.inline { }
ul.inline li { }
ul.links a.is-active { }

file: components/links.css

 

 

链接

button.link { }
label button.link { }

file: components/link.css

 

 

字节

.node--unpublished { }

file: components/node.css

 

 

可折叠集字段

.collapse-processed > summary { }
.collapse-processed > summary:before { }
[dir="rtl"] .collapse-processed > summary:before { }
.collapse-processed:not([open]) > summary:before { }
[dir="rtl"] .collapse-processed:not([open]) > summary:before { }

file: components/collapse-processed.css

 

 

字段

.field__label { }
.field--label-inline .field__label { }
.field--label-inline .field__items { }
.field--label-inline .field__label { }
.field--label-inline > .field__item { }
.field--label-inline .field__items { }
[dir="rtl"] .field--label-inline .field__label { }
[dir="rtl"] .field--label-inline .field__items { }
.field--label-inline .field__label::after { }

file: components/field.css

 

 

行内表单

.form--inline .form-item { }
[dir="rtl"] .form--inline .form-item { }
.form--inline .form-item-separator { }
[dir="rtl"] .form--inline .form-item-separator { }
.form--inline .form-actions { }
[dir="rtl"] .form--inline .form-actions { }

file: components/inline-form.css

 

 

行内项

.container-inline label:after { }
.container-inline .label:after { }
.form-type-radios .container-inline label:after { }
.form-type-radios .container-inline .form-type-radio { }
.container-inline .form-actions { }
.container-inline.form-actions { }

file: components/container-inline.css

 

 

表单组件

form .field-multiple-table { }
form .field-multiple-table .field-multiple-drag { }
[dir="rtl"] form .field-multiple-table .field-multiple-drag { }
form .field-multiple-table .field-multiple-drag .tabledrag-handle { }
[dir="rtl"] form .field-multiple-table .field-multiple-drag .tabledrag-handle { }
form .field-add-more-submit { }
.form-item { }
.form-actions { }
tr.odd .form-item { }
tr.even .form-item { }
.form-composite > .fieldset-wrapper > .description { }
.form-item .description { }
label.option { }
.form-composite > legend { }
.label { }
.form-checkboxes .form-item { }
.form-radios .form-item { }
.form-type-radio .description { }
.form-type-checkbox .description { }
[dir="rtl"] .form-type-radio .description { }
[dir="rtl"] .form-type-checkbox .description { }
.marker { }
.form-required:after { }
abbr.tabledrag-changed { }
abbr.ajax-changed { }
.form-item input.error { }
.form-item textarea.error { }
.form-item select.error { }
.form-item--error-message:before { }

file: components/form.css

 

 

文本区域

.form-textarea-wrapper textarea { }

file: components/textarea.css

 

 

文件模块

.file { }
[dir="rtl"] .file { }
.file--general { }
.file--application-octet-stream { }
.file--package-x-generic { }
.file--x-office-spreadsheet { }
.file--x-office-document { }
.file--x-office-presentation { }
.file--text-x-script { }
.file--text-html { }
.file--text-plain { }
.file--application-pdf { }
.file--application-x-executable { }
.file--audio { }
.file--video { }
.file--text { }
.file--image { }

file: components/file.css

 

 

图片上传组件

.image-preview { }
[dir="rtl"] .image-preview { }
.image-widget-data { }
[dir="rtl"] .image-widget-data { }
.image-widget-data .text-field { }

file: components/image-widget.css

 

 

可折叠细节

details { }
details > .details-wrapper { }
summary { }

file: components/details.css

 

 

按钮

.button { }
.image-button { }
.button:first-child { }
.image-button:first-child { }

file: components/button.css

 

 

进程条

.progress__track { }
.progress__bar { }
[dir="rtl"] .progress__bar { }

@-webkit-keyframes animate-stripes { }
@-ms-keyframes animate-stripes { }
@keyframes animate-stripes { }

file: components/progress.css

 

 

系统信息

.messages { }
[dir="rtl"] .messages { }
.messages + .messages { }
.messages__list { }
.messages__item + .messages__item { }
.messages--status { }
[dir="rtl"] .messages--status { }
.messages--warning { }
[dir="rtl"] .messages--warning { }
.messages--error { }
[dir="rtl"] .messages--error { }
.messages--error p.error { }

file: components/messages.css

 

 

搜索结果

.search-results { }

file: components/search-results.css

 

 

更多链接

.more-link { }
[dir="rtl"] .more-link { }

file: components/more-link.css

 

 

分页

.pager__items { }
.pager__item { }
.pager__item.is-active { }

file: components/pager.css

 

 

论坛模块

.forum__description { }
.forum__icon { }
[dir="rtl"] .forum__icon { }
.forum__title { }
.forum .indented { }
[dir="rtl"] .forum .indented { }
.forum__topic-status--new { }
.forum__topic-status--hot { }
.forum__topic-status--hot-new { }
.forum__topic-status--sticky { }
.forum__topic-status--closed { }

file: components/forum.css

 

 

缩进链式注解

.indented { }
[dir="rtl"] .indented { }

file: components/indented.css

 

 

暴露筛选器

.exposed-filters .filters { }
[dir="rtl"] .exposed-filters .filters { }
.exposed-filters .form-item { }
.exposed-filters .form-item label { }
[dir="rtl"] .exposed-filters .form-item label { }
.exposed-filters .form-select { }
.exposed-filters .current-filters { }
.exposed-filters .current-filters .placeholder { }
.exposed-filters .additional-filters { }
[dir="rtl"] .exposed-filters .additional-filters { }

file: components/exposed-filters.css

 

 

表格排序指示器

th.is-active img { }
td.is-active { }

file: components/tablesort.css

 

 

表格选取

tr.selected td { }
td.checkbox { }
th.checkbox { }
[dir="rtl"] td.checkbox { }
[dir="rtl"] th.checkbox { }

file: components/tableselect.css

 

 

表格拖拽

tr.drag { }
tr.drag-previous { }
body div.tabledrag-changed-warning { }

file: components/tabledrag.css

 

 

下位按钮

.js .dropbutton-widget { }
.js .dropbutton-widget:hover { }
.dropbutton .dropbutton-action > * { }
.dropbutton .secondary-action { }
.dropbutton-multiple .dropbutton { }
[dir="rtl"] .dropbutton-multiple .dropbutton { }
.dropbutton-multiple .dropbutton .dropbutton-action > * { }
[dir="rtl"] .dropbutton-multiple .dropbutton .dropbutton-action > * { }

file: components/dropbutton.css

 

 

模式窗口

.ui-dialog--narrow { }

file: components/ui-dialog.css

 

 

对话

.ui-dialog { }
.ui-dialog .ui-dialog-titlebar { }
.ui-dialog .ui-dialog-titlebar-close { }
.ui-dialog .ui-dialog-buttonpane { }
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { }
.ui-dialog .ui-dialog-buttonpane .ui-button-text-only .ui-button-text { }
.ui-dialog .ui-dialog-content .form-actions { }
.ui-dialog .ajax-progress-throbber { }
.ui-dialog .ajax-progress-throbber .throbber { }
.ui-dialog .ajax-progress-throbber .message { }

file: components/dialog.css

 

 

用户模块

.password-strength__meter { }
.password-strength__indicator { }
.password-strength__indicator.is-weak { }
.password-strength__indicator.is-fair { }
.password-strength__indicator.is-good { }
.password-strength__indicator.is-strong { }
.password-confirm { }
.password-field { }
.password-strength { }
.password-confirm-match { }
.password-suggestions { }
.password-suggestions ul { }
.confirm-parent { }
.password-parent { }
[dir="rtl"] .confirm-parent { }
[dir="rtl"] .password-parent { }
.password-confirm .ok { }
.password-confirm .error { }

file: components/user.css

 

 

书本模块

.book-navigation .menu { }
.book-navigation .book-pager { }
.book-pager__item { }
.book-pager__item--previous { }
[dir="rtl"] .book-pager__item--previous { }
.book-pager__item--center { }
.book-pager__item--next { }
[dir="rtl"] .book-pager__item--next { }

file: components/book-navigation.css

 

 

图标

.icon-help { }
[dir="rtl"] .icon-help { }
.feed-icon { }

file: components/icons.css