css的规则有哪些

1.选择器

CSS中选择器是用来定位需要设置样式的元素的。常用的选择器有标签选择器、class选择器、id选择器、伪类选择器等。

/* 标签选择器 */
p {
  color: red;
}
/* class选择器 */
.demo {
  font-size: 16px;
}
/* id选择器 */
#box {
  width: 100px;
}
/* 伪类选择器 */
a:hover {
  text-decoration: none;
}
 

2.属性

每个CSS规则都有一个或多个属性来指定需要设置的样式类型，比如颜色、字体、宽度等。

/* 颜色属性 */
color: #333;
/* 字体属性 */
font-family: Arial, sans-serif;
/* 宽度属性 */
width: 500px;
/* 边框属性 */
border: 1px solid #ccc;
 

3.值

属性一般需要一个值来指定具体的样式特征，比如颜色值可以是十六进制、RGB或颜色名称。

/* 十六进制颜色值 */
color: #666;
/* RGB颜色值 */
background-color: rgb(255, 99, 71);
/* 颜色名称 */
border-color: red;
 

4.继承

CSS规则中，某些属性值可以被子元素继承，比如字体、颜色等。

/* 父元素样式 */
body {
  font-family: Arial, sans-serif;
  color: #333;
}
/* 子元素继承 */
h1 {
  font-size: 28px;
}
 

5.优先级

当多个CSS规则应用到同一个元素时，优先级决定了哪个规则会被最终应用。

/* 标签选择器的优先级最低 */
p {
  color: blue;
}
/* class选择器的优先级较高 */
.demo {
  color: red !important;
}
/* id选择器的优先级最高 */
#box {
  color: green;
}