/* ID选择器 */ #myId { color: blue; } /* 类选择器 */ .myClass { background-color: yellow; } /* 元素选择器 */ p { font-size: 16px; } /* 子选择器 */ ul >li { border: 1px solid black; } /* 后代选择器 */ ul p { text-decoration: underline; } /* 表格选择器 */ table td:first-child { color: red; } /* 伪类选择器 */ a:hover { text-decoration: none; } /* 属性选择器 */ input[type="text"] { border: 1px solid aqua; }
以上代码展示了一些常见的CSS3选择器,包括ID选择器、类选择器、元素选择器、子选择器、后代选择器、表格选择器、伪类选择器和属性选择器等。CSS3选择器规范的灵活性和多样性,使得开发者可以更灵活地对网页进行样式控制。
此外,CSS3选择器还允许组合多个选择器来实现更精确的选择,比如:
/* 组合选择器 */ p.intro, p.outro { font-weight: bold; } /* 同时使用不同的选择器 */ ul li a:active { color: red; }
组合选择器和同时使用不同的选择器,能够更加精确地定位到需要修改或美化的元素,提高网页的质量和用户体验。
总之,CSS3选择器规范的丰富性和灵活性,为网页设计和开发提供了更多选择,让大家可以更加轻松地实现网页的美化和优化。