[分享]css八大行星科普网页

CSS八大行星是CSS框架中最基础的八个元素。分别是：HTML元素选择器、class选择器、id选择器、后代选择器、子元素选择器、相邻兄弟选择器、通用选择器和属性选择器。html { color: b...

CSS八大行星是CSS框架中最基础的八个元素。分别是：HTML元素选择器、class选择器、id选择器、后代选择器、子元素选择器、相邻兄弟选择器、通用选择器和属性选择器。

html {
  color: blue;
}  
.class {
  background-color: red;
}  
#id {
  font-size: 14px;
}  
.parent .child {
  font-weight: bold;
}  
.parent > .child {
  font-style: italic;
}  
.tag + .sibling {
  text-decoration: underline;
}  
* {
  margin: 0;
  padding: 0;
}  
input[type="text"] {
  border: 1px solid black;
} 

HTML元素选择器通过HTML元素名来选取元素，如上代码中的"html"选择器。

class选择器过通过class名来选取元素，如上代码中的".class"选择器。

id选择器通过ID名来选取元素，如上代码中的"#id"选择器。

后代选择器通过对层级关系的描述来选取元素，如上代码中的".parent .child"选择器。

子元素选择器通过对父子关系的描述来选取元素，如上代码中的".parent > .child"选择器。

相邻兄弟选择器通过对同级关系的描述来选取元素，如上代码中的".tag + .sibling"选择器。

通用选择器可以匹配任何元素，如上代码中的"*"选择器。

属性选择器可以通过元素的属性来选取元素，如上代码中的"input[type='text']"选择器。