益盛:css选择器的类型与应用

建站知识

什么是选择器呢?

每一条css样式定义由两部分组成,形式如下: [code] 选择器{样式} [/code] 在{}之前的部分就是“选择器”。 “选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素。


一、css选择器的分类

1、基本选择器
A.标记选择器
B.类别选择器
C.ID选择器
 
2、复合选择器
A.“交集”选择器
B.“并集”选择器
C.后现代选择器
 
二、css选择器属性应用
1、标记选择器
 
定义html标记的通用CSS样式,定义语句前无前缀。例如:
 
<style type=”text/css”>
 
h1{  color:red }
 
</style>
 
<h1>This is test.</h1>
 
2、类选择器 
 
      在 CSS 中,类选择器以一个点号命名,在html里用class来调用。
      
例:      
       .center {text-align: center;}
 
       <h1 class=”center”>天水网络营销培训——本标题将居中</h1>
 
       <p class=”center”>
        天水士人网络主要从事天水网站建设和网络营销培训的互联网服务机构——本段文字将居中
       </p>
     注:类选择器在一个页面中可以出现多次。
 
3、ID选择器
 
      id 选择器以 “#” 来定义,在html里用id来调用。
 
     例:
          #red {color:red;}
          #green {color:green;}
 
          <p id=”red”>这个段落是红色。</p>
          <p id=”green”>这个段落是绿色。</p>
 
      Id选择器具有唯一性,在一个页面中只能出现一次,在整个网站中也最好出现一次。
 
4、“交集”选择器
 
      由两个选择器直接连接构成,其结果是选中二者各自元素范围的交集。
 
【注意事项】:
1、其中第一必须是标记选择器,第二个必须是类别选择器或者ID选择器,
2、两个选择器之间不能有空格,必须连续书写。
例如:
<style>
p{color:#0000FF;}
.special{color:#FF0000;}
p.special{color:#00FF00;}
</style>
 
5、“并集”选择器
 
   也可以叫集体声明,集团选择器等。同时选中各个基本选择器所选择的范围,任何形式的选择器都可以,并集选择器是多个选择器通过逗号连接而成的,
 
格式如:
 
h1,h2,h3{color:red;font-size:23px;}
 
div,p,.h1{ font-size:20px;}
 
6、后代选择器(派生选择器)
 
     在CSS中,“后代” 就是在代码中:里层的元素是外层元素的后代。
     后代选择器的写法就是把外层的标记写在前面,内层的标记写在后面,之间用空格分隔。当标记发生嵌套时,内层的标记就成为外层标记的后代。
例如:
<style>
p span {  color:blue;  font-size:20px }
   span {  color:green }
</style>
 
<p>嵌套使<span>用CSS</span>标记的方法</p>  嵌套之外的<span>标记</span>不生效
 
7、其它
      如果想要一个页面中所有html标记使用同一种样式,可以定义一种全局选择器: ‘*’。例如:
 
<style>
* {  color:red;  font-size:10px}
body {  color:red;  font-size:10px}
</style>
 
<p>普通段落</p>
<p>第一段</p>
<h1>第一段标题</h1>
 
三、关于css优先级
1.id优先级高于class
 
2.后面的样式覆盖前面的
 
3.指定的高于继承
 
4.行内样式高于内部或外部样式
 
5.总结:单一的(id)高于共用的(class),有指定的用指定的,无指定则继承离它最近的
 
四、CSS选择器命名规则

采用字符[a-zA-Z0-9],再加连字号(-)和下划线(_)。避免使用中文;不能以 数字,或一个连字号后跟数字为开头。

继续阅读