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 第二:当页 ...
随机推荐
- Python打包分发工具setuptools简介（转）
作为Python标准的打包及分发工具,setuptools可以说相当地简单易用.它会随着Python一起安装在你的机器上.你只需写一个简短的setup.py安装文件,就可以将你的Python应用打包. ...
- 河南省多校联盟二-C
1281: 邪能炸弹 时间限制: 1 秒 内存限制: 128 MB提交: 222 解决: 80 题目描述 正在入侵艾泽拉斯的古尔丹偶然间得到了一颗邪能炸弹,经过研究,他发现这是一颗威力极其巨大且难 ...
- iptables详解（14）：iptables小结之常用套路
不知不觉,已经总结了13篇iptables文章,这些文章中有一些需要注意的地方. 此处,我们对前文中的一些注意点进行总结,我们可以理解为对"常用套路"的总结. 记住这些套路,能让我 ...
- inotify的搭建，
在安装inotify之前我们要先安装云yum源 然后安装inotify的工具 命令 yum -y install inotify-tools 安装了以后会有两个命令: inotifywait:在被监控 ...
- nfs的简单搭建与原理
nfs最大的缺点是单点,只能一对一nfs统称存储服务器,放视频图片之类的东西,所以服务器的容量很大数字都是放在数据库里边的, nfs的挂载原理 客户端怎么知道服务端的开启端口? 找rpcbind,再启 ...
- (转)Android学习笔记②——HelloWorld的创建已经基本知识
开发第一应用 可以开发属于自己的应用,是否有点小激动?好吧!让我们开始,首先点击Start a new Android Studio Project创建工程:接下来需要输入应用名称(第一个字母要大写) ...
- for循环打印等腰三角形、直角三角形、菱形
一.等腰三角形 package s1; import java.util.Scanner; public class C31 { public static void main(String[] ar ...
- JVM的理解
1.Java程序是交由JVM执行的,所以我们在谈Java内存区域划分的时候事实上是指JVM内存区域划分.在讨论JVM内存区域划分之前,先来看一下Java程序具体执行的过程: 也相当与 注:JVM(ja ...
- Java API操作ZK node
创建会话 建立简单连接 /** * 测试创建Zk会话 * Created by liuhuichao on 2017/7/25. */ public class ZooKeeper_Construct ...
- paddlepaddle初步印象
从其官网整理了一些资料如下: 1.基本概念 基本使用概念 PaddlePaddle是源于百度的一个深度学习平台.PaddlePaddle为深度学习研究人员提供了丰富的API,可以轻松地完成神经网络配置 ...