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 第二:当页 ...
随机推荐
- javascript的几种使用多行字符串的方式
JS里并没有标准的多行字符串的表示方法,但是在用模板的时候,为了保证模板的可阅读性,我们又不可避免的使用多行字符串,所以出现了各种搞法,这里以一段jade的模板作为示例,简单总结和对比一下. 字符串相 ...
- 设计模式--责任链模式C++实现
责任链模式C++实现 1定义 使多个对象都有机会处理请求,从而避免了请求的发送者和接受者之间的耦合关系.将这些对象链成一条链,并沿着这条链传递该请求/命令,直到有对象处理它为止 注:这里的请求.命令正 ...
- Linux命令详解-cal
cal命令可以用来显示公历(阳历)日历.公历是现在国际通用的历法,又称格列历,通称阳历."阳历"又名"太阳历",系以地球绕行太阳一周为一年,为西方各国所通用,故 ...
- OpenGL全景视频
全景视频其实在实现上和一般的视频播放基本差不多,解码可以用ffmpeg,只是对解码后的图片在绘制的时候要绘制在一个球上(我这里是球,好像有说有的格式要绘制在四面体上的,美做深入研究),而不是画在一个表 ...
- 内网 LAN IPv6 环境配置 H3C S5500 Huawei S5700
# 使能IPv6报文转发功能. <Sysname> system-view [Sysname] ipv6 # 使能DHCPv6服务器功能. <Sysname> system-v ...
- 弄懂flex布局
目前在不考虑IE以及低端安卓机(4.3-)的兼容下,已经可以放心使用flex进行布局了.什么是flex布局以及它的好处,这里就不再赘述. 在这篇文章里,想说说flex布局的属性语法及其细节.那么网上也 ...
- Java复习8.多线程
Java复习8 多线程知识 20131007 前言: 在Java中本身就是支持多线程程序的,而不是像C++那样,对于多线程的程序,需要调用操作系统的API 接口去实现多线程的程序,而Java是支持多线 ...
- 自己定义的Excetpion继承哪个异常有什么讲究？[待解答]
try catch的地方需要用到一个自定义的DBException,如下: 于是我就自定义了一个DBException,继承Excetpion,以父类Exception构造器创建构造器: DBExce ...
- Mac工具整理
记录一下这两年来使用Mac的一些很好的工具: 1.offic,mac的office还是很强大的,比openoffice要好很多,更比WPS要好. 2.Toad连接数据库用的,一般用来连接Oracle. ...
- ISO 18000-6c 访问标签--应用程序访问操作ISO 18000-6C标签的方法
标签访问操作包含三部分: 1.标签选择.某些场景,应用程序只对特定的标签进行操作,Indy Host Library可以指定标签选择条件. 2.执行盘存操作.上报单化后标签EPC区的数据. 3.标签单 ...