在html中使用css的三种方式：
1、行内样式：同过元素的style属性来设置
hello
属性之间分号隔开。
2、内部样式：在
的p{font-size: 20px;color: red}
3、外部样式：在css文件中定义css样式，然后在html的
中通过
p{font-size: 20px;color: red}
css文件中不加
内部|外部样式的语法： 选择器 {属性名1：属性值1; 属性名2：属性值2}
三种方式，属性之间都是分号隔开。
css注释：
css选择器
1、元素选择器、类选择器、id选择器
p{color: red}
.red{color: red}
#user{color: red}
2、通用选择器、分组选择器
*{color: red}
h1,.red{color: red}
3、后代选择器、子选择器、相邻兄弟选择器、后续兄弟选择器
div p{color: red}
div>p{color:red}
div+p{color:red}
div~p{color:red}
4、属性选择器
[attr] [attr=value] [attr^=value] [attr|=value] [attr$=value] [attr*=value] [attr~=value]
属性选择器常和其它选择器一起使用，比如:
button[type="button"]
属性选择器中，attr不能加引号，value可引可不引。
5、链接
a:link a:active a:visited
这4个设置的是元素不同时期的样式。
:hover这个伪类所有元素都可以使用。
6、表单元素
:focus :checked :enabled :disabled :read-only
可单独使用，也可配合表单元素使用：
:focus{ }
input:focus{ }
7、空元素
:empty{ }
p:empty{ }
空元素指的是没有任何属性、没有内容的元素，示例：
。8、非
:not(p)
()中尽量只使用元素选择器，使用其他选择器容易出错。
9、type系列
p:first-of-type p:nth-of-type(n) p:nth-last-of-type(n) p:last-of-type p:only-of-type
示例：
p:first-of-type{color:red}
只要是同级别的
中的第一个即可。
10、child系列
p:first-child p:nth-child(n) p:nth-last-child(n) p:last-child p:only-child
示例：
p:first-child{color:red}
11、首字、首行
p:first-letter
p:first-line
12、:before :after
p:before{
content:"hello "
}
p:after{
content:" byebye"
}
添加的内容默认是行内元素，但会和
在同一行显示（相当于把添加的内容放到
元素内的最前|后面），添加的并不是一个真正的元素，所以叫做伪元素。
可以设置为块级，添加的内容会作为块级元素显示：
p:before{
content:"hello ";
display: block
}
p:after{
content:" byebye";
display: block
}
可以给添加的元素设置样式：
p:before{
content:"hello ";
display: block;
font-size: 20px;
color:red
}
添加图片：
p:before{
content:"";
display: block;
width: 100px;
height: 100px
background-image: url("1.png");
}
清除浮动：
p:before{
content:"";
clear: both
}
伪元素可以使用单冒号，也可以使用双冒号。
:before <=> ::before :after <=> ::after
带冒号的选择器中，有4个伪元素:first-letter、:first-line、:before、:after，其余都是伪类。
选择器可以搭配使用。
在同种方式中（都是内部|外部样式），优先级id选择器最高，类选择器次之，属性选择器最低。（定位越具体、详细的，优先级越高）
如果使用了相同的css属性，优先级行内最高，内部、外部优先级相同，看
中、总结
以上所述是小编给大家介绍的CSS 样式的使用方式、选择器 ,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
