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 ...
随机推荐
- respond.js第六行 SCRIPT5: 拒绝访问。跨域问题
问题描述:respond.js第六行 SCRIPT5: 拒绝访问.昨天为学弟学妹讲bootstrap,说到对ie78的兼容问题,解决办法中有引入html5shiv.js和respond.js两个文件夹 ...
- 修改element内部样式的两种方式
第一种: 全局样式修改: 但这种方式有点不好的地方,这样会影响别的组件,比如修改elementUI的树结构的样式,这样改的话会影响到别的树组件: 第二种方式: 在要修改的组件内修改树结构样式 比如改这 ...
- hibernate框架环境搭建与使用
搭建环境 一.新建一个项目 , 导包 一个是hibernate的jar包,一个是jdbc的jar包 hibernate的jar包 这些jar包全部导入 二.配置Hibernate. 1.建立hib ...
- spring import jar中的bean配置文件
在spring中import resource file,有两种情况:classes目录和jar包 如果资源文件在classes目录: <import resource="classp ...
- hihocoder-1483区间价值 (二分+尺取法)
题目链接: 区间价值 给定n个数A1...An,小Ho想了解AL..AR中有多少对元素值相同.小Ho把这个数目定义为区间[L,R]的价值,用v[L,R]表示. 例如1 1 1 2 2这五个数所组成的区 ...
- 3.了解linux系统以及搭建学习环境
目录: 1.linux的前世今生. 2.企业如何选择linux系统? 3.如何在虚拟机上安装linux系统?搭建学习环境. 1.linux的前世今生. 1).起源:先是贝尔实验室的Unix系统,因为各 ...
- 《DSP using MATLAB》示例Example7.21
代码: h = [1, 2, 3, 4, 3, 2, 1]/15; M = length(h); n = 0:M-1; [Hr, w, a, L] = Hr_Type1(h); a L amax = ...
- iTunes文件共享
在Info.plist文件中添加UIFileSharingEnabled键,并将键值设置为YES.将您希望共享的文件放在应用程序的Documents目录.
- block的基本使用
block用来保存一段代码 block的标志:^ block跟函数很像: 1. 可以保存代码 2. 有返回值 3. 有形参 4. 调用方式一样 定义bolock变量 例1: void (^myBloc ...
- CentOS虚拟机中安装VMWare Tools
1.单击VMWare的[虚拟机]菜单,选择[安装VMWare Tools]命令 2.接着CentOS系统会自动挂载VMWare Tools,并自动打开,如果没有打开可以自己去图形界面打开VMWare ...