您当前的位置: 站长圈 > 网页前端

阿Q老师CSS基础课程第二课CSS选择器

来源:站长圈|0 作者:adminzzq 点击: 0
CSS选择器(配套视频教程见路航网站视频栏目) 

一,语法:选择器{属性:属性值[;属性:属性值]。。。}
 注释:/*注释内容*/
 选择器:为样式找到目标。
二,常用选择器
 1,类型选择器:标签选择器。简单选择器。div{font-size:12px;}li{list-style:none}
 2,后代选择器:用空格来表示 div a{}
 3,id选择器:具有ID属性值的。用#来表示
  id在一个页面中必须是唯一的。
 4,类选择器:用.来表示。类在页面中可以有多个。

  注意:id选择器的优先级比类选择器高。

 5,伪类选择器:文档结构之外的其他条件对应的样式。
  a:link{} /*未点击时候的样式*/
  a:visited{} /*点击过的样式*/
  a:hover{}/*鼠标移上去的样式*/
  a:active{}/*点击时个的样式*/
  
  li:hover{} ie6不支持
  .q{border:1px solid #666;height:25px;}
  .q:focus{border:1px solid green;} 元素得到焦点时候的样式。ie6不支持此伪类
 6: 伪元素选择器:
  首字: p:first-letter
  首行:p:first-line
  第一个儿子: ul.nav:first-child class="nav"的ul元素的第一个儿子。
  最后一个儿子:ul.nav:last-child class="nav"的ul元素的最后一个儿子。

 7:通用选择器:用*来表示。常用于重置浏览器。*{margin:0;padding:0;}
  作用:让不同的浏览对所有标签默认的margin,padding都为0;

  注意:现在很少有用*{margin:0;padding:0}来重置浏览器,效率比较低,而且针对不同的标签没有单独处理。
    大家可以在群共享里下载共享的reset.css文件,将它作为重置浏览器的css文件


三 高级选择器:
 子选择器: 用>表示 E > F
 相邻选择器:用+表示 E + F 同一个父元素下E元素的后一个元素
 属性选择器:用属性和属性值来选择元素 a[title]
 
 高级选择级ie6均不支持。作为了解即可。


注意今天示例用了高级选择器,只是为了演示选择器,正式页面中,有其他的方法来代替这些高级选择器。