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
css之选择器的认识的更多相关文章
- CSS的选择器
<div id="demo"> <div class="inner"> <p><a href="#" ...
- JS实战 · 仿css样式选择器
代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/ ...
- CSS 后代选择器
后代选择器(descendant selector)又称为包含选择器. 后代选择器可以选择作为某元素后代的元素. 根据上下文选择元素 我们可以定义后代选择器来创建一些规则,使这些规则在某些文档结构中起 ...
- css后代选择器（div.class中间不带空格）
如果我要查找<div>上用了.class的元素,查找方法:div.class:中间是不空格的. 以上这种形式为css后代选择器 参考:http://www.w3school.com.cn/ ...
- CSS样式选择器优先级
CSS样式选择器分为4个等级,a.b.c.d,可以以这四种等级为依据确定CSS选择器的优先级. 1.如果样式是行内样式(通过Style=””定义),那么a=12.b为ID选择器的总数3.c为Class ...
- css中选择器的使用
css是英文Cascading Style Sheets的缩写.它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.我们再将html比喻 ...
- CSS 派生选择器
派生选择器 通过依据元素在其位置的上下文关系来定义样式,你可以使标记更加简洁. 在 CSS1 中,通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors),这是由 ...
- CSS 类选择器
在 CSS 中,类选择器以一个点号显示: .center {text-align: center} 在上面的例子中,所有拥有 center 类的 HTML 元素均为居中. 在下面的 HTML 代码中, ...
- CSS id 选择器
id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式. id 选择器以 "#" 来定义. 下面的两个 id 选择器,第一个可以定义元素的颜色为红色,第二 ...
- CSS类选择器和ID选择器
CSS类选择器和ID选择器皆允许以一种独立于文档元素的方式来指定样式,同时二者皆区分大小写. 区别如下: 第一:在同一个页面内,不允许有相同名字的id对象出现,但是允许相同名字的class 第二:当页 ...
随机推荐
- 第六天 文件的基本管理和xfs文进系统备份恢复
1.1 Linux系统目录结构,相对路径/绝对路径 1.1.1 Linux系统目录结构 在linux系统中一切都是文件 / 根目录,一切的起点,就像是一个树杈一样,他是所有叉的根 /bin 在单用户模 ...
- UVA-11374 Airport Express （dijkstra+枚举）
题目大意:n个点,m条无向边,边权值为正,有k条特殊无向边,起止点和权值已知,求从起点到终点的边权值最小的路径,特殊边最多只能走一条. 题目分析:用两次dijkstra求出起点到任何一个点的最小权值, ...
- su | sudo su | sudo -i
su <user> <user> <user> 需要输入user的密码,该命令改变user id,执行过后,以<user>中定义的用户运行shell,就 ...
- IOS UI-UISearchController
ViewController.m // // ViewController.m // IOS_0224_查找联系人 // // Created by ma c on 16/2/24. // Copyr ...
- hdu 1536&&1944 S-Nim sg函数 难度:0
S-Nim Time Limit: 5000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submi ...
- 【python常见面试题】之python 中对list去重的多种方法
在python相关职位的面试过程中,会对列表list的去重进行考察.(注意有时会要求保证去重的顺序性) 1.直观方法 li=[1,2,3,4,5,1,2,3] new_li=[] for i in l ...
- NI FPGA板卡程序设计概述
NI公司提到了三种不同应用开发环境ADE:http://www.ni.com/white-paper/5956/zhs/ LabVIEW是NI公司主推的ADE,采用G语言(图像化语言),支持力度最大 ...
- 自己定义的Excetpion继承哪个异常有什么讲究？[待解答]
try catch的地方需要用到一个自定义的DBException,如下: 于是我就自定义了一个DBException,继承Excetpion,以父类Exception构造器创建构造器: DBExce ...
- Openlayers3中实现地图的切割
概述: 本文讲述如何在Openlayers3中结合canvas实现对地图的切割. 效果: 全图 切割北京区域 切割河北区域 实现: <html xmlns="http://www.w3 ...
- [Linux] sed命令使用之在文件中快速删除/增加指定行
1.删除文档的第一行 sed -i '1d' <file> 2.删除文档的最后一行sed -i '$d' <file> 3.在文档指定行中增加一行例如文档如下:echo &qu ...