css选择器「示例详解」-猿码集

1.介绍

在CSS中，选择器是指向HTML文档中特定元素的指针，使开发者可以对各种HTML元素应用样式。CSS选择器允许根据标记名称、类、id等选择要被样式化的HTML元素。

选择正确的CSS选择器对于编写高质量，易于维护的CSS代码非常重要。CSS选择器每次只对一个元素进行操作，因此选择器的效率取决于特定的选择器是否与HTML标记结构相匹配。

2.类型选择器

2.1 意义

类型选择器是指一个HTML元素的名称作为选择器的名称。这种选择器可以作用于页面中的所有该元素。

2.2 例子

body {
  font-family: Arial, sans-serif;
  font-size: 16px;
}
h1 {
  color: red;
}
p {
  color: black;
}

上面的代码将应用于页面中所有的h1和元素。

3.类选择器

3.1 意义

类选择器是一种选择HTML元素的方法，该方法基于元素的类属性值，类属性通常用于描述元素的类型或用途。在HTML元素的类属性中定义的内容不会影响元素的呈现，但可以用于选择元素并将样式应用于它们。

3.2 例子

.menu li {
  display: inline-block;
  margin-right: 10px;
  border: 1px solid blue;
  padding: 5px;
}
.highlight {
  background-color: yellow;
}
.error {
  color: red;
}

上面的代码将应用于所有使用类名"menu"的li元素，以及使用类名"highlight"和"error"的所有元素。

4.id选择器

4.1 意义

id选择器是一种选择HTML元素的方法，该方法基于元素的id属性值。id属性在HTML文档中应该是唯一的。在CSS中，id选择器用一个井号（#）后跟id属性值来表示。

4.2 例子

#header {
  background-color: #f2f2f2;
  height: 50px;
}
#content {
  margin-top: 20px;
  padding: 10px;
}

上面的代码将应用于ID为"header"和"content"的元素。

5.组合选择器

5.1 意义

组合选择器允许将多个选择器组合在一起以选择更具体的HTML元素。当两个或多个选择器应用于同一选择器时，它们具有"并"关系，意味着它们都必须匹配同一元素才能应用样式。

5.2 例子

li.menu-item {
  background-color: #f2f2f2;
  padding: 10px;
}
#sidebar ul.menu li.menu-item {
  background-color: #fff;
  border-bottom: 1px solid #ccc;
}
.header .logo {
  width: 200px;
  height: 50px;
  float: left;
}

上面的代码将应用于使用类名"menu-item"的所有元素，并且它们是在UL元素内并位于ID为"sidebar"的元素内。另一个例子将应用于使用类名"logo"的元素，并且它在一个使用类名"header"的元素内。

6.伪类选择器

6.1 意义

伪类选择器是一种选择器，允许根据元素的状态或位置选择元素。例如，":hover"可以选择鼠标悬停在元素上的所有元素。

6.2 例子

a:hover {
  color: red;
}
input:focus {
  border: 1px solid red;
}
ul li:first-child {
  font-weight: bold;
}

上面的代码将选择所有当鼠标悬停在上面时<a>元素，并将颜色设置为红色。它还将选择所有输入元素，在元素获得焦点时将其边框颜色更改为红色。最后，它选择ul下的第一个子元素，并将文本加粗。

7.属性选择器

7.1 意义

属性选择器是一种允许根据元素的属性选择元素的选择器。例如，可以选择所有具有某种属性或具有特定属性值的元素。

7.2 例子

img[alt] {
  border: 1px solid gray;
}
input[type="text"] {
  width: 200px;
  height: 20px;
}

上面的代码将选择所有具有'alt'属性的<img>元素，并将其边框颜色更改为灰色。它还选择所有的<input>元素，并在其类型为"text"的情况下将其宽度设置为200px，高度设置为20px。

8.子选择器

8.1 意义

子选择器用于选择一个元素的直接子元素。子选择器使用大于号（>）来指示子元素。

8.2 例子

ul > li {
  list-style: none;
}
div > p {
  font-size: 16px;
  color: blue;
}

上面的代码选择元素的所有直接子元素元素，并将其列表样式设置为"none"。它还选择所有<div>元素的直接子元素元素，并为所有元素设置字体大小为16像素和颜色为蓝色。

css选择器「示例详解」