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 ...
随机推荐
- docker的应用
[root@yz6205 ~]# docker imagesINFO[0063] GET /v1.19/images/json REPOSITORY TAG IMAGE ID CREATED VIRT ...
- Django rest_framewok框架的基本组件
快速实例 序列化 视图三部曲 认证与权限组件 解析器 分页 回到顶部 快速实例 Quickstart 回到顶部 序列化 创建一个序列化类 简单使用 开发我们的Web API的第一件事是为我们的Web ...
- 详解scrapy
>> (1) 基本概念 >> (2) 爬虫与反爬 >> (3) 基本概念 >> (4) 基本概念
- 原生JavaScript获取css样式
访问属性:obj.attr 或者 obj['attr'] 通过js访问style属性 : document.getElementById("main").style.backgro ...
- 如何限制mongodb数据库内存占用量方法
多实例下: 可以通过绑定cpu,来防止多实例相互干扰. mongodb的内存也可以限制主,防止全部内存都被一个实例占据. ulimit -s 4096 && ulimit -m 314 ...
- c++ 基础知识 0001 const 知识2
1.const修饰函数返回值 (1)指针传递 如果返回const data,non-const pointer,返回值也必须赋给const data,non-const pointer.因为指针指向的 ...
- DotNet Core Console 程序使用NLog
参考:https://github.com/NLog/NLog/wiki/Tutorial 步骤: 1. 使用Nuget安装NLog.Extensions.Logging Install-Packag ...
- HDU - 4333 ：Revolving Digits （扩展KMP经典题，问旋转后有多少个不同的数字小于它本身，等于它本身，大于它本身。）
One day Silence is interested in revolving the digits of a positive integer. In the revolving operat ...
- Python之operator库
operator库常用方法 Function Syntax add(a+b) a + b concat(seq1,seq2) seq1 + seq2 contains(seq, obj) obj in ...
- 什么是 DDoS 攻击？
欢迎访问网易云社区,了解更多网易技术产品运营经验. 全称Distributed Denial of Service,中文意思为“分布式拒绝服务”,就是利用大量合法的分布式服务器对目标发送请求,从而导致 ...