(二)CSS基础选择器有哪些?怎样使用?
时间: 2024-09-24 21:10:13 浏览: 49
CSS基础选择器主要包括以下几种:
1. **元素选择器**:直接指定元素名称,如`.box`,表示所有class为"box"的元素;`#id`,表示ID为特定值的元素,如`#header`。
2. **类型选择器**:使用`input[type="text"]`匹配所有type属性为"text"的input元素。
3. **ID选择器**:通过`#idName`选取页面上唯一标识的元素。
4. **类选择器**:通过`.`连接类名,如`.red-text`选取所有class为"red-text"的元素。
5. **通配符选择器**:`*`表示任何元素,常用来作为通用样式的基础。
6. **后代选择器**:`element > descendant`选取元素内的某个后代元素,例如`ul li`选取所有ul下的li元素。
7. **相邻兄弟选择器**:`element + sibling`选取紧跟在元素后面的同辈元素,如`:last-child`选取某个元素的最后一个子元素。
8. **通用兄弟选择器**:`element ~ sibling`选取元素之后的所有同辈元素。
使用方法是将选择器放在CSS规则前,然后跟上冒号(:),接着是需要应用样式的属性和值,例如:
```css
/* 选择所有class为'highlight'的p元素 */
.p.highlight {
background-color: yellow;
}
/* 选择id为'id1'的div内的所有a元素 */
#id1 a {
color: blue;
}
```
阅读全文