03-CSS中的选择器
高级选择器分为：
后代选择器
子代选择器
并集选择器
交集选择器
后代选择器
使用空格表示后代选择器 , 顾名思义 父元素的后代(包括儿子,孙子,重孙子)
中间空格隔开 是后代
.container p{
color: red;
}
.container .item p{
color: yellow;
}
格式 :
子代选择器
使用> 表示子代选择器 , 比如 div>p , 仅仅表示的是当前 div 元素选中的子代(不包含孙子.....) 元素p.
.container>p{
color: yellowgreen;
}
格式:
并集选择器
多个选择器之间使用逗号隔开, 表示选中的页面中的多个标签. 一些共性的元素, 可以使用并集选择器
/*并集选择器*/
h3,a{
color: #;
text-decoration: none; }
格式:
比如想百度首页使用并集选择器.
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {
margin: ;
padding:
}
/*使用此并集选择器选中页面中所有的标签，页面布局的时候会使用*/
例子
交集选择器
使用 .表示交集选择器. 第一个标签必须是标签选择器 , 第二个标签必须是类选择器
语法: div.active 比如有一个<h4 class= "active"></h4> 这样的标签
那么
h4{
width: 100px;
font-size: 14px;
}
.active{
color: red;
text-decoration: underline;
}
/* 交集选择器 */
h4.active{
background: #00BFFF;
}
例如:
他表示两者选中之后元素共有的特性
属性选择器 *****
属性选择器, 字面意思就是根据标签中的属性 , 选中当前的标签
语法:
/*根据属性查找*/
2 /*[for]{
3 color: red;
4 }*/
5
6 /*找到for属性的等于username的元素 字体颜色设为红色*/
7 /*[for='username']{
8 color: yellow;
9 }*/
10
11 /*以....开头 ^*/
12 /*[for^='user']{
13 color: #008000;
14 }*/
15
16 /*以....结尾 $*/
17 /*[for$='vvip']{
18 color: red;
19 }*/
20
21 /*包含某元素的标签*/
22 /*[for*="vip"]{
23 color: #00BFFF;
24 }*/
25
26 /**/
27
28 /*指定单词的属性*/
29 label[for~='user1']{
30 color: red;
31 }
32
33 input[type='text']{
34 background: red;
35 }
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*举例*/
form input[type='text']{
background-color: red;
}
form input[type='password']{
background-color: yellow;
}
form #user{
background-color: green;
}
</style>
</head>
<body>
/*示例*/
<form action="">
<input type="text" id="user">
<input type="password">
</form>
</body>
</html>
伪类选择器
伪类选择器一般会用在超链接a标签中 , 使用a标签的伪类选择器, 我们一定要遵循 " 爱恨准则" LoVe HAte
1 /*没有被访问的a标签的样式 link */
2 .box ul li.item1 a:link{
3
4 color: #666;
5 }
6 /*访问过后的a标签的样式 visited */
7 .box ul li.item2 a:visited{
8
9 color: yellow;
10 }
11 /*鼠标悬停时a标签的样式 hover */
12 .box ul li.item3 a:hover{
13
14 color: green;
15 }
16 /*鼠标摁住的时候a标签的样式 active */
17 .box ul li.item4 a:active{
18
19 color: yellowgreen;
20 }
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;
}
介绍
伪元素选择器
/*设置第一个首字母的样式*/
p:first-letter{
color: red;
font-size: 30px; } /* 在....之前 添加内容 这个属性使用不是很频繁 了解 使用此伪元素选择器一定要结合content属性*/
p:before{
content:'alex';
} /*在....之后 添加内容，使用非常频繁 通常与咱们后面要讲到布局 有很大的关联（清除浮动）*/
p:after{
content:'&';
color: red;
font-size: 40px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p:first-letter{
color: red;
font-size: 26px;
}
/*用伪元素 属性一定是content*/ /*伪元素选择器与后面的布局有很大关系*/
p:before{
content: '$'
}
p:after{
content: '.'
}
.box2{ /*需求：这个盒子一定是块级标签 span==>块 并且不再页面中占位置。未来与布局有很大关系 */ /*隐藏元素 不占位置*/
/*display: none;*/
display: block; /*display: none;*/
/*隐藏元素 占位置*/
visibility: hidden;
height: 0; } </style>
</head>
<body>
<p class="box">
<span>alex</span>
</p> <span class="box2">alex</span>
<div>wusir</div> </body>
</html>
例子:
03-CSS中的选择器的更多相关文章
- CSS中的选择器之类选择器和id选择器
1.css中的选择器: 1.类选择器,又叫class选择器 2.id选择器 3.html元素选择器(又叫标签选择器) 4.通配符选择器 5.伪类选择器 6.组合选择器(多元素选择器,子元素选择器,后代 ...
- css中:not()选择器和jQuery中.not()方法
因为老是将这两个的not方法弄混,所以写一下备忘. css中:not()选择器用法 :not 伪类选择器可以筛选不符合表达式的元素,:not(selector) 其中的selector为css选择器 ...
- CSS中的选择器(笔记)
1.通配符选择器(*):通配符选择器是用来选择所有元素,也可以选择某个元素下的所有元素.所有浏览器都支持通配符选择器. ;;} .dome *{padding: 2px;} 2.元素选择器(Ele): ...
- css中的选择器
选择器 说明 * 通用元素选择器,匹配任何元素 E 标签选择器,匹配所有使用E标签(所有HTML元素)的元 ...
- CSS中的选择器（一）
API文档:http://css.cuishifeng.cn/all.html 1. 通配选择符(*) 语法: * { sRules } 说明: 通常不建议使用通配选择符,因为它会遍历并命中文档中所有 ...
- 19 01 03 css 中 reset 模块 设置
主要就是让到时候 打入代码时候 把一些bug去除 或者 让一些固有的格式取消 /* 将标签默认的间距设为0 */ body,p,h1,h2,h3,h4,h5,h6,ul,dl,dt,form,i ...
- CSS中选择器优先级与!important权重使用
CSS中的选择器优先级与!important权重使用 .class选择器要高于标签选择器. #id选择器要高于.class选择器. 标签选择器是优先级最低的选择器. !important的属性它的权重 ...
- css3笔记系列-3.css中的各种选择器详解，不看后悔系列
点击上方蓝色字体,关注我 最详细的css3选择器解析 选择器是什么? 比较官方的解释:在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素. 最常见的 CSS 选择器是元素选择器.换句话说 ...
- css中的继承、层叠、样式优先级机制
一.继承与层叠:
- HTML5中class选择器属性的解释
设置有class属性值的元素,可以被css中的选择器调用,也可以在javascript中以getElementsByClassName()方法调用. 可以给各个元素添加class而且名称可以相同与id ...
随机推荐
- 关于微软C#中的CHART图表控件的简单使用
最近公司项目要用到Chart图表控件,这是一个比较老的东西了,目前网络上似乎已经不太流行这个控件,但是只要配置了相关的属性,效果还是可以的.前前后后摸索了好久,接下来谈谈这个件控件最重要的几个属性. ...
- git clone 时显示Filename too long的解决办法
在git bash中,运行下列命令: git config --global core.longpaths true 就可以解决该问题. --global是该参数的使用范围,如果只想对本版本库设置该参 ...
- About toupper()
// toupper.c #include <stdio.h> #include <string.h> #include <ctype.h> int main() ...
- 你所不知道的，Java 中操作符的秘密？
在 Java 编程的过程中,我们对数据的处理,都是通过操作符来实现的.例如,用于赋值的赋值操作符.用于运算的运算操作符等.用于比较的比较操作符,还包括逻辑操作符.按位操作符.移位操作符.三元操作符等等 ...
- mysql 视图，触发器，存储
一.视图 概念:其实就是一个临时表. 视图是一个虚拟表(非真实存在的),其本质是[根据SQL语句获取动态的数据库,并为其命名],用户使用时只需使用[名称]即可获取结果集.就可以当做表来使用. # 1. ...
- （四）js数组方法一
ES5数组方法: Array.prototype.filter() 对数组元素进行过滤 三个参数:元素值,下标,原数组 返回:过滤后符合条件的数组,不会改变原数组 let arr = [2,4,6 ...
- mybatis参数
分是不是用@Param注解的这两种情况, 1,使用@Param注解,就不用理parameterType xml文档直接用 字符串的值,若是一个类,class.property 2, 不使用@Param ...
- hive字段原理--有删除一列想到的
hive删除一张表的字段不会动数据文件,只是修改了一下metadata表里面的表定义:所以会出现一种情况:就是这张表如果之前数据是满的(个格列都有数据),那么被删除的那列后数据都往前窜了一个,最后一个 ...
- JVM知识整理和学习（转载并修改）
JVM是虚拟机,也是一种规范,他遵循着冯·诺依曼体系结构的设计原理. 冯·诺依曼体系结构中,指出计算机处理的数据和指令都是二进制数,采用存储程序方式不加区分的存储在同一个存储器里,并且顺序执行,指令由 ...
- 学习HTML5之路
Web 技术大致的时间轴 1991 HTML 1994 HTML 2 1996 CSS 1+JavaScript 1997HTML 4 1998 CSS2 2000 XHTML 1 2002 使用DI ...