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元素 所以变蓝了

---