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 第二:当页 ...
随机推荐
- 修改linux系统用户最大线程数限制
linux系统对线程数量有个最大限制,当达到系统限制的最大线程数时使用账号密码ssh到系统时是无法登陆的,会报Write failed: Broken pipe,或者是shell request fa ...
- torch 深度学习 (2)
torch 深度学习 (2) torch ConvNet 前面我们完成了数据的下载和预处理,接下来就该搭建网络模型了,CNN网络的东西可以参考博主 zouxy09的系列文章Deep Learning ...
- 纯css做三角形形状
/* create an arrow that points up */ div.arrow-up { width:0px; height:0px; border-left:5px solid tra ...
- spring配置bean的生命周期
配置文件: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http:// ...
- 利用PXE引导安装centos7
# 利用PXE引导安装centos7 # ###简介### > PXE (Pre-boot Execution Environment,PXE client 在网卡的 ROM 中,当计算机引导时 ...
- kmplayer加速播放视频（转）
转自微博:http://blog.sina.com.cn/shaguazhu1213 KMPlayer控制播放速度的快捷方式 (2011-11-12 10:51:56) 标签: 杂谈 分类: 编程之旅 ...
- 剑指offer--42.孩子们的游戏(圆圈中最后剩下的数)
约瑟夫环,用链表,队列,总之模拟过程 ----------------------------------------------------------------- 时间限制:1秒 空间限制:32 ...
- L170 Autism Linked to Zinc Deficiency in Childhood
While the exact cause of autism is unknown, its development in children has been linked to various g ...
- Express 开发与部署最佳实践 -- 待续
链接 nginx 代理缓存 压缩 等 全部采用异步 使用try catch 处理同步异常 promise 处理异步 异常, 而不是使用 domains 或者 uncaughtExceptio ...
- Gcov 详解 + 内核函数覆盖率测试方法详述及产生错误解决办法
http://blog.csdn.net/wangyezi19930928/article/details/42638345 http://www.uml.org.cn/Test/201208311. ...