CSS屬性之attr()

CSS函數attr()是用來獲取被選中元素的屬性值，並且在樣式文件中使用。它也可以用在偽類元素里，在偽類元素里使用，它得到的是偽元素的原始元素的值。

attr()函數可以和任何CSS屬性一起使用，但是除了content外，其余都還是試驗性的（簡單說就是不穩定，瀏覽器不一定支持）。

那具體怎么用呢，給大家舉個栗子，前段時間剛好用到的，給按鈕實現提示功能，就是鼠標放上去后，出來個小提示：

<div class="wrap">
  <a href="#" class="btn" data-tip="點擊作答">一個按鈕</a>
</div>

 

 

.btn {
  display: inline-block;
  padding: 5px 20px;
  border-radius: 4px;
  background-color: #6495ed;
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  text-align: center;
  position: relative;
}
.btn::before {
  content: attr(data-tip);
  width: 80px;
  padding: 5px 10px;
  border-radius: 4px;
  background-color: #000;
  color: #ccc;
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translate(-50%);
  text-align: center;
  opacity: 0;
  transition: all .3s;
}
.btn::after {
  content: '';
  border: 8px solid transparent;
  border-top: 8px solid #000;
  position: absolute;
  top: -3px;
  left: 50%;
  transform: translate(-50%); 
  opacity: 0;
  transition: all .3s;
}
.btn:hover::before {
  top: -40px;
  opacity: 1;
}
.btn:hover::after {
  top: -13px;
  opacity: 1;
}

 

 

 

 當然attr()還可以獲取更多的其他屬性，比如a標簽里的href屬性等，更多的用法大家自行嘗試吧。