中常用的四种选择器.docVIP

◆ ?Css中常用的四种选择器 1. 类选择器(class选择器) 基本使用 .类选择器{ ??????? 属性名: 属性值; ??????? …. } 2. id选择器 基本使用 #id选择器{ ??????? 属性名: 属性值; ??????? …. } 案例: /*id选择器的使用*/ #id1{ ??????? background-color:silver; ??????? font-size:40px; } 3.????? html元素选择器 (html的优先级比id和class选择器要低) 某个html元素{ ??????? 属性名:属性值; ??????? … } Html文件 html head link rel=stylesheet type=text/css href=selector.css/ /head body span class=s1新闻一/span span class=s1新闻二/span span class=s1新闻三/span span class=s1新闻四/span span class=s1新闻五/spanbr/br/ span id=id1这是一则非常重要的新闻/span /body /html Css .s1{ background-color:pink; font-weight:bold; font-size:16px; color:black; } /*id选择器的使用*/ #id1{ background-color:silver; font-size:40px; } /*html选择器*/ body{ color:orange; } 运行结果 ? 四个选取器优先权 Id选择器 class选择器 html选择器 通配符选则器 需求人员(技术+行业背景) 财务软件(php,c++)-用友[] 通配符选择器 ? css 文件可以使用在各种文件(php,html,jsp,asp…) *{ /*margan 可以写一个值,(上,右,下,左 顺时针) 如果是两个值 (上下,左右 ) 如果是三个值 (上, 左右, 下)*/ margan:10px 30px 40px 1px; margin:0px; padding:0px; 可以让所有html元素的外边距和内边距都默认为0，有时特别有用。 屏蔽不同浏览器的默认的外边距和内边距的差别 ? 初始化 } 案例: 再比如，我们希望所有的超链接 ??? (1)默认样式是 黑色，24px,没有下划线 (2)当鼠标移动到超链接时，自动出现下划线,字体变大。 (3)点击后,超链接变成 红色。这又该怎么实现呢? a:link{ a 对象在未被访问前的样式? a html元素 ) ??????? color:black; ??????? text-decoration:none; none没有下划线 ??????? font-size:24px; } a:hover{ 设置 a 对象在其鼠标悬停时的样式。 ??????? text-decoration:underline; // ??????? font-size:40px; ??????? color:green; } a:visited{ a 对象在其链接地址已被访问过时的样式。??????? color:red; } Html 文件 link rel=stylesheet type=text/css href=a.css a href=链接到搜狐/a /*对同一中html元素分类*/ p.cls1{ ??????? color:blue; ??????? font-size:30px; } p.cls2{ ??????? color:red; ??????? font-size:20px; } Html文件 link rel=stylesheet type=text/css href=a.css p class=cls1xxxxxxxxx/p p clsss=cls2---------/p ?? 通配符选择器 通配符选取器 该选择器可以用到所有的html元素,但是其优先权最低 *{ ??????? 属性名:属性值; ?? ….} ? 四个选取器优先权 Id选择器 class选择器 html选择器 通配符选则器 ◆选择器的细节问题! ? ? 1.? 父子选择器使用: ? 如果希望特别强调非常2个字，该如何处理？ 方案：? /*父子选择器*/ #id1 span{ color:red; 红 font-style:italic; } #id1 span span{