你是否想过如何设计WordPress主题的不同元素?每个主题都不一样,但是有一些CSS的class和id是由WordPress生成的。我们将逐一介绍一些最重要的默认WordPress样式,方便初学者快速入门wordpress模板制作的样式定义

  默认的body样式

.rtl {}
.home {}
.blog {}
.archive {}
.date {}
.search {}
.paged {}
.attachment {}
.error404 {}
.single postid-(id) {}
.attachmentid-(id) {}
.attachment-(mime-type) {}
.author {}
.author-(user_nicename) {}
.category {}
.category-(slug) {}
.tag {}
.tag-(slug) {}
.page-parent {}
.page-child parent-pageid-(id) {}
.page-template page-template-(template file name) {}
.search-results {}
.search-no-results {}
.logged-in {}
.paged-(page number) {}
.single-paged-(page number) {}
.page-paged-(page number) {}
.category-paged-(page number) {}
.tag-paged-(page number) {}
.date-paged-(page number) {}
.author-paged-(page number) {}
.search-paged-(page number) {}

  默认的post样式

.post-id {}
.post {}
.page {}
.attachment {}
.sticky {}
.hentry {}
.category-misc {}
.category-example {}
.tag-news {}
.tag-wordpress {}
.tag-markup {}

  格式样式

.format-image {}
.format-gallery {}
.format-chat {}
.format-link {}
.format-quote {}
.format-status {}
.format-video {}

  默认的菜单样式

#header .main-menu{} // container class
#header .main-menu ul {} // container class first unordered list
#header .main-menu ul ul {} //unordered list within an unordered list
#header .main-menu li {} // each navigation item
#header .main-menu li a {} // each navigation item anchor
#header .main-menu li ul {} // unordered list if there is drop down items
#header .main-menu li li {} // each drop down navigation item
#header .main-menu li li a {} // each drap down navigation item anchor .current_page_item{} // Class for Current Page
.current-cat{} // Class for Current Category
.current-menu-item{} // Class for any other current Menu Item
.menu-item-type-taxonomy{} // Class for a Category
.menu-item-type-post_type{} // Class for Pages
.menu-item-type-custom{} // Class for any custom item that you added
.menu-item-home{} // Class for the Home Link

  默认的WISIWYG编辑器样式

.entry-content img {}
.alignleft, img.alignleft {}
.alignright, img.alignright {}
.aligncenter, img.aligncenter {}
.alignnone, img.alignnone {} .wp-caption {}
.wp-caption img {}
.wp-caption p.wp-caption-text {} .wp-smiley {} blockquote.left {}
blockquote.right {} .gallery dl {}
.gallery dt {}
.gallery dd {}
.gallery dl a {}
.gallery dl img {}
.gallery-caption {} .size-full {}
.size-large {}
.size-medium {}
.size-thumbnail {}

  默认的widget样式

.widget {}

#searchform {}
.widget_search {}
.screen-reader-text {} .widget_meta {}
.widget_meta ul {}
.widget_meta ul li {}
.widget_meta ul li a {} .widget_links {}
.widget_links ul {}
.widget_links ul li {}
.widget_links ul li a {} .widget_archive {}
.widget_archive ul {}
.widget_archive ul li {}
.widget_archive ul li a {}
.widget_archive select {}
.widget_archive option {} .widget_pages {}
.widget_pages ul {}
.widget_pages ul li {}
.widget_pages ul li a {} .widget_links {}
.widget_links li:after {}
.widget_links li:before {}
.widget_tag_cloud {}
.widget_tag_cloud a {}
.widget_tag_cloud a:after {}
.widget_tag_cloud a:before {} .widget_calendar {}
#calendar_wrap {}
#calendar_wrap th {}
#calendar_wrap td {}
#wp-calendar tr td {}
#wp-calendar caption {}
#wp-calendar a {}
#wp-calendar #today {}
#wp-calendar #prev {}
#wp-calendar #next {}
#wp-calendar #next a {}
#wp-calendar #prev a {} .widget_categories {}
.widget_categories ul {}
.widget_categories ul li {}
.widget_categories ul ul.children {}
.widget_categories a {}
.widget_categories select{}
.widget_categories select#cat {}
.widget_categories select.postform {}
.widget_categories option {}
.widget_categories .level-0 {}
.widget_categories .level-1 {}
.widget_categories .level-2 {}
.widget_categories .level-3 {} .recentcomments {}
#recentcomments {}
#recentcomments li {}
#recentcomments li a {}
.widget_recent_comments {} .widget_recent_entries {}
.widget_recent_entries ul {}
.widget_recent_entries ul li {}
.widget_recent_entries ul li a {} .textwidget {}
.widget_text {}
.textwidget p {}

  

.widget_pages ul, .widget_archive ul {}

  默认的评论表单样式

/*Comment Output*/

.commentlist .reply {}
.commentlist .reply a {} .commentlist .alt {}
.commentlist .odd {}
.commentlist .even {}
.commentlist .thread-alt {}
.commentlist .thread-odd {}
.commentlist .thread-even {}
.commentlist li ul.children .alt {}
.commentlist li ul.children .odd {}
.commentlist li ul.children .even {} .commentlist .vcard {}
.commentlist .vcard cite.fn {}
.commentlist .vcard span.says {}
.commentlist .vcard img.photo {}
.commentlist .vcard img.avatar {}
.commentlist .vcard cite.fn a.url {} .commentlist .comment-meta {}
.commentlist .comment-meta a {}
.commentlist .commentmetadata {}
.commentlist .commentmetadata a {} .commentlist .parent {}
.commentlist .comment {}
.commentlist .children {}
.commentlist .pingback {}
.commentlist .bypostauthor {}
.commentlist .comment-author {}
.commentlist .comment-author-admin {} .commentlist {}
.commentlist li {}
.commentlist li p {}
.commentlist li ul {}
.commentlist li ul.children li {}
.commentlist li ul.children li.alt {}
.commentlist li ul.children li.byuser {}
.commentlist li ul.children li.comment {}
.commentlist li ul.children li.depth-{id} {}
.commentlist li ul.children li.bypostauthor {}
.commentlist li ul.children li.comment-author-admin {} #cancel-comment-reply {}
#cancel-comment-reply a {} /*Comment Form */ #respond { }
#reply-title { }
#cancel-comment-reply-link { }
#commentform { }
#author { }
#email { }
#url { }
#comment
#submit
.comment-notes { }
.required { }
.comment-form-author { }
.comment-form-email { }
.comment-form-url { }
.comment-form-comment { }
.form-allowed-tags { }
.form-submit

  ytkah整理自https://www.wpbeginner.com/wp-themes/default-wordpress-generated-css-cheat-sheet-for-beginners/

wordpress默认css样式class和id集合的更多相关文章

  1. div+css样式表的id,class的常用命名规则

    div+css样式表的id的常用命名规则如下表所示: div+css样式表的id的常用命名规则如下表所示: 页头 header 登录条 loginBar 标志 logo 侧栏 sideBar 广告 B ...

  2. 更改file文件上传默认CSS样式

    前言: 多数时候我们需要表单上传文件,如图片.但是浏览器默认的input[file]样式很不友好, 需要我们自己手动修改. 如图基于bootstrap布局的表单, 但file文件上传样式不敢恭维. & ...

  3. 修改chrome浏览器默认css样式的方法

    最近重新用起了ubuntu kylin,然后又碰到之前让我感到有些难受的一个小问题:用chrome浏览部分网页时,一部分粗体字十分难看,就像是宋体直接加粗那样. 之前就觉得这样看起来很难受,但是找到的 ...

  4. 去除冗余 – 精简您的CSS样式代码

    讲讲常见的一些没有必要使用CSS代码情况,而这些不起作用可以去掉的CSS代码可能是我们经常忽视的.越是对CSS理解不够,越容易出现这些问题. 二.一些常见不必要CSS样式 1.与默认CSS样式一致 我 ...

  5. HTML中使用CSS样式(上)

    在每一个标签上都可以设置style属性,这就是CSS样式: <div style="height:48px;border: 1px solid red;text-align:cente ...

  6. CSS 样式分类

    CSS样式可以分为三大类:内联样式.内部样式表和外部样式表 1.内联样式(样式写在html标签里,只对该标签的内容起作用) <span style="color:red;font-si ...

  7. JavaScript --css样式

    1.JavaScript显示隐藏控制 隐藏:display:none; 显示:display:block; 参考链接:https://blog.csdn.net/sleepwalker_1992/ar ...

  8. 详解CSS设置默认字体样式

    浏览器默认的样式往往在不同的浏览器.不同的语言版本甚至不同的系统版本都有不同的设置,这就导致如 果直接利用默认样式的页面在各个浏览器下显示非常不一致,于是就有了类似YUI的reset之类用来尽量重写浏 ...

  9. 详解CSS网页布局中默认字体样式

    浏览器默认的样式往往在不同的浏览器.不同的语言版本甚至不同的系统版本都有不同的设置,这就导致如 果直接利用默认样式的页面在各个浏览器下显示非常不一致,于是就有了类似YUI的reset之类用来尽量重写浏 ...

随机推荐

  1. (转)解决mybatis的mapper.xml查询不出数据,结果一直为null问题

    背景:记录mybatis使用过程中遇到的相关问题. 解决mybatis的mapper.xml查询不出数据,结果一直为null问题 解决方案: 1 修改实体类与数据库字段名相同 2 修改sql查询语句, ...

  2. Jenkins工具学习(一)

    Jenkins的下载及安装 Jenkins下载地址:https://jenkins.io/download/ 下载后的直接解压安装 根据自己的喜好选择一种方式安装: 如果选择推荐安装,会自动下载一些插 ...

  3. Android studio中遇到的问题

    首先声明只是Android studio使用中遇到的问题纯属个人学习笔记,有什么不对的可以留言. 将脱壳后的java文件拖入到Android studio android studio 首先提示是ER ...

  4. 中级java面试经历

    2018年已经远去,2019年悄然而至.跳槽不仅是为了涨薪,更是为了锻炼自己,提高自己的能力.树挪死,人挪活.在一个公司呆的时间越长,就越老油条,从而失去不断前进的动力.现在下面就主要讲述我这一个月面 ...

  5. 宝塔webhook配合码云,本地git push 服务器自动pull

    emmmm,这其实是一个很简单的一件事情,但是有很多坑,记录一下 先大概讲一下原理吧,就是每次您 push 代码后,都会给远程 HTTP URL 发送一个 POST 请求 更多说明 » 然后在宝塔这边 ...

  6. Java学习:单列集合Collection

    集合 学习集合的目标: 会使用集合存储数据 会遍历集合,把数据取出来 掌握每种集合的特性 集合和数组的区别 数组的长度是固定的.集合的长度是可变的. 数组中存储的是同一类型的元素,可以存储基本数据类型 ...

  7. 封装:简要介绍自定义开发基于WPF的MVC框架

    原文:封装:简要介绍自定义开发基于WPF的MVC框架 一.目的:在使用Asp.net Core时,深感MVC框架作为页面跳转数据处理的方便,但WPF中似乎没有现成的MVC框架,由此自定义开发一套MVC ...

  8. EntityFramework执行Add-Miragtion或者Update-Database出闲ScriptHalted

    今天基友在他本机运行我的项目,执行ef还原数据的时候,一直出现ScriptHalted的错误. 找了下百度,只找到一个stackoverflowd的答案,没有看到中文的解决方案. 现在总结一下,并给出 ...

  9. Kafka分布式的消息顺序

    Kafka分布式的单位是partition,同一个partition用一个write ahead log组织,所以可以保证FIFO的顺序.不同partition之间不能保证顺序. 但是绝大多数用户都可 ...

  10. 换个语言学一下 Golang (10)——并行计算

    如果说Go有什么让人一见钟情的特性,那大概就是并行计算了吧. 做个题目 如果我们列出10以下所有能够被3或者5整除的自然数,那么我们得到的是3,5,6和9.这四个数的和是23.那么请计算1000以下( ...