400-807-8991
奇酷学院专注于HTML5培训,欢迎您咨询本校HTML5培训班
网站首页 >HTML5培训 >HTML5教程 >CSS选择器有哪些类型,如何使用

CSS选择器有哪些类型,如何使用

来源:奇酷学院 点击量: 发表于:

选择器是CSS的核心,从最初的元素、class/id选择器,演进到伪元素、伪类,以及CSS3中提供的更丰富的选择器,定位页面上的任意元素开始变得愈发的简单。

常见的CSS选择器

一、CSS选择器类型

1.标签选择器(如:body,div,p,ul,li)

2.类选择器(如:class="head",class="head_logo") 

3.ID选择器(如:id="name",id="name_txt")

4.全局选择器(如:*号)

5.组合选择器(如:.head .head_logo,注意两选择器用空格键分开)

6.继承选择器(如:div p,注意两选择器用空格键分开)

7.伪类选择器(如:就是链接样式,a元素的伪类,4种不同的状态:link、visited、active、hover。)

8.字符串匹配的属性选择符(^ $ *三种,分别对应开始、结尾、包含) 

以上选择器在日常开发中最常用的就是标签选择器、类选择器和id选择器。

CSS选择器的使用

二、3种CSS选择器的基本用法

1.标签名选择器 一个XHTML文档中有许多标签,例如p标签,h1标签等。若要使文档中的所有p标签都使用同一个CSS样式,就应使用标签选择器。

div {color:red;border:1px blue solid;} 

p {color:#000;}

2.类选择器 使用标签选择器可以为整个XHTML文档中的同一个标签指定相同的CSS样式。但是在实际运用中,XHTML文档中的同一个标签会被反复使用。若要为相同的标签赋予不同的CSS样式就应使用类选择器。

测试代码

 .test {color:red;border:1px blue solid;} 

3.id选择器,id选择器是唯一的,只可以获取独一无二的一个元素。

测试代码

#test {color:red;border:1px blue solid;}

 

文章标签: css教程 css选择器

热门文章

  • Sublime如何快速生成HTML5头部信息。

    Sublime是一款强大的代码编辑软件,由于其操作简洁一直以来被很多前端工程师所喜爱。但一些刚接触Sublime码农却不知道如何使用它的快捷键,今天就让小编来介绍一下Sublime如何快速生成HTML5快【阅读全文】

    发布时间:2017-10-12 阅读量:207
  • CSS选择器有哪些类型,如何使用

    选择器是CSS的核心,从最初的元素、class id选择器,演进到伪元素、伪类,以及CSS3中提供的更丰富的选择器,定位页面上的任意元素开始变得愈发的简单。【阅读全文】

    发布时间:2017-10-25 阅读量:41
  • 推荐四款常用的HTML5前端开发框架

    作为一名HTML5前端开发者自然少不了要接触各类前端开发框架,今天就让奇酷学院为大家介绍四款最常用的HTML5前端开发框架,帮助大家在前端页面设计的过程中减少工作量提升效率。【阅读全文】

    发布时间:2017-10-25 阅读量:50
  • 7款非常使用的HTML5前端图表控件

    HTML5前端前端工程师在设计的页面的过程中经常会涉及到一些柱状图、折线图、饼状图的设计,今天就让小编为大家推荐7款非常实用的HTML5前端图表控件供大家开发使用。【阅读全文】

    发布时间:2017-10-26 阅读量:156

开课提醒

郑州 石家庄

郑州HTML5
开课时间离开课还有

-

石家庄HTML5
开课时间离开课还有

-

奇酷学院培训课程

猜你喜欢

HTML5工具教程

HTML5视频教程