第十二课 CSS基本选择器 css学习2

基础选择器
一、标签选择器(元素选择器)
标签选择器是指用HTML标签名称作为选择器,按标签名称分类
语法:标签名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}

二、类选择器
1、类选择器使用"."(英文)+类名进行选择

三、css命名规范
1、长名称或词组可以使用中横线来为选择器命名
2、不建议使用“_”下划线来命名Css选择器
3、不要用纯数字或中文命名

命名规范是我们通俗约定。见名知意

四、多类名选择器
语法:class="类名1 类名2"

五、id选择器
1、id选择器使用"#"+id名称 即 #id

六、类选择器与id选择器的区别
1、类选择器是可以重复多次使用的
2、id选择器 一般是唯一的,只允许使用一次

七、通配符选择器
通配符选择器用“*”表示,它是所有选择器中作用范围最广的,
能匹配页面中的所有元素。要谨慎使用。

伪类选择器用于向某些选择器添加特殊效果

八、链接伪类选择器(主要针对于a标签)
1、:link 未访问的链接 如:a:link{}
2、:visited 已访问过链接 如: a:visited{}
3、:hover 鼠标移动到链接上 如:a:hover{}
4、:active 选定的链接,当我们点击不松开 如: a:active{}
注:书写顺序按照 link visited hover active l v h a

九、链接伪类选择器简写
在一般开发中常用到 link 与hover 伪类
实际开发工作中,我们简写就好了
<style>
a{
  font-weight: 700;
  font-size: 16px;
  color: gray;
}
a:hover{ /*:hover 是链接伪类选择器 鼠标经过 */
  color: red;
}
</style>

十、结构(位置)伪类选择器(CSS3)
1、:first-child 选取父元素的首个元素的制定选择器
2、:last-child 选取父元素的最后一个元素的制定选择器
3、:nth-child(n) 选取属于父元素的第N个子元素, 如:n=odd奇数 n=even偶数 n=2n 偶数 n=2n+1奇数
4、:nth-last-child(n) 选取父元素的第n个子元素,
不论与元素类型,从最后一个子元素开始计数。
n 可以是数字,关键词或公式

十一、目标伪类选择器器
:target目标伪类选择器 选择器可用于选取当前活动的目标元素

上一篇:js switch 字符串


下一篇:工具第二天 cocoaPods 私有库的创建