常用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是串联选择器,作用在同一标签上。