在Web開發中，CSS是一個非常重要的工具，它可以幫助我們控制網頁布局、字體樣式和顏色等。除此之外，CSS還可以實現一些交互效果，比如當點擊一個ul時，它包含的所有li就會變化。

ul li:active{
background-color: blue;
color: white;
}

上面的代碼展示了如何使用CSS實現這一效果。當用戶點擊li元素時，它的狀態將會變為active狀態，此時我們可以通過:active偽類來定義鼠標按下時的效果。

值得注意的是，我們可以在ul中嵌套多個li元素，并且每一個li元素都可以有不同的樣式。下面的代碼展示了如何通過CSS選擇器來實現li元素的不同樣式。

ul li:nth-child(odd) {
background-color: #F5F5F5;
color: #333;
}
ul li:nth-child(even) {
background-color: #FFF;
color: #333;
}

上面的代碼中，我們使用了nth-child選擇器來分別選擇ul中的奇數和偶數子元素，并對它們的樣式進行了不同的定義。這樣的效果可以讓我們在顯示數據列表時更加清晰易讀。

總之，使用CSS實現點擊ul時li元素變化是一種非常常見的交互效果，通過靈活運用CSS的選擇器和屬性，我們可以實現不同風格的效果，增加網頁的可讀性和用戶體驗。