选择器 { 属性1: 值1; 属性2: 值2; 属性3: 值3; }
选择器可以是标签名、ID、class等。属性值的设置可以是任意的CSS属性和对应的属性值。例如:
p { color: blue; font-size: 20px; } #header { background-color: gray; width: 100%; } .button { border: 1px solid red; background-color: white; text-align: center; }
在上面的代码中,大家分别为p标签、ID为header的元素以及class为button的元素设置了不同的CSS属性和属性值。其中,p选择器表示为文本段落设置样式,#header选择器表示为页面头部区域设置样式,而.button选择器表示为按钮设置样式。
除了以上的选择器属性值,CSS还支持一些特殊的选择器属性值,例如:伪类选择器和伪元素选择器。它们的用法和一般的选择器属性值类似,只是需要在选择器中添加特殊的类名或标识符。例如:
a:hover { color: red; } p:first-child { font-wight: bold; } span::after { content: ">>"; color: gray; }
在上面的代码中,a:hover表示为鼠标悬停在超链接上时设置样式,p:first-child表示为文本段落中的第一个子元素设置样式,而span::after则表示为span元素添加一个虚拟的“::after”元素,并设置该虚拟元素的CSS属性值。
总之,CSS选择器属性值让大家可以轻松地为页面中的不同元素设置不同的样式,从而实现更加灵活和多样化的网页设计。