CSS的引入方式及选择器

标签：属性   round   site   title   dex   size   font   之间   info   

CSS的引入方式
第一种：在head中 <style></style>    嵌入式
第二种：在head中 <link href="index.css" rel="stylesheet">   链接式 （先加载css，再加载html）推荐
第三种：在head中 <style>@import "index.css";</style>>    导入式（先加载html，再加载css）
第四种：直接在html标签中<div style="width: 50%; height: 60px; background-color: orangered">不推荐这种方式</div>    行内式

CSS的选择器
1、基础选择器
*    通用元素选择器，匹配任何元素    * { margin:0; padding:0; }
E    标签选择器，匹配所有使用E标签的元素    p { color:green; }
.info和E.info    class选择器，匹配所有class属性中包含info的元素    .info { background:#ff0; }    p.info { background:red }
#info和E#info    id选择器，匹配所有id属性等于footer的元素    #info { background:#333 }    P#info { background:blue }

2、组合选择器(这里的E,F可以是基础选择器中的选择器)
E,F    多元素选择器，同时匹配所有E元素与F元素，E和F之间用逗号分隔    div,p { color:#f00 }
E F    后代选择器，匹配所有属于E元素后代（儿子、孙子....）的F元素，E和F之间用空格分隔    li a { font-weight:bold; }
E>F    子元素选择器，匹配所有E元素的子元素(仅儿子)F,E和F之间用>分隔    div > p { color:#ccc }
E+F    毗邻元素选择器，匹配所有紧随E元素之后的同级元素F,E和F之间用加号分隔    div + p { color:000 }

3、属性选择器
E[att]    匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略，比如“[cheacked]”。以下同。）   p[title] { color:#f00; }
E[att=val]    匹配所有att属性等于“val”的E元素    div[class=”error”] { color:#f00; }
E[att~=val]    匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素      td[class~=”name”] { color:#f00; }
E[attr^=val]    匹配属性值以指定值开头的每个元素     div[class^="test"]{background:#ffff00;}
E[attr$=val]    匹配属性值以指定值结尾的每个元素     div[class$="test"]{background:#ffff00;}
E[attr*=val]    匹配属性值中包含指定值的每个元素     div[class*="test"]{background:#ffff00;}

4、伪类
anchor伪类：专用于控制链接的显示效果
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }

before after伪类
p:before    在每个 <p> 元素的内容之前插入内容    p:before{content:"hello";color:red}
p:after    在每个 <p> 元素的内容之前插入内容    p:after{ content:"hello"；color:red}

CSS的引入方式及选择器

标签：属性   round   site   title   dex   size   font   之间   info   

原文地址：https://www.cnblogs.com/dangrui0725/p/9503361.html