CSS语法

CSS语法结构由3部分组成：选择符、属性和值

Selector {Property : Value}

多个标签之间使用逗号隔开

1
2
3

h1,h2,h3,h4 {
    color: red
}

当一个标签嵌套在另一个标签中，想要精准的设置该样式，需要先列出上层标签，在列出子标签，中间使用空格隔开

1	标签1 标签2 {}

只要标签1是标签2的祖先元素就行，不一定是父元素。如果想要必须是父子关系的话，可以使用 标签1 > 标签2 这种方式来表示

1
2
3

ol ul {
    list-style-type: cricle
}

对于兄弟节点如何来表示呢？

/* 紧邻的兄弟节点，标签2必须紧跟在标签1后边*/
标签1 + 标签2 {}

/* 一般的兄弟节点，标签2必须在标签1后边，不一定紧跟*/
标签1 ~ 标签2 {}

可是使用class来对样式进行分类，以点开头+class名称进行设置

1
2
3

.new {
    color: red
}

使用该样式，只需要设置标签的class为new即可

1	<li class="new">测试 </li>

同时满足多类的话，可以使用.类1.类2 两个类之间没有空格

除了可以使用class外，还可以使用id，以井号开头+id值进行设置

1
2
3

#special {
    color: red
}

使用该样式，只需要设置标签的id为special即可

1	<li id="special">测试 </li>

如果既想使用id或class，又想同时使用标签，可以使用如下格式

/* 针对id为content的h1标签*/
h1#content{}
/* 针对class为p1的h1标签*/
h1.p1{}

/* h1标签下的所有class为p1的标签*/
h1 .p1{}

/* id为content的标签下所有h1标签*/
#content h1{}

/*id为content的h1标签下的h2标签*/
h1#content h2{}