最新消息:

CSS的多种选择器的使用

CSS 大步 1064浏览 0评论

课程内容

  • p什么是样式选择器
  • pHTML选择器
  • p类选择器
  • pID选择器
  • p关联选择器
  • p组合选择器
  • p伪元素选择器

什么是样式选择器

nSelector {                          /*  Selector 是样式选择器 */
   property:value;    /* color:red;                        */
   property:value;   /* font-size:4cm;                 */
}
Selector:当定义一条样式规则时,必须指定受这条样式规则作用的网页元素,在一条规则中定义的网页元素就是selector(选择器),也就是选择该样式规则作用于的网页元素。

HTML选择器
  •  HTML有标签, CSS就用选择器
  •  选择符就是赋予内部或外部样式表的名字
  •  HTML的标签,用来改变一个指定标签的样式
  •  任何一个元素都可以是一个CSS选择符

类选择器
  •  同一个选择器能有不同的类,因而允许同一个元素有不同的样式
  •  定义的方法
                  [tag].类名  (类名是自定义的,如果不加tag则代表所有HTML元素)
                 <tag class=“类名 类名1 类名2”>  (同一个元素可以使用多个类,类名之间使用空格分开)

ID选择器
  •  在HTML页面中, ID属性指定了某个单一元素,id属性就用来对单一元素定义单独样式
  •  一个HTML页面中,ID属性值要唯一
  •  #idname {  }         (idname是自定义的名称)
  •  <tag id=“idname”>

关联选择器

  • p关联选择器只不过是一个用空格隔开的两个或更多的单一选择器给成的字符串
  • p因为层叠顺序的规则,它们的优先权比单一的选择符大
  • p必须按关联关系使用,不能有反顺序
  • p只要能保持关联关系就可以,不管是在多少层

举例如下:

组合选择器

  • p为了减少样式表的重复声明,组合是允许的
  • 只要使用英文逗号(,)隔开每个选择符就可以

 

伪元素选择器

  • p伪元素选择器是指对同一个HTML元素在不同的状态下的一种定义方式
  • p目前只有ap两处HTML元素可以使用
  • p使用时的语法

n

标签:伪元素           标签[.类名]:伪元素

na:link            没有任何运作前的状态
na:hover         光标移到到超链接上的状态
na:active:       选择超链接的状态
na:visited        访问过超连接的状态
np:first-letter   一个段落中首个字母的状态  
nP:first-line    一个段落中首行的状态

样式规则的继承

所有嵌套在某个HTML标签中的HTML标签都会继承外层标签设置的样式规则。
代码举例:

样式规则的优先级

n关联>ID选择器>CLASS选择器>HTML标签选择器

 

转载请注明:大步's Blog » CSS的多种选择器的使用

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
SiteMap