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 第二:当页 ...
随机推荐
- numpy.random之常用函数
在实际开发中,我们经常会使用随机函数,比如交叉验证,构造测试数据等.下面,是我常用的几个生成随机样本的函数: 1,rand(n1,n2,…,nn) 每一维度都是[0.0,1.0)半闭半开区间上的随机分 ...
- 上传组件UploadiFive（H5版本）
初始化 $('#file_upload').uploadifive({ 'auto' : false, 'buttonClass':'btn', 'buttonText':'选择视频', 'fileS ...
- day7-python类反射
一.概述 一般的高阶语言都有反射的功能特性,python也不例外,网上资料显示,python支持类反射和模块反射,今天就先学习一下类反射的相关知识,模块反射后续再展开把.Python的类反射用于把字符 ...
- ckeditor5富文本编辑器在vue中的使用
安装依赖: npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic 要创建编辑器实例,必须首先将编辑器 ...
- USB events thread - failed to set priority
ubuntu + openni + nite,出现 Warning:USB events thread - failed to set priority xn::ImageGenerator imag ...
- HTML条件注释判断浏览器版本命令
<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--> <!--[if IE]> 所有的IE可识别 <![ ...
- eclipse背景设置什么颜色缓解眼睛疲劳之一
Eclipse操作界面默认颜色为白色.对于我们长期使用电脑编程的人来说,白色很刺激我们的眼睛,如果把颜色改成绿色的颜色就会缓解眼睛的疲劳. 设置方法如下: 1.打开window->Prefere ...
- redis的String类型以及其操作
Redis的数据类型 String类型以及操作 String是最简单的数据类型,一个key对应一个Value,String类型是二进制安全的.Redis的String可以包含任何数据,比如jpg图片或 ...
- cursor游标（mysql）
/* 游标 cursor 什么是游标?为什么需要游标 使用存储过程对sql进行编程的时候,我们查询的语句可能是数据是多个,它总是一口气全部执行,我们无法针对每一条进行判断.也就是说,我们无法控制程序的 ...
- java中+=详解 a+=b和a=a+b的区别
short a=10; a+=4; System.out.println(a); 1.第一段代码的输出结果为14.执行流程是首先声明变量,判断赋给变量的初始值是否在short类型范围内,如果在则进行强 ...