在前端開發中，我們經常會遇到需要使用篩選條件展示的需求。這個時候，我們就需要使用 CSS 來完成這個任務。接下來，我們就來分享一下如何使用 CSS 實現篩選條件展示功能。

.selected{
background-color: #007aff;
color: #fff;
}

首先，我們需要定義被選中的條件的樣式。我們可以定義一個 .selected 類，并設置其背景色為藍色，文字顏色為白色。

.criteria{
display: inline-block;
margin-right: 10px;
padding: 5px 10px;
border-radius: 20px;
color: #007aff;
border: 1px solid #007aff;
cursor: pointer;
}
.criteria:hover{
background-color: #007aff;
color: #fff;
}

然后，我們需要定義篩選條件的樣式。我們可以定義一個 .criteria 類，并設置其為 inline-block 格式，設置左右 padding 為 10px，上下 padding 為 5px，設置圓角為 20px，顏色為藍色。

后面添加了hover選擇器，使鼠標經過時背景顏色改為藍色，文字顏色為白色。

.criteria.selected{
background-color: #007aff;
color: #fff;
}

接下來，我們需要定義被選中的條件的樣式。我們可以創建一個 .criteria.selected 類，設置其背景色為藍色，文字顏色為白色。

條件1
條件2
條件3
條件4
條件5

最后，我們需要在 HTML 中創建篩選條件的元素，并使用定義好的樣式對它們進行渲染。我們可以創建 div 元素，添加 .criteria 類，并使用 .selected 類來指定默認選中的條件。