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

css之选择器的认识的更多相关文章

  1. CSS的选择器

    <div id="demo"> <div class="inner"> <p><a href="#" ...

  2. JS实战 · 仿css样式选择器

    代码如下: <html> <head>     <meta http-equiv="Content-Type" content="text/ ...

  3. CSS 后代选择器

    后代选择器(descendant selector)又称为包含选择器. 后代选择器可以选择作为某元素后代的元素. 根据上下文选择元素 我们可以定义后代选择器来创建一些规则,使这些规则在某些文档结构中起 ...

  4. css后代选择器（div.class中间不带空格）

    如果我要查找<div>上用了.class的元素,查找方法:div.class:中间是不空格的. 以上这种形式为css后代选择器 参考:http://www.w3school.com.cn/ ...

  5. CSS样式选择器优先级

    CSS样式选择器分为4个等级,a.b.c.d,可以以这四种等级为依据确定CSS选择器的优先级. 1.如果样式是行内样式(通过Style=””定义),那么a=12.b为ID选择器的总数3.c为Class ...

  6. css中选择器的使用

    css是英文Cascading Style Sheets的缩写.它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.我们再将html比喻 ...

  7. CSS 派生选择器

    派生选择器 通过依据元素在其位置的上下文关系来定义样式,你可以使标记更加简洁. 在 CSS1 中,通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors),这是由 ...

  8. CSS 类选择器

    在 CSS 中,类选择器以一个点号显示: .center {text-align: center} 在上面的例子中,所有拥有 center 类的 HTML 元素均为居中. 在下面的 HTML 代码中, ...

  9. CSS id 选择器

    id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式. id 选择器以 "#" 来定义. 下面的两个 id 选择器,第一个可以定义元素的颜色为红色,第二 ...

  10. CSS类选择器和ID选择器

    CSS类选择器和ID选择器皆允许以一种独立于文档元素的方式来指定样式,同时二者皆区分大小写. 区别如下: 第一:在同一个页面内,不允许有相同名字的id对象出现,但是允许相同名字的class 第二:当页 ...

随机推荐

  1. 1-15-2-RAID10 企业级RAID磁盘阵列的搭建（RAID1、RAID5、RAID10）

    RAID10的搭建: 有两种方法, 第一种:直接使用四块磁盘,创建级别为10的磁盘阵列 第二种:使用四块磁盘先创建两个RAID1,然后在用RAID1创建RAID0 第一步:添加五个磁盘到虚拟机 开机后 ...

  2. 获取CPU和内存的使用率

    1.获取CPU的使用率 主要就是一个计算. int CUseRate::GetCPUUseRate() //获取CPU使用率 { ; FILETIME ftIdle, ftKernel, ftUser ...

  3. python类常用装饰器

    class Myclass(object): def __init__(self): pass #必须实例化才能调用 def sayhi(self): print 'hello' #静态方法,跟类没什 ...

  4. IOS UI-控制器的生命周期

    一.控制器的生命周期 代码 @interface NJOneViewController () @property (nonatomic, strong) NSArray *foods; @end @ ...

  5. Python批量修改图片格式和尺寸

    Python批量修改图片格式和尺寸 备注: 1.导入了PIL库,是处理图片用的,很强大; 2.导入了的win32库,是判断隐藏文件用的,我们的项目需要删除隐藏文件,不需要的可以直接找到删除. 3.导入 ...

  6. Linux 挂载系统盘

    适用系统:非IO优化+SSD云盘Linux(Redhat , CentOS,Debian,Ubuntu)实例,IO优化实例+SSD云盘数据盘分区挂载建议使用脚本:工具:auto_fdisk_ssd.s ...

  7. 初次使用Bootstrap

    一.概述也好,过程也好,反正就是这样 知道这个还是从群里听到的,一个人的视野是有限,必须借助他人来扩展.好奇使我去搜索了解了一下.原来是一个网页前端框架,可以适合不同大小屏幕,自动适应正常显示.这就是 ...

  8. LA3029

    题解: 一个类似尺取法的算法 代码: #include<cstdio> #include<algorithm> using namespace std; ; int T,n,m ...

  9. LeetCode OJ：Maximal Rectangle（最大矩形）

    Given a 2D binary matrix filled with 0's and 1's, find the largest rectangle containing all ones and ...

  10. Hibernate常见配置详细解释

      <!--标准的XML文件的起始行,version='1.0'表明XML的版本,encoding='gb2312'表明XML文件的编码方式--> <?xml version='1. ...