常用css语法
常见css格式，看一遍，练习一遍，基本的css语法都通了。
建议一边编写一边熟悉语法，我们可以通过w3school来编写和测试我们的代码，练习地址
一、Class类选择器
格式：
.test {
xxx: xxx;
}
简单实例：
<html>
<head>
<style type="text/css">
.test {
color: red;
}
</style>
</head>
<body>
<p class="test">测试class类语法</p>
</body>
</html>
解析：
1.类选择器在css样式中是最常用的
2.类选择器可以被多种标签使用
3.类选择器允许以一种独立于文档元素的方式来指定样式
4.类选择器可以单独使用，也可以与其它元素结合使用
注：后面的实例为了简化理解，不写完整实例，大家可以基于这个实例修改和测试
二、元素选择器（或标签选择器）
h1 {
color: red;
}
p {
color: blue;
}
<h1>元素选择器1</h1>
<p>元素选择器2</p>
解析：h1,p这些标签属于html语法中的元素标签，我们可以针对这些元素定义css样式，可以直接把样式作用于包括的对象中, 使用起来更简便。
三、ID选择器语法
#set {
color: red;
}
<p id="set">id选择器</p>
解析：
1.ID选择器定义的符号是 #号
2.ID选择器在一个HTML文档中，只能使用一次，而类选择器可以使用多次，这是需要特别注意的地方。
四、后代选择器（使用空格分开）
(1)用法1, 针对元素选择器
div p {
color: yellow;
}
<div>
<p>后代选择器段落1</p>
<sec><p>后代选择器段落2</p></sec>
</div>
<p>后代选择器段落3</p>
解析：
1.上面的实例是针对元素的后代选择器实例，段落1的p属于div的直系第1后代，且被div包括，故高亮显示；
2.段落2的p元素虽然隔离着section,不是直系第1个后代，但仍属于div的后代，故高亮显示。
3.段落3没有被div包括，故p不是div是后代，故不高亮显示。
(2)用法2，针对类选择器
.test .hd {
color: blue;
}
<div class='test'>
<p class="hd">类选择器的后代选择器</p>
</div>
(3)用法3，针对类和元素的组合
.test p {
color: red;
}
<div class="test">
<p>def</p>
</div>
（4）自定义用法
.test student {
color: blue;
}
<div class="test">
<student>测试学生</student>
</div>
五、子选择器（带符号 > ）
div > p {
background-color: yellow;
}
<div>
<p>测试子选择器 1</p>
<sec><p>测试子选择器2</p></sec>
</div>
解析：
1.子选择器只有第一个子后代才是子选择器，隔代的不是子选择器
2.第1行的p是div的子选择器，故高亮
3.第2行的p隔着sec，不是div的子选择器，虽然属于其后代，但也不会高亮。
(2)类选择器的用法
.test > .sub {
background-color: yellow;
}
<div class="test">
<p class="sub">测试子选择器</p>
</div>
六、串联选择器(不带空格)
(1)标签和类选择器的串联
p.test {
color: red;
}
<p class="test">测试串联1</p>
<p><sec class="test">测试串联2</sec></p>
解析：
1.上面的定义是元素和类选择器的串联用法, 元素选择器就是使用html自带的元素，如p, div等，串联选择器需要作用在同个标签上。
2.第1个例子符合串联规则，作用在同个标签元素上，高亮显示为红色。
3.第2个例子不符合串联，故没有高亮显示。
(2)多个类选择器的串联
.cuan.lian {
color: green;
}
<p class="cuan lian">测试class串联</p>
解析：串联选择器，需要满足两个类型才生效
(3)类选择器和id选择器的串联
#cl.ab {
color: blue;
}
<p class="ab" id="cl">测试id和类串联</p>
(4)自定义用法
student.test {
color: blue;
}
<student class="test">测试学生</student>
七、分组选择器 (使用逗号)
.b_red, .b_back {
color: blue;
}
<p class="b_back">abc</p>
<p class="b_red">def</p>
解析：
1.当多个选择器定义的内容是一样，为了简化，可以使用分组选择器，使用逗号分隔。
2.第1行和第2行的显示的效果是一样的。
八、带符号+，相邻选择器
div + p {
background-color: yellow;
}
<div>
<p>段落1</p>
<p>段落2</p>
</div>
<p>段落3</p>
<p>段落4</p>
解析：
下面的只有第三行（段落3）会高亮为黄色
九、带冒号: 的伪类选择器
css允许对元素的不同状态，定义不同的样式。
link：超链接点击之前
visited：超链接点击之后
focus：是某个标签获得焦点的时候（比如某个输入框获得焦点）
hover：鼠标放到某个标签上的时候
active：点击某个标签没有松鼠标时
例子:
//文本框获取焦点时，文字显示为红色
input: focus {
color: red;
}
//鼠标放在label上显示蓝色
label: hover {
color: blue;
}
十、before和after语法
(1)添加前缀 before
.test:before {
content:">";
}
<p class="test">测试before</p>
显示效果：在文本前添加了>号
>测试before2
(2)添加后缀 after
.test:after {
content:"<";
}
<p class="test">测试after</p>
显示效果：在文本后面添加了<号
测试after<
十一、嵌套语法(scss语法)
.pi {
.test {
color: red;
}
}
等同于下面的后代选择器：
.pi .test {
color: red;
}
用法：
测试嵌套语法
十二、嵌套带&符号用法(sass、scss语法)
.state{
&.gray{
color: blue;
}
}
<p class="state gray">abc</p>
等同于串联语法：
.state.gray{
color: blue;
}
<p class="state gray">abc</p>
解析：
.state.gray是串联选择器，作用在同一标签上。
604
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
