前端学习day03

一、学习目标：css引入方式以及各种选择器

二、1.css引入方式

1.1外部样式引入link

   <link rel="stylesheet" href="./002-引入css方式.css">

1.2内部样式

①@import url(./002-引入css方将34 6式.css); 

②<style></style>

注:样式的优先级问题 内联/行内>内部样式/外部样式(平级的就近原则)

2.css选择器

id选择器,类选择器

区别:id相当于人的身份证不可以重复class相当于人的名称可以重复

         一个HTML标签只能绑定一个id名称 一个HTML标签可以绑定多个class名称

后代选择器 

        div p{}

子元素选择器 

        标签1>标签2

交集选择器

选择器1选择器2{

​             属性: 值;

​          }

并集选择器

选择器1,选择器2{

​             属性:值;

​         }

兄弟选择器

序选择器/伪类选择器

        :first-chikd 选中同级别中的第一个标签

        :last-child 选中同级别中的最后一个标签

        :nth-child(n) 选中同级别中的第n个标签

        :nth-child(odd) 选中同级中的所有奇数

        :nth-child(even) 选中同级中的所有偶数

        :nth-child(xn+y) x,y用户定义 n为计数器从0开始递增

动态伪类选择器

  E:link（链接伪类选择器）：选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接    描点上

​   E:visited（链接伪类选择器 ）：选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于    链接描点上

​   E:active（用户行为选择器）：选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上

​    E:hover （用户行为选择器）： 选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支持    a:hover

a标签的伪类选择器

:link 修改从未被访问过状态下的样式

:visited 修改被访问过的状态下的样式

:hover 修改鼠标悬停在a标签上状态下的样式

​ :active 修改鼠标长按状态下的样式