CSS基本選擇器是指通過元素名稱、類名、ID、屬性等方式來選擇HTML文檔中的元素,使得這些元素可以被添加樣式。以下是常用的CSS基本選擇器:
/* 選擇所有元素 */ * { margin: 0; padding: 0; } /* 通過元素名稱選擇元素 */ p { font-size: 16px; color: #333; } /* 通過類名選擇元素 */ .content { background-color: #f5f5f5; border: 1px solid #ccc; } /* 通過ID選擇元素 */ #header { height: 100px; background-color: #fff; } /* 通過屬性選擇元素 */ input[type="text"] { border: 1px solid #ccc; width: 200px; }
上述代碼中,p
、.content
、#header
、input[type="text"]
都是CSS基本選擇器的應用案例。其中,p
選擇了所有的段落元素,.content
選擇了所有帶有class
屬性為content
的元素,#header
選擇了所有帶有id
屬性為header
的元素,input[type="text"]
選擇了所有type
屬性為text
的input
元素。
需要注意的是,CSS選擇器是從右往左進行匹配的。比如,下面的CSS規則:
.content p { color: #333; }
會選中所有處于class
屬性為content
的元素內的段落元素,而不僅僅是所有的段落元素。
除了上述介紹的選擇器,還有其他一些選擇器,如a:hover
、:nth-child(n)
、:not(selector)
等,它們可以根據需要進行使用。但是需要注意的是,過多的選擇器會增加CSS文件大小,并且會影響頁面的渲染速度,所以需要謹慎使用。