CSS层叠样式表（二）选择器的使用

CSS层叠样式表（二）

一、CSS的特性

1、CSS的层叠性：CSS样式可以叠加(即一个标签上可以应用多个样式)

2、CSS的继承性：在书写CSS样式表时，子标签会继承父标签的某些样式

p{
		
	color: "red";
}
	
	<p>
		西电
		<span>内容</span>
	</p>

注：边框属性、定位属性、内外的间距属性、元素的宽高属性、布局属性、背景属性不具有继承性的

二、CSS的优先级

(1)权重值越大，优先级越高

(2)继承样式的权重值为0

(3)行内样式优先

(4)当权重值相同时，CSS遵循就近原则

(5)CSS定义了一个!important命令，该命令被赋予最大的优先级

(6)标签选择器权重为1，类选择器为10，id选择器100

三、CSS的选择器

1、属性选择器

(1)E[att^=value]：'E’代表标签名，'att’表示是标签的属性。含义是标签的某个属性值是以给定的value开头

(2)E[att$=value]：表示标签含有给定的属性，并且属性值是以value值结尾的

(3)E[att*=value]：表示标签含有给定的属性，并且属性值中含有value值

<a href="http.//www.baidu.com" title="xiaoyi">百度</a>
    <br><br>
    <a href="http.//www.taobao.com" title="ziaoli">淘宝</a>
    <br><br>
    <a href="http.//www.hao123.com" title="qiaoai">hao123</a>
    <br><br>
    <a href="http.//www.xinlang.com" title="siaoai">新浪</a>
    <br><br>
    <a href="http.//www.jingdong.com" title="yingyu">京东</a>
    <hr>

<style type="text/css">
    a[title^='xi']{  /*表示a标签有title属性，并且title属性的值是以‘xi’开头的*/
        text-decoration: none;  /*去掉文本下划线*/
    }
    a[title$='li']{  /*表示a标签有title属性，并且title属性的值是以‘li’结尾的*/
        text-decoration: none;  /*去掉文本下划线*/
    }
    a[title*='ai']{  /*表示a标签有title属性，并且title属性的值中包含有'ai'字符串*/
        text-decoration: none;  /*去掉文本下划线*/
    }

结果如图

2、复合选择器：多个选择器混合使用，选择器之间用逗号隔开

p,.dd,#d1{
        color: red;
       }

3、关系选择器

(1)子元素选择器（>）

 h1>strong{ 
             color:blue;
         }

(2)兄弟选择器：

A、临近兄选择器：使用加号“+”来链接前后两个选择器。选择器中的两个元素有同一个父亲，
	            而且第二个元素必须紧跟第一个元素

div>p+div{ 
                 color: chartreuse;
                } 

B、普通兄弟选择器：使用 “~”来链接前后两个选择器。选择器中的两个元素有同一个父亲，
	              但第二个元素不必紧跟第一个元素

div>#p2~div{
                    color: chartreuse;
                }

4、伪类选择器

(1)E:first-child{ 样式规则 }

          匹配父元素的第一个子元素E。
	
          要使该属性生效，E对象必须是某个对象的子元素。 

(2)E:last-child{ 样式规则 }

	      匹配父元素的最后一个子元素E。
	
          要使该属性生效，E对象必须是某个对象的子元素。 

(3)E:nth-child(n){ 样式规则 }

	      匹配父元素的第n个子元素E。
		  
          要使该属性生效，E对象必须是某个对象的子元素。

(4)E:nth-last-child(n){ 样式规则 }

	      匹配父元素的倒数第n个子元素E。
		  
          要使该属性生效，E对象必须是某个对象的子元素。 

(5)E:empty{ 样式规则 }

	      匹配没有任何子元素（包括text节点）的元素E。 

(6)E:link{ 样式规则 }

	     设置超链接a在未被访问前的样式。

(7)E:visited{ 样式规则 }

	     设置超链接a在其链接地址已被访问过时的样式。

(8)E:hover{ 样式规则 }

	    设置元素在其鼠标悬停时的样式。 

(9)E:active{ 样式规则 }

	    设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。

示例代码

p:last-child{
       color: rebeccapurple;
   }
   p:first-child{
       background-color: yellowgreen;
   }
   /*p:nth-child(2){
       background-color: tomato;
   }
   p:nth-last-child(2){
       color: goldenrod;
   }*/
   p:empty{
       /*background-color: green;*/
       height: 25px;  /*边框线的高度*/
       border: 1px solid #bbb;  /*边框线德宽度、线形、颜色  可以分开写，也可以合在一起写*/
       /*border-width: 1px;
       border-style: solid;
       border-color: hotpink;*/
   }

a:link{
        font-size: 20px;
        font-family: '宋体';
        color: hotpink;
    }
    a:visited{
        font-size: 35px;
        color: indigo;
    }
    a:hover{
        font-style: italic;
        font-size: 50px;
    }
    a:active{
        font-weight: bolder;
        color: blue;
    }
    p:hover{
        font-size: 40px;
        color: cadetblue;
    }
    p:active{
        font-weight: bolder;
        font-family: '小篆';
        color: blue;
    }

补充 ： 列表的样式规则

(1)list-style-image：用来设置列表项的标记(项目符号)图像。

(2)list-style-style：用来设置列表项的项目符号样式。若值为none则没有项目符号

(3)list-style-position：设置项目符号和文本的位置关系

	    outside： 列表项目标记放置在文本以外，且环绕文本不根据标记对齐 
		
		inside： 列表项目标记放置在文本以内，且环绕文本根据标记对齐