在html中应用css的3种方法：
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}
3种方法，特性之间全是分号分隔。
css注解：
/* 注解 */
css挑选器
1、元素挑选器、类挑选器、id挑选器
p{color: red} /* 元素挑选器，给全部p元素设定款式*/
.red{color: red} /* 类挑选器，在元素中根据class="red"引入 */
#user{color: red} /* id挑选器，在元素中根据id="user"引入，数最多只能应用1次 */
2、通用性挑选器、排序挑选器
*{color: red} /*通用性挑选器，给全部元素设定款式 */
h1,.red{color: red} /*排序挑选器，另外给好几个挑选器设定同样的款式 */
3、子孙后代挑选器、子挑选器、邻近弟兄挑选器、后续弟兄挑选器
div p{color: red} /*子孙后代挑选器，挑选<div>中全部的<p>元素，无论<p>是<div>的儿子、孙子、重孙......要是<p>是<div>的子孙后代就行*/
div>p{color:red} /*子挑选器，挑选的是<p>，<p>务必是<div>的儿子*/
div+p{color:red} /*邻近弟兄挑选器，挑选的是<p>，<p>务必是<div>后边的第1个弟兄元素 */
div~p{color:red} /*后续弟兄挑选器，挑选<div>后边全部的<p>，<p>务必是<div>的弟兄元素 */
4、特性挑选器
[attr] /*含有attr特性*/ [attr=value] /*有attr特性，且特性值为value*/ [attr^=value] /*有attr特性，且特性值以value开始(要是value是开始就ok*/ [attr|=value] /*有attr特性，且特性值以value开始、value和后边一部分以-联接 */ [attr$=value] /*有attr特性，且特性值以value末尾*/ [attr*=value] /*有attr特性，且特性值中含有value（含有就ok）*/ [attr~=value] /*有attr特性，且特性值中含有单词value，value如果1个详细的单词（和其它单词以空格分隔）*/
特性挑选器常和其它挑选器1起应用，例如:
button[type="button"] /*挑选全部type="button"的<button> */
特性挑选器中，attr不可以加引号，value可引可不引。
5、<a>连接
a:link /*全部未浏览过的<a>*元素/ a:hover /*电脑鼠标移到<a>元素上*/ a:active /*点一下<a>时*/ a:visited /*全部浏览过的<a>*/
这4个设定的是<a>元素不一样阶段的款式。
:hover这个伪类全部元素都可以以应用。
6、表模块素
:focus /*聚焦时*/ :checked /*选定时*/ :enabled /*能用的*/ :disabled /*禁用的*/ :read-only /*写保护*/
可独立应用，也可相互配合表模块素应用：
:focus{ }
input:focus{ }
7、空元素
:empty{ } /*全部的空元素*/
p:empty{ } /*全部空的<p>元素*/
空元素指的是沒有任何特性、沒有內容的元素，示例：<p></p>。
8、非
:not(p) /*挑选并不是<p>的全部元素*/
()中尽可能只应用元素挑选器，应用别的挑选器非常容易错误。
9、type系列
p:first-of-type /*同级別中的第1个<p>*/ p:nth-of-type(n) /*同级別中的第n个<p>*/ p:nth-last-of-type(n) /*同级別中的倒数第n个<p>*/ p:last-of-type /*同级別中的最终1个<p>*/ p:only-of-type /*同级別中唯1的1个<p>*/
示例：
p:first-of-type{color:red}
<body>
<h1></h1>
<p></p> <!--选定-->
<p></p>
<div>
<h2></h2>
<p></p> <!--选定-->
<p></p>
</div>
</body>
要是是同级別的<p>中的第1个便可。
10、child系列
p:first-child /*配对的是<p>，<p>如果其父元素的第1个子元素*/ p:nth-child(n) /*配对的是<p>，<p>如果其父元素的第n个子元素*/ p:nth-last-child(n) /*配对的是<p>，<p>如果其父元素的倒数第n个子元素*/ p:last-child /*配对的是<p>，<p>如果其父元素的最终1个子元素*/ p:only-child /*配对的是<p>，<p>如果其父元素的唯11个子元素*/
示例：
p:first-child{color:red}
<body>
<h1></h1>
<p></p>
<p></p>
<div>
<p></p> <!--选定-->
<p></p>
</div>
</body>
11、首字、首行
p:first-letter /*<p>元素的第1个标识符*/
p:first-line /*<p>元素的第1行*/
12、:before :after
p:before{ /*在<p>的前面加上內容*/
content:"hello "
}
p:after{ /*在<p>的后边加上內容*/
content:" byebye"
}
加上的內容默认设置是行内元素，但会和<p>在同1行显示信息（非常于把加上的內容放到<p>元素内的最前|后边），加上的其实不是1个真实的元素，因此叫做伪元素。
能够设定为块级，加上的內容会做为块级元素显示信息：
p:before{ /*在<p>的前面加上內容*/
content:"hello ";
display: block
}
p:after{ /*在<p>的后边加上內容*/
content:" byebye";
display: block
}
能够给加上的元素设定款式：
p:before{
content:"hello "; /* 特性之间分号隔开 */
display: block; /*给加上的內容设定款式*/
font-size: 20px;
color:red
}
加上照片：
p:before{
content:""; /* 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>的次序，后边的优先选择级更高（后3D渲染的款式会遮盖以前的款式）。
总结
以上所述是网编给大伙儿详细介绍的CSS 款式的应用方法、挑选器 ,期待对大伙儿有一定的协助，假如大伙儿有任何疑惑请给我留言，网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用！
假如你感觉本文对你有协助，欢迎转载，烦请注明出处，感谢！
Copyright © 2002-2020 小程序怎么做_凡科网小程序_微信小程序界面_线上报名小程序_微信小程序页面制作 版权所有 （网站地图） 粤ICP备10235580号