我的wordpress网站的徽标位于div中
以下是链接
当我单击徽标时, 会出现一个巨大的矩形框。我已经尝试过outline属性和use-select属性, 但是它仍然存在。
#1在代码的相关部分(下面显示以供将来参考)中, 你需要包括以下CSS:
.custom-logo-link:focus {
outline: none;
}
由于当前集中在custom-logo-link上, 因此正在应用以下CSS:
@media only screen and (min-width: 768px)
a:focus, button:focus, .button.alt:focus, input:focus, textarea:focus, input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus {
outline-color: #7c7235;
}
a:focus, button:focus, .button.alt:focus, input:focus, textarea:focus, input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus {
outline-color: #7c7235;
}
a:focus, input:focus, textarea:focus, button:focus {
outline: 2px solid #96588a;
}
以及chrome的通用:focus。
【div被选中,并且单击它时会出现边框】你现有的(旧)代码:
/**
* Header
*/
.site-header {
background-color: #2c2d33;
padding-top: 1.618em;
padding-bottom: 1.618em;
color: #9aa0a7;
background-position: center center;
position: relative;
z-index: 999;
border-bottom: 1px solid transparent;
}
.site-header .site-logo-anchor, .site-header .site-logo-link, .site-header .custom-logo-link {
display: block;
margin-bottom: 0;
}
.site-header .site-logo-anchor img, .site-header .site-logo-link img, .site-header .custom-logo-link img {
width: 100%;
max-width: 210px;
}
.site-header .widget {
margin-bottom: 0;
}.home.blog .site-header, .home.page:not(.page-template-template-homepage) .site-header, .home.post-type-archive-product .site-header {
margin-bottom: 4.235801032em;
}.no-wc-breadcrumb .site-header {
margin-bottom: 4.235801032em;
}.no-wc-breadcrumb.page-template-template-homepage .site-header {
margin-bottom: 0;
}.header-widget-region {
position: relative;
z-index: 99;
}.site-branding {
float: left;
margin-bottom: 0;
width: calc( 100% - 120px);
}
.site-branding .site-title {
font-size: 2em;
letter-spacing: -1px;
margin: 0;
}
.site-branding .site-title a {
font-weight: 700;
}
.site-branding .site-description {
font-size: 0.875em;
display: none;
}
.site-branding .logo {
margin: 0;
}
<
div class="site-branding">
<
a href="https://www.jbaat.com/" class="custom-logo-link" rel="home">
<
img width="616" height="626" src="https://www.jbaat.com/wp-content/uploads/2019/12/Logo-Jbaat-in-circle.png" class="custom-logo" alt="Logo Jbaat in circle" srcset="https://www.jbaat.com/wp-content/uploads/2019/12/Logo-Jbaat-in-circle.png 616w, https://www.jbaat.com/wp-content/uploads/2019/12/Logo-Jbaat-in-circle-295x300.png 295w, https://www.jbaat.com/wp-content/uploads/2019/12/Logo-Jbaat-in-circle-416x423.png 416w" sizes="(max-width: 616px) 100vw, 616px">
<
/a>
<
/div>
推荐阅读
- CSS视口单位显示问题
- 显示WordPress博客文章类别
- CSS不会在WordPress中链接到我的page.php模板,其他一切都正常
- CSS摆脱WordPress Twenty Nineteen主题中的空白()
- 用WP短代码显示来自mySQL的数据字段
- 在每个WordPress页面中显示不同的标题文本
- 如何设计一个秒杀系统
- 性能工具之Jmeter JDBC Request学习
- java面试题及答案整理(基础篇),持续更新中。。。