css中focus选择器有什么用

这个时候我们就可以使用css :focus选择器来设置浏览器在获得焦点时的的元素默认样式。例：

input:focus{
    outline:0; /* 去除浏览器默认样式 */
    border: 2px solid pink;
}

效果图：

说明：轮廓类似于边框，但它们并不完全相同，我们需要通过outline属性来设置它的样式。例如：设置outline:0; 来去除轮廓。

我们还可以把css :focus选择器使用在链接上，例：

a:focus {    
   outline: 0;    
   color：red;
}

注：

当我们使用css :focus选择器来链接样式时，建议是在:link和:visited选择器设置的样式之后设置:focus样式，否则:focus选择器提供的样式将被:link和:visited选择器提供的样式给覆盖掉。

除了这三个伪类中，:hover和:active伪类也可以用来设置链接样式，它们提供的样式在 :focus的样式之后出现。

上面提到的顺序，即：link，visited，focus，hover，active的顺序是首选的，这样可以确保在必要时应用每个伪类的样式，并且不会被另一个伪类的样式覆盖。例：

a:link {
    color: #0099cc;
}

a:visited {
    color: grey;
}

a:focus {
    background-color: black;
    color: white;
}

a:hover {
    border-bottom: 1px solid #0099cc;
}

a:active {
    background-color: #0099cc;
    color: white;
}

css :focus选择器的示例：

在聚焦输入和文本区域字段的背景颜色转换为浅黄色突出显示，带有浅红色边框。

html代码：

  

    
    
    聚焦这里,textarea文本框
    按钮
  

css代码

.container {
  margin: 40px auto;
  max-width: 400px;
}
input,
textarea,
button {
  padding: .5em;
  display: block;
  width: 100%;
  margin-bottom: .5em;
}
a:link {
  color: deepPink;
}
/* :focus styles */
a:focus,
input:focus,
textarea:focus,
button:focus {
  /* override default browser outline */

  outline: 0;
  /* apply other styles */

  outline: 2px solid #F47E58;
  border-radius: 5px;
}

input:focus,
textarea:focus {
  background-color: #FFFF66;
}

效果图：

浏览器支持

:focus伪类选择器被Firefox，Safari，Opera或7+，IE浏览器7+，以及Android和iOS等所有主流浏览器的支持。

总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。

以上就是css中focus选择器有什么用的详细内容，更多请关注 第一PHP社区 其它相关文章！