div 被选中，点击时会出现边框

Question

我的 wordpress 网站的标志在一个 div 里面

下面是链接

https://www.jbaat.com/

当我单击徽标时，会出现一个巨大的矩形框。我已经尝试过 outline 属性和 use-select 属性，但它仍然存在。

Answer 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。

您现有的（旧）代码：

/**
 * 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>