第十二课 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目标伪类选择器 选择器可用于选取当前活动的目标元素