CSS 样式的使用方式、选择器
2019-08-14 10:00:17来源：博客园 阅读 ()
在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} /* 元素选择器，给所有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>后面的第一个兄弟元素 */ 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要是一个完整的单词（和其它单词以空格隔开）*/
属性选择器常和其它选择器一起使用，比如:
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 /*同级别中的第一个<p>*/ p:nth-of-type(n) /*同级别中的第n个<p>*/ p:nth-last-of-type(n) /*同级别中的倒数第n个<p>*/ p:last-of-type /*同级别中的最后一个<p>*/ p:only-of-type /*同级别中唯一的一个<p>*/
示例：
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>，<p>要是其父元素的第一个子元素*/ p:nth-child(n) /*匹配的是<p>，<p>要是其父元素的第n个子元素*/ p:nth-last-child(n) /*匹配的是<p>，<p>要是其父元素的倒数第n个子元素*/ p:last-child /*匹配的是<p>，<p>要是其父元素的最后一个子元素*/ p:only-child /*匹配的是<p>，<p>要是其父元素的唯一一个子元素*/
示例：
p:first-child{color:red}
<body> <h1></h1> <p></p> <p></p> <div> <p></p> <!--选中--> <p></p> </div> </body>
11、首字、首行
p:first-letter /*<p>元素的第一个字符*/ p:first-line /*<p>元素的第一行*/
12、:before :after
p:before{ /*在<p>的前面添加内容*/ content:"hello " } p:after{ /*在<p>的后面添加内容*/ content:" byebye" }
添加的内容默认是行内元素，但会和<p>在同一行显示（相当于把添加的内容放到<p>元素内的最前|后面），添加的并不是一个真正的元素，所以叫做伪元素。
可以设置为块级，添加的内容会作为块级元素显示：
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>的顺序，后面的优先级更高（后渲染的样式会覆盖之前的样式）。
原文链接:https://www.cnblogs.com/chy18883701161/p/11329769.html
如有疑问请与原作者联系
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
- DIV居中的经典方法 2020-06-13
- CSS中的float和margin的混合使用 2020-06-11
- Html/css 列表项 区分列表首尾 2020-06-11
- css与javascript重难点，学前端，基础不好一切白费！ 2020-06-11
- ie8下透明度处理 2020-06-11
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
