今天小编跟大家讲解下有关CSS 样式的使用方式、选择器 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS 样式的使用方式、选择器 的相关资料，希望小伙伴们看了有所帮助。
在html中使用css的三种方式：
1、行内样式：同过元素的style属性来设置
<p style="font-size:20px; color:red">hello</p>属性之间分号隔开。
2、内部样式：在<head>的<style>元素中定义css样式
<style> p{font-size: 20px;color: red} </style>3、外部样式：在css文件中定义css样式 然后在html的<head>中通过<style>引入外部样式表
p{font-size: 20px;color: red}<link href="xxx.css" type="text/css" rel="stylesheet" />css文件中不加<style>标签 直接写css样式就ok。
内部|外部样式的语法： 选择器 {属性名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>链接
a:link /*所有未访问过的<a>*元素/a:hover a:active a:visited这4个设置的是<a>元素不同时期的样式。
:hover这个伪类所有元素都可以使用。
6、表单元素
:focus :checked :enabled :disabled :read-only可单独使用 也可配合表单元素使用：
:focus{ }input:focus{ }7、空元素
:empty{ } p:empty{ }空元素指的是没有任何属性、没有内容的元素 示例：<p></p>。
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}<body> <h1></h1> <p></p> <!--选中--> <p></p> <div> <h2></h2> <p></p> <!--选中--> <p></p> </div></body>只要是同级别的<p>中的第一个即可。
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}<body> <h1></h1> <p></p> <p></p> <div> <p></p> <!--选中--> <p></p> </div></body>11、首字、首行
p:first-letter p:first-line
12、:before :after
p:before{ content:"hello "}p:after{ content:" byebye"}添加的内容默认是行内元素 但会和<p>在同一行显示（相当于把添加的内容放到<p>元素内的最前|后面） 添加的并不是一个真正的元素 所以叫做伪元素。
可以设置为块级 添加的内容会作为块级元素显示：
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属性 优先级行内最高 内部、外部优先级相同 看<head>中<link />、<style>的顺序 后面的优先级更高（后渲染的样式会覆盖之前的样式）。
总结
以上所述是小编给大家介绍的CSS 样式的使用方式、选择器 ,希望对大家有所帮助 如果大家有任何疑问请给我留言 小编会及时回复大家的。在此也非常感谢大家对爱蒂网站的支持！如果你觉得本文对你有帮助 欢迎转载 烦请注明出处 谢谢！
来源：爱蒂网
