CSS . .
class和id
同一个class属性可以出现多次 添加给不同的元素使用 用 .class 来添加css样式
而id对应唯一个元素 当一个元素比较特别 重要时候可添加id 用#id来给其添加css样式
CSS选择器
-
基础选择器:
-
* 通配符 选择所有的元素
-
#id id选择器 匹配特定id元素
-
.class 类选择器 匹配包含类名的元素
-
element 标签选择器
-
组合选择器:
- A,B 多元素选择器 用逗号分隔 同时匹配A和B
-
A B 后代选择器 用空格分隔 匹配 A后代中所有的B 包括B中所有的子元素
-
A>B 子元素选择器 只匹配A的直接子元素B
-
A+B 直接相邻选择器 匹配A之后直接相邻的同级别B
-
A~B 普通相邻选择器 匹配A之后的所有同级别的B 无论是否直接相邻
-
.class1.class2 element#id 这种选择器写的时候中间没有分隔符.和#充当了分隔符 表示同时拥有连写的属性的元素
-
属性选择器
-
A[attr] 匹配所有具有 attr 这个属性的A元素
-
A[attr = value] 匹配具有 attr 这个属性，且属性值为 value 的A元素
-
A[attr ~= value] 匹配所有具有 attr 这个属性，且具有多个空格分隔，其中一个值为 value 的A元素
-
A[attr ^= value] 匹配具有 attr 这个属性，且属性值以 value 开头的A元素
-
A[attr $= value] 匹配具有 attr 这个属性，且属性值以 value 结尾的A元素
-
A[attr *= value] 匹配具有 attr 这个属性，且属性值包含 value 的A元素
-
伪类选择器
-
A:first-child 匹配元素A的父元素的第一个子元素A.必须A是作为第一个子元素 假如A的前面还有B则A不会被匹配到 包括这个子元素的后代元素 例：p:first-child{..}
-
A:last-child 匹配元素A的父元素最后一个子元素A。例：p:last-child{..}
-
A:nth-child(n) 匹配A的父元素的第n个子元素A，第一个编号为1。
例: p:nth-child(2){..}
-
-
A:first-of-type 匹配A的父元素下的第一个Ａ元素
等同于nth-of-type(1)。例：p:first-of-type{..} -
A:hover 当把鼠标悬停在A元素上。
-
A:focus 匹配获得焦点的A元素。 像填写表单时选中的密码框
-
伪元素选择器
-
A::before 在A元素中最开始位置插入生成的内容,必须要有content
例 div::before{content="cool";} -
A::after 在A元素中最后面的位置插入生成的内容, 必须要有content
例 div::after{content:"cool";} -
A::first-line 匹配A元素的第一行
-
A::first-letter 匹配A元素的第一个字母
-
选择器的优先级 对于复杂场景如何计算优先级？
- 在属性后加 !important 会覆盖页面内任何定义的样式
.cool{ color: blue!important;}
- 内联样式 在标签中使用style属性
<div style="color:blue;"></div>
-
id选择器 #id
-
类选择器 .class
-
伪类选择器
-
属性选择器
-
标签选择器
-
通配符
-
浏览器自定义
计算优先级 分几个级别 例如俩个样式 一个有ID选择器 一个没有 那就是有ID的优先级别高 如果都有 那就看类选择器 属性选择器 伪类选择器 个数多的 优先级别高
总之越具体 优先级别越高 如果具体程度一样 那就看 先后顺序 后面的样式优先级别高
a:link, a:hover, a:active, a:visited 的顺序
link visited hover active
link表示未被点击的链接 所以放最前
visited表示被点击过的链接 点击过后覆盖未被点击时的样式
hover 表示鼠标悬停在链接上时 无论是点击前还是点击后 把鼠标放在链接上时都会覆盖上俩种样式
active 表示鼠标放链接上点击 但没松开时的状态 鼠标在链接上 但又增加了一个点击不松开的动作 如果把active放在hover之前的话 就会出现你点击了没松开 但active中写的样式却不会实现 因为鼠标始终处于放在链接上的状态 而hover在active之后 优先级高 覆盖了它的样式 所以始终表现为hover 的样式 so active放在最后
以下选择器分别是什么意思
#header{}
id为header的元素
.header{}
class包含header的元素
.header .logo
包含class为header的元素 的子元素中所有 包含logo类名的元素 包括这些元素所有的后代
.header.mobile
匹配同时拥有header和mobile这俩个类名的元素及其后代元素
.header p, .header h3{}
包含类名为header的P元素和包含类名为header的h3元素
#header .nav>li{}
id为header的元素的后代元素中类名包含nav的元素 的所有li直接子元素 但不包括li的后代元素
#header a:hover{}
id为header 的a链接 当鼠标悬停在链接上时的样式
#header .logo~p{}
id为header的元素的后代元素中包含类名logo的元素之后的同级别元素p 无论是否直接相邻
#header input[type="text"]
id为header的元素的后代元素中 type属性值为text的input元素
伪类选择器
a:link 匹配所有未被点击的链接。
a:visited 匹配所有已被点击的链接。
a:hover 匹配鼠标悬停在连接上
a:active 匹配鼠标已经点击链接、还没有释放
:enabled 匹配表单中可用的元素。
:disabled 匹配表单中禁用的元素。
:checked 匹配表单中被选中的radio或checkbox元素。
:selection 匹配用户当前选中的元素。
:nth-child(n) 匹配其父元素的第n个子元素，第一个编号为1。
:nth-last-child(n) 匹配其父元素的倒数第n个子元素，第一个编号为1。
:nth-of-type(n) 与:nth-child()作用类似，但是仅匹配使用同种标签的第n个元素。
:nth-last-of-type(n) 与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素。
:last-child 匹配父元素的最后一个子元素，等同于:nth-last-child(1)。
:first-of-type 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)。
:last-of-type 匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)。
:only-child 匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)。
:only-of-type 匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)。
:not(selector) 匹配不符合当前选择器的任何元素。
div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和区别
div:first-child div的父元素下作为第一个子元素的div
div:first-of-type div的父元素下的第一个ｄｉｖ元素
div :first-child 匹配所有div元素的后代元素中属于其父元素的首个子元素
<div>
<span>aaa</span>
<p>ppp<strong>ssss</strong>pp</p>
<div> 使用div :first-child 则span 和 strong 会被匹配到
div :first-of-type 匹配所有div元素的后代元素中属于其父元素的首个类型的子元素
输出结果
aa字体变红是因为 .item1:first-child{color: red;}
P的父元素的第一个子元素就是P 所以字体变红
背景变蓝是因为 .item1:first-of-type{background: blue;}
包含类名item1的刚好是几个同级元素 而它们的父元素也就是class为ct的div元素下使用同种标签的第一个元素 就是 p元素和第一个h3元素 所以变蓝了
