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 ...
随机推荐
- day5-hashlib模块
一.概述 在程序开发过程中,很多时候会涉及用户信息验证环节,这类场景下我们往往需要对字符串进行加密处理.python中也有专门的加密模块,它就是hashlib.下面章节将详述它的常见用法. 二.常见加 ...
- 25-THREE.JS 绘制线框样式几何图形的材质 线材质
<!DOCTYPE html> <html> <head> <title></title> <script src="htt ...
- 016对象——__set __get get_class_methods get_class_vars
<?php /** */ //http://phpbasic.com/004object/16.php?type=admin /*session_start(); $_SESSION['utyp ...
- 【Wannafly挑战赛9-B】数一数
链接:https://www.nowcoder.net/acm/contest/71/B 题目就不贴了.. 设res[i]为第i行的最终结果,可以想到,res[i]为0或不为0.长度不是最短的字符串r ...
- js获取一周的日期范围
function getWeek() { this.nowTime = new Date(); this.init = function() { this.dayInWeek = this.nowTi ...
- Codeforces Round #394 (Div. 2) E. Dasha and Puzzle
E. Dasha and Puzzle time limit per test:2 seconds memory limit per test:256 megabytes input:standard ...
- LeetCode OJ：Spiral MatrixII（螺旋矩阵II）
Given an integer n, generate a square matrix filled with elements from 1 to n2 in spiral order. For ...
- javascript: what can javascript do?
1.Javascript can change html content <!DOCTYPE html> <html> <body> <h2>What ...
- Flask的请求与响应
Flask的请求与响应 1 请求相关信息 request.method # 请求方法 request.args # get 请求的参数 request.form # post请求的参数 request ...
- 修改maven仓库位置
在eclipse中安装好maven2的插件后: 第一步: 默认会放在~/.m2/repository目录下 (“~”代表用户的目录,比如windows7下一般都是C:\Users\zz\.m2\rep ...