淘先锋技术网

首页 1 2 3 4 5 6 7

在CSS中,选择器用于定位需要进行样式修改的HTML元素。常用的选择器有四种,分别为基本选择器、层次选择器、属性选择器和伪类选择器。


基本选择器:
p {
  color: red;
}

该选择器可以直接选择文档中的所有p元素,并将它们的字体颜色设置为红色。

css的四大选择器

层次选择器可选择某个元素的后代元素或者兄弟元素,常见的层次选择器有后代选择器和相邻兄弟选择器:


后代选择器:
div p {
  color: blue;
}

该选择器可以选择div元素中所有后代p元素,并将它们的字体颜色设置为蓝色。

相邻兄弟选择器:
h1 + p {
  font-weight: bold;
}

该选择器可以选择紧接在h1元素之后的那个p元素,并将它的字体加粗。

属性选择器可选择某个具有特定属性的元素,常见的属性选择器有属性存在和属性值选择器:


属性存在选择器:
a[target] {
  color: green;
}

该选择器可以选择所有具有target属性的a元素,并将它们的字体颜色设置为绿色。

属性值选择器:
input[type="text"] {
  border: 1px solid black;
}

该选择器可以选择所有type属性值为text的input元素,并将它们的边框设置为1个像素厚的黑色实线。

最后,伪类选择器用于选择文档中某些特殊的状态的元素,如:hover、:active、:visited等:


:hover伪类选择器:
a:hover {
  text-decoration: underline;
}

该选择器可以选择鼠标悬停在a元素上时的状态,并将其下划线。

以上就是CSS中的四种常见选择器,不同的选择器可以用来定位不同的元素进行样式修改。