一、基本选择器
CSS选择器是一种用于选择HTML或XML文档中的特定元素的方式。最基本的选择器是元素选择器,它可以通过指定元素名称来选择所有匹配的元素。例如:
p { color: red; }
上面的代码将选择所有的<p>元素,并将它们的文字都设置为红色。
除了元素选择器,我们还可以使用ID选择器和类选择器来定位元素。ID选择器使用一个前缀为“#”后跟ID名称(ID名称是唯一的),例如:
#logo { width: 200px; }
上面的代码将选择一个ID为“logo”的元素,并将它的宽度设置为200像素。
类选择器使用一个前缀为“.”后跟类的名称(类名称可以在文档中重复使用),例如:
.warning { color: orange; }
上面的代码将选择class为“warning”的元素,并将它的文字颜色设置为橙色。
二、组合选择器
组合选择器允许我们根据多个条件来选择元素。例如,我们可以使用后代选择器选择某个元素内的所有子元素:
ul li { list-style-type: none; }
上面的代码将选择所有嵌套在<ul>元素下的<li>元素,并将它们的列表样式设置为无。
另一个组合选择器是并集选择器,它使用逗号分隔多个选择器。例如:
h1, h2, h3 { color: blue; }
上面的代码将选择所有的<h1>,<h2>和<h3>元素,并将它们的文字颜色设置为蓝色。
三、属性选择器
属性选择器允许我们选择拥有特定属性或属性值的元素。例如:
a[href="https://www.example.com"] { text-decoration: none; }
上面的代码将选择所有href值为https://www.example.com的<a>元素,并将它们的文本装饰(如下划线)去掉。
我们还可以使用属性选择器来选择包含某个属性的元素,例如:
input[type] { border: 1px solid gray; }
上面的代码将选择所有包含type属性的<input>元素,并将它们的边框设置为1像素的灰色实线。
四、伪类选择器
伪类选择器允许我们选择元素的特殊状态或位置。例如,:hover伪类可以在鼠标悬停在一个元素上时应用一个CSS规则:
button:hover { background-color: blue; }
上面的代码将选择所有的<button>元素,并在鼠标悬停在它们上面时将背景颜色设置为蓝色。
伪类选择器也可以用于选择特定的链接状态:
a:link { color: blue; } a:hover { color: red; } a:visited { color: purple; } a:active { color: orange; }
上面的代码将选择所有的<a>元素,并为不同的链接状态应用不同的样式。
五、伪元素选择器
与伪类选择器类似,伪元素选择器允许我们为元素的特定部分应用样式。例如,我们可以使用::before伪元素创建一个元素的内容的前缀,并为它们应用样式:
p::before { content: "❤️"; color: red; }
上面的代码将在所有的<p>元素前面添加一个心形图案,并将它的颜色设置为红色。
同样地,我们可以使用::after伪元素创建后缀,如:
button::after { content: "→"; font-size: 16px; }
上面的代码将在所有的<button>元素后面添加一个右箭头,并将它的字体大小设置为16像素。
总结
通过使用不同的CSS选择器,我们可以精确地定位网站上的元素,并为它们应用合适的样式。基本选择器和组合选择器可以让我们根据元素的名称、ID和类等条件进行选择;属性选择器可以根据元素的属性和属性值进行选择;伪类选择器和伪元素选择器可以选择元素的特殊状态或位置。