插入样式的三种方法
- 内联样式表（行内）
- 内部样式表（style中）
- 外部样式表
- 创建一个外部样式表
- 在head中使用link元素插入样式表
<title>Document</title>
<link rel="stylesheet" href="./style.css" media="screen" title="no title">
- 单一元素的多个属性之间用分号隔开；若只有一个可以省略
- 多个元素之间用逗号隔开
- 如果值为若干单词，则要给值加引号;除了这种情况外其他时候不可以加引号
- css代码的注释
- 样式的优先顺序:
- 设计者设计的样式>浏览器用户自定义的样式>浏览器自设的样式
- 强制优先级：！important
- 行内（内联）样式
- 内部样式：style中的样式
- 外部样式
- 层叠、继承、冲突
- 外观样式--比如字体、颜色可以继承;而布局有关的样式不可以继承，比如边框等
- 可以在同一个 HTML 文档内部引用多个外部样式表。
CSS选择器
-
常用选择器
- 通用选择器：“*”
*{color: red} - 元素选择器
div{background: blue} - id选择器:前面有一个 #
#div1{background: blue} - 类选择器:前面加符号 .
.class{color: yellow} - 给一个元素加上多个类名
h3.class{background: rgb(207, 94, 87)} - 指定某一特定的类 ``
- 通用选择器：“*”
-
属性选择器
- E[att] :选择具有att属性的E元素。需要选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。
input[value][style]{background: rgb(24, 65, 82)}可以根据多个属性进行选择，只需将属性选择器链接在一起即可。
- E[att="val"]：选择具有att属性且属性值等于val的E元素。进一步缩小选择范围，（只选择有特定属性值的元素。）
input[value="vip1"]{background: rgb(43, 184, 11)}- E[att~="val"]:选择具有att属性且属性值有多个，其中一个的值等于val的E元素。
input[style~="15px"]{background: red}- E[att|="val"]:选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。
p[lang|="en"]{background: rgb(182, 60, 215)}- E[att^="val"]:选择具有att属性且属性值为以val开头的字符串的E元素。
input[value^="vi"]{background: rgb(139, 201, 123)}- E[att$="val"]:选择具有att属性且属性值为以val结尾的字符串的E元素。
input[value$="1"]{background: rgb(139, 201, 123)}- E[att*="val"]:选择具有att属性且属性值为包含val的字符串的E元素。
input[value*="i"]{background: rgb(139, 201, 123)} -
关系选择器
- 后代选择器（包含选择器）ul li{}:后代选择器又称为包含选择器。后代选择器可以选择作为某元素后代的元素。
ul li{color: red}- 子元素选择器ul>li:与后代选择器相比，子元素选择器只能选择作为某元素子元素的元素,缩小了选择范围
ul>li{border: 1px solid}- 相邻选择符：E+F:选择紧贴在E元素之后F元素。(一个)
h2+p{color: red}- 兄弟选择器E~F:选择E元素所有兄弟元素F。(只可以选择到之后的元素)（所有）
h2~p{color: red} -
伪元素选择器
- E:first-letter/E::first-letter 设置元素内的第一个字符的样式。
p::first-letter{color: red}- E:first-line/E::first-line设置元素内的第一行的样式。
p::first-line{font-size: 30px}- E:before/E::before在每个 E元素的内容之前插入内容。用来和content属性一起使用
a::before{ content: "点击" }- E:after/E::after在每个E元素的内容之后插入内容。用来和content属性一起使用
a::after{ content: url(../../..png) }- E::selection设置对象被选择时的颜色。
a::selection{background: red}
-
伪类选择器_结构伪类选择器
- E:first-child 父元素的第一个子元素E。
li:first-child{color: red}- :root:选择文档的根元素。
:root{background: rgb(34, 56, 173)}- E:last-child:最后一个子元素E。
li:last-child{color: red}- E:only-child:仅有的一个子元素E。（只有一个子元素）
li:only-child{color: red}- E:only-of-type:只有一种类型的子元素。（只有一个P元素）
p:only-of-type{color: rgb(145, 102, 147)}-
E:nth-child(n):元素的第n个子元素E。
- 可以直接用数值：比如2
- 可以用奇数（odd）偶数(even)
- 可以用公式3n
h3:nth-child(2){color: red}#div1>h3:nth-child(2){color: red}h3:nth-child(odd){color: red}h3:nth-child(even){color: red}h3:nth-child(3n){color: red}tr:nth-child(3n+1){color: red} E:nth-last-child(n):匹配父元素的倒数第n个子元素E。
tr:nth-last-child(3n+1){color: red}- E:first-of-type :匹配同类型中的第一个同级元素E。
h3:first-of-type{color: rgb(176, 76, 240)}- E:last-of-type:匹配同类型中的最后一个同级元素E。
p:last-of-type{color: rgb(142, 65, 66)}- E:nth-of-type(n):匹配同类型中的第n个同级兄弟元素E。
p:nth-of-type(2){color: rgb(142, 179, 13)}- E:nth-last-of-type(n):匹配同类型中的倒数第n个同级兄弟元素E。
p:nth-last-of-type(1){color: rgb(85, 20, 173)}- E:empty :匹配没有任何子元素（包括text节点）的元素E。
div:empty{width: 300px;height: 300px;background: rgb(74, 210, 32)} -
伪类选择器_UI伪类及其他选择器
- E:active 向被激活的元素添加样式。
a:active{background: rgb(180, 131, 230)}- E:hover 当鼠标悬浮在元素上方时，向元素添加样式。
a:hover{background: rgb(85, 246, 125)}- E:link 向未被访问的链接添加样式
a:link{color: rgb(187, 150, 150)}- E:visited 向已被访问的链接添加样式。
a:visited{color: rgb(6, 245, 66)}- E:focus 向拥有键盘输入焦点的元素添加样式。
input:focus{background: rgb(161, 47, 231)}- E:lang向带有指定 lang 属性的元素添加样式。
p:lang(en){background: red}- input:checked 选择每个被选中的input元素。
input:checked{width: 200px;height: 200px}- input:disabled 选择每个禁用的input元素
input:disabled{width: 100px;height: 100px}- input:enabled 选择每个启用的input元素。
input:enabled{background: rgb(185, 52, 237)}、 #E:target 选择当前活动的元素(某个被链接的元素)。
:not(E) 选择E元素之外的每个元素。
:not(input){color: yellow}
选择器的优先级问题
- 原则上：元素选择器<类选择器< ID选择器<行内样式
- 谁指向精确谁的优先级高
- 并列的话谁在后边谁优先级高
