CSS学习笔记第3天

网站建设 · 2020-10-22
1.3.3 ID选择器UzxIT米工网
我们知道页面中ID名称是唯一的,ID值也就是ID标签属性值,一个页面中的ID只能对应文档中具体的元素,html文档中构成整体框架的标签,我们一般都通过ID属性来标识名称。ID选择器能够精确快速的匹配页面中的对象。UzxIT米工网
ID选择器格式UzxIT米工网
#box{width:100px;height:100px;}UzxIT米工网
ID选择器一般情况下匹配一个特定的对象。UzxIT米工网
UzxIT米工网
1.3.4 类选择器UzxIT米工网
类选择器格式:UzxIT米工网
.red{color:red;}UzxIT米工网
类选择器和标签选择器都具有一对多的特性,也就是说一个样式可以控制多个元素对象的显示效果。与标签选择器相比,类选择器具有更大的灵活性和适应能力UzxIT米工网
标签选择器适应于元素的全局样式控制,类选择器适合对不同的标签执行相同效果的控制。UzxIT米工网
类选择器和ID选择器在页面中的优先级不同,ID选择器定义的样式优先级要高于类选择器。UzxIT米工网
尽量简化代码结构,尽量少使用class和ID选择器,多使用复合型选择器(特殊选择器)UzxIT米工网
UzxIT米工网
1.3.5 伪类和伪对象选择器UzxIT米工网
伪类和伪对象选择器格式:UzxIT米工网
div:hover{font-size:12px;}UzxIT米工网
伪选择器一般用来选择特殊的区域或特殊状态下的元素或对象。UzxIT米工网
例::focus 定义对象在成为输入焦点(该对象的onfocus事件发生)时的样式.UzxIT米工网
页面交互设计和样式控制中,主要难度在于灵活而精确的找到某个对象。UzxIT米工网
例:
    <style type="text/css">
    a{text-decoration:none;} /* 相同的样式都放在这里 */
    a:link{color:#FF0000;} /* 第1位置,定义超链接默认样式 */
    a:visited{color:#0000FF;} /* 第2位置,定义访问过的样式 */
    a:hover{color:#00FF00}  /* 第3位置,定义鼠标经过的样式 */
    a:active{color:#CC00CC}   /* 第4位置,定义鼠标按下的样式 */
    </style>