CSS 选择器使用方法示例

发布时间:2020-06-10编辑:脚本学堂
介绍下css选择器的用法,学习常用的css选择器的使用方法,分享一个css选择器的例子,供大家参考。

本节内容:
CSS 选择器的用法。

CSS是英语Cascading StyleSheets(层叠样式表单)的缩写,它是一种用来表现HTML或 XML等文件样式的计算机语言。

CSS目前最新版本为CSS3,是能够真正做到网页表现与内容分离的一种样式设计语言,相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言,CSS能够根据不同使用者的理解能力,简化或者优化写法,针对各类人群,有较强的易读性。

要使用CSS对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器。

常用的选择器:
类选择器:用于来定义一类可以在同一个页面内重复利用的样式,或自己定义的用于列表的样式,详细的写好链接,列表,边框以及背景等属性,类选择器根据类名来选择,前面以”.”来标志。

id选择器:用于一个页面中仅出现一次的容器,也常常作为js的接口,id选择器根据元素id来选择元素,具有唯一性,前面以”#”号来标志
html选择器:用于最基础样式的定义,比如定义页面整体的字体,链接的样式,列表项的符号样式,段落的间距等。
通配符选择器:如果希望所有元素都符合某一种样式,可以使用通配符选择器。
选择器之间可以构成父子关系,父子选择器可以有多级,适用于id选择器和class选择器。

例子,my.css
 

复制代码 代码示例:
/*类选择器*/ 
.style1{ 
    font-weight: bold; 
    font-size:20px; 
    background-color:pink; 

/*id选择器*/ 
#style2{ 
    font-size:30px; 
    background-color:silver; 

/*父子选择器*/ 
#style2 span{ 
    font-style:italic; 
    color:red; 

/*html选择器*/ 
body{ 
    color:orange; 

/*通配符选择器*/ 
*{ 
    /*对外边距和对内边距清0*/ 
    margin:0px 0px 0px 0px; 
    padding:0px; 

2,text.html
 

复制代码 代码示例:
<!DOCTYPE html> 
<html> 
  <head> 
    <title>test.html-www.jb200.com</title> 
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
    <meta http-equiv="description" content="this is my page"> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <link rel="stylesheet" href="my.css" type="text/css"></link> 
  </head> 
  <body> 
     <span class="style1">栏目一</span><br/> 
    <span id="style2">栏目二</span><br/> 
    <span id="style2">重要<span>新闻</span></span><br/> 
    </body> 
</html> 
 

网页如下图所示:
css选择器

注意:
当一个元素同时被类选择器,id选择器,html选择器,通配符选择器修饰时,优先级是id选择器>类选择器>html选择器>通配符选择器,当多个class选择器发生冲突时,以CSS中最后出现的class选择器样式为准。

在CSS文件中,如果有多个类/id选择器它们有相同的部分,可以把相同的css样式放在一起,形式如:.style1,.style2,.style3{}。