css之选择器的认识

  css中有大量的选择器,主要用来精准的找到代码中的某一段或者某一个段落,并对其样式进行选择和改变。

  首先介绍的第一个选择器是:

1,基本选择器:

直接找到标签对其进行样式修正,不论标签藏多深,或者数量有多少都能够被找到和修正。

  

p{
  color:green
  font-size:12px    
}
#标签选择器

span{
  font-size:20px
}

 2,id选择器

#选中id进行分类,相同的id会出现相同的效果。

#d1{
  color:yellow  
}

利用#+id名的方式找到id,当有相同id名时出现共同的效果

 3,类选择器,最实用的选择器之一

  类选择器于class配合使用,class赋予标签一个属性,而且任何标签都可以添加标签,

  并且同一个标签可以携带多个类,用空格隔开,

.kg{
    color:green  
}

.kk{
   color:red
}




<div>
    <p class="kg kk"> 呵呵</p>

当一个标签使用的类拥有相同的样式时,后来者居上,直接覆盖

 2.高级选择器,在基本选择器的满足不了需求的同时,诞生了高级选择器,使得对标签的查找更精准,分别是后代选择器,子代选择器,并集选择器,交集选择器。

  1,后代选择器

div p{
    color:red  
}   #同样是后代选择器,只是这种写法会使所有的div下的p全部变为红色


.father p{
   color:green
}  #这种写法会有更大的可拓展性,并且更精准的按照需求更改样式

   2,子代选择器

div>p{
  color:red
}  #只会寻找到div下的子代的p进行样式修改,孙子辈的不会修改

同理:

.father>p{
    color:green  
}  更精准的找到使用father类的子代进行修正

   3,并集选择器

就是多个标签拥有共同的属性时,将他们都放到一起就能够同时使用:    
 p,span,li,ui{
      color:red
}    

*{
    color:green
}
多少都没问题,直接使用* 将会是所有标签全部修正为这个样式

   4,交集选择器

  当另个样式同时出现在一个标签上的时候,可以额外增加一个样式!

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		h4{
			width: 100px;
			font-size: 14px;
			}
		.active{
		    color: red;
		    text-decoration: underline;
		    /*下划线*/
		}
		/* 交集选择器 */
		h4.active{
		    background: #00BFFF;
		}
	</style>
</head>
<body>
	<p class="d2">nihao </p>
	<h4 class="active"> wocao </h4>
</body>
</html>

   5,属性选择器

   根据标签中的属性进行查找,精准找到符合内容的标签,

属性选择器限用于表单控件中
[type]{
  color : red;
}

[for *= i]{
   color :red
}  表示拥有i元素的for属性

   6,伪类选择器,

  具体作用,给一段字符增加新的功能,以鼠标悬浮为主!

/*没有被访问的a标签的样式*/
        .box ul li.item1 a:link{
            
            color: #666;
        }
        /*访问过后的a标签的样式*/
        .box ul li.item2 a:visited{
            
            color: yellow;
        }
        /*鼠标悬停时a标签的样式*/
        .box ul li.item3 a:hover{
            
            color: green;
        }
        /*鼠标摁住的时候a标签的样式*/
        .box ul li.item4 a:active{
            
            color: yellowgreen;
        }

   7,css3中的选择器nth-child()

/*选中第一个元素*/
        div ul li:first-child{
            font-size: 20px;
            color: red;
        }
        /*选中最后一个元素*/
        div ul li:last-child{
            font-size: 20px;
            color: yellow;
        }
        
        /*选中当前指定的元素  数值从1开始*/
        div ul li:nth-child(3){
            font-size: 30px;
            color: purple;
        }
        
        /*n表示选中所有,这里面必须是n, 从0开始的  0的时候表示没有选中*/
        div ul li:nth-child(n){
            font-size: 40px;
            color: red;
        }
        
        /*偶数*/
        div ul li:nth-child(2n){
            font-size: 50px;
            color: gold;
        }
        /*奇数*/
        div ul li:nth-child(2n-1){
            font-size: 50px;
            color: yellow;
        }
        /*隔几换色  隔行换色
             隔4换色 就是5n+1,隔3换色就是4n+1
            */
        
        div ul li:nth-child(5n+1){
            font-size: 50px;
            color: red;
        }

   8,伪元素选择器

/*设置第一个首字母的样式*/
        p:first-letter{
            color: red;
            font-size: 30px;
        }#
        
/* 在....之前 添加内容   这个属性使用不是很频繁 了解  使用此伪元素选择器一定要结合content属性*/
        p:before{
            content:'alex';
        }#在
        
        
/*在....之后 添加内容,使用非常频繁 通常与咱们后面要讲到布局 有很大的关联(清除浮动)*/
        p:after{
            content:'&';
            color: red;
            font-size: 40px;
        }   #末尾添加内容

 

重点!!!

8,css的继承性和层叠性

  什么是继承,当没有进准查找到某个标签是,而其又在一个快级标签中时,将会出现继承效果,但是继承一般只会继承文本级的标签元素,比如:color,font,text,line

而一些块级标签和盒子元素属性,定位元素不能继承

层叠性:

  权重的大小问题:权重大的标签覆盖掉权重小的标签权重的读取方式按照id,class,标签数量进行读取,一般id的权重最大,当权重相同时候,将会按照就近原则,谁离目标标签最近的会按照它的样式改变

#box1 #box2 .wrap3{
    color: red;
}
.wrap1 #box2{
    color: green;
}

   1.先看便签元素有没有被选中,选中了则按照权重显示属性,权重一样则后来者居上。

   2.如果没有选中,则权重为0,按照就近原则取值。

   最牛的权重

  !important:设置权重为无限大!

   只影响选中的元素,不要随便使用!import 

 

posted @ 2018-05-23 19:39  残烛月夜  阅读(201)  评论(0编辑  收藏  举报