day 38 高级选择器
1.高级选择器
一.高级选择器
1-后代选择器 *****
儿子、孙子、重孙子
1. .father .wu{
color: red;
} 选择父类中特定的子类
2. .father p{ #后代中间用空格分开
color: red;
} 选择父类中所有的标签 2-子代选择器
只能是亲儿子（可能有继承关系）仅仅表示的是当前div元素选中的子代(不包含孙子....)元素p
div>p{
} 3-组合选择器
多个选择器组合到一起共同设置样式
div,p,a,li,span{
font-size: 14px;
} 4-交集选择器
第一个标签必须是标签选择器，第二个标签必须是类选择器
div中有active 才会被选中
div.active{
} 5-属性选择器
input[type='text'] 伪类选择器：LoVe HAte
a:link 没有被访问的
a:visited 访问过后的
a:hover 鼠标悬停的时候
a:active 摁住的时候 -伪元素选择器
p:before 在...的前面添加内容 一定要结合content
p:after 在...的后面添加内容 与后面的布局有很大关系
2.css的继承性和层叠性 （坑）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*.father p{ #后代中间用空格分开 选择父类中所有的标签
color: red;
}*/
.father .wu{ 选择父类中特定的子类
color: green;
} </style>
</head>
<body> <div class="father">
<p>alex</p>
<ul>
<li>
<p class="wu">wusir</p>
</li>
</ul>
</div> <p class="wu">日天</p> </body>
</html>
后代选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.father>p{
color: red;
}
.father>ul>li{ （属性继承）
width: 100px;
} .container{
color: red;
}
</style>
</head>
<body>
<div class="father"> <p>alex</p>
<p>alex</p>
<div class="content">
<p>wusir</p>
</div>
<ul>
<li>
alex2
<ul>
<p>defad </p>
<li>wusir</li>
</ul>
</li>
</ul>
</div> <div class="container">
<p>日天</p>
</div> </body>
</html>
子代选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
font-size: 12px; #由于继承关系，所有的都继承下来
} *{
padding: 0;
margin: 0;
} body,div,p,a,span{
padding: 0;
margin: 0;
} </style>
</head>
<body>
<div>
alex
</div>
<p>alex2</p>
<a href="#">日天</a>
<span>wusir</span> </body>
</html>
组合选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style> div{
color: red;
}
div.active{
color: green;
}
</style> </head>
<body>
<div class="active">alex</div>
<div>hahaha</div>
<p class="active">youyou</p>
</body>
</html>
交集选择器
<!DOCTYPE html>
<html lang="en">
<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>
属性选择器
/*根据属性查找*/
/*[for]{
color: red;
}*/ /*找到for属性的等于username的元素 字体颜色设为红色*/
/*[for='username']{
color: yellow;
}*/ /*以....开头 ^*/
/*[for^='user']{
color: #008000;
}*/ /*以....结尾 $*/
/*[for$='vvip']{
color: red;
}*/ /*包含某元素的标签*/
/*[for*="vip"]{
color: #00BFFF;
}*/ /**/ /*指定单词的属性*/
label[for~='user1']{
color: red;
} input[type='text']{
background: red;
}
属性选择器特殊(了解)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style> /*爱恨准则 LoVe HAte*/ a:link{
color: green; /*没有被访问的a标签的颜色*/
} a:visited{
color: yellow; /*访问过后的a标签的颜色*/
} a:hover{
color: red; /*鼠标悬停的时候a标签的颜色*/
} a:active{
color: blue; / 鼠标摁住的时候a标签的颜色
} span:hover{
color: red;
font-size: 24px;
text-decoration: underline;
} .child{
display: none; display（显示的意思）
} .father:hover .child{ #鼠标悬浮在父亲上，让它孩子显示
color: red;
display: block;
} </style>
</head>
<body>
<a href="#">百度一下</a> <span>alex</span> <div class="father">
wusir
<p class="child">alex</p>
</div> </body>
</html>
伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p:first-letter{ /*设置第一个首字母的样式*/
color: red;
font-size: 26px; #字体都是偶数
} /*伪元素选择器与后面的布局有很大关系*/
p:before{ /*用伪元素 属性一定是content*/
content: '$' /* 在....之前 添加内容
} p:after{
content: '.' /*在....之后 添加内容，使用非常频繁 通常与咱们后面要讲到布局 有很大的关联（清除浮动）*/
} /*需求：这个盒子一定是块级标签 span==>块 并且不再页面中占位置。未来与布局有很大关系 */
.box2{
/*display: none;*/ /*隐藏元素 不占位置*/
display: block; 强制把span转换成块 visibility: hidden; /*隐藏元素 占位置*/
height: 0; 设置高度为0，同样不占位置
} </style>
</head>
<body>
<p class="box">
<span>alex</span>
</p> <span class="box2">alex</span>
<div>wusir</div> </body>
</html>
伪元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*#p1{
font-size: 30px;
color: green;
}
#p2{
color: green;
text-decoration: underline;
}
#p3{
font-size: 30px;
text-decoration: underline;
}*/ .lg{
font-size: 30px;
}
.lv{
color: green;
}
.un{
text-decoration: underline;
} </style>
</head>
<body>
<!--
张孕康1 30px green
张孕康2 green text-decoration:underline;（下划线）
张孕康3 30px 下划线
-->
<!-- 公共类 -->
<p id="p1" class="lg lv">张孕康1</p>
<p id="p2" class="lv un">张孕康2</p>
<p id="p3" class="lg un">张孕康3</p> </body>
</html>
class 的使用
2.css的继承性和层叠性
1. 继承性： color、text-xxx、font-xxx、line-xxx的属性是可以继承下来。
盒模型的属性是不可以继承下来的
a标签有特殊情况，设置a标签的字体颜色 一定要选中a，不要使用继承性 2. 层叠性： 覆盖
（1）行内> id > class > 标签 **** 1000 > 100 > 10 > 1 （2）数数 数 id class 标签
（3）先选中标签，权重一样，以后设置为主
（3）继承来的属性 它的权重为0 ，与选中的标签没有可比性
（4）如果都是继承来的属性，保证就近原则
（5）都是继承来的属性，选择的标签一样近，再去数权重
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*.box p span{
color: red;
}*/
.box{
color: red; （这种a标签无法继承）
}
.box a{
color: yellow; （a标签直接继承）
}
.box p{
color: green;
font-size: 30px;
line-height: 30px;
text-align: right; （对齐方式）
background-color: red; （无法继承） }
span{
background-color: transparent; (默认属性是透明色)
}
</style>
</head>
<body> <div class="box">
日天
<a href="#">百度</a> （a标签不能继承）
<p>
wusir
<span>alex</span>
</p>
</div> </body>
</html>
继承性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style> /*css层叠性 权重 谁的权重大就会显示谁的样式*/ /*如何看权重 数数选择器 id class 标签*/ /*1 0 0*/
/*#box{
color: yellow;
}*/
/*0 1 0*/
.box{
color: green;
}
/*0 0 1*/
div{
color: red;
} /* id > 类 > 标签*/ </style>
</head>
<body>
<div class="box" id="box">猜猜我是什么颜色</div> </body>
</html>
层叠性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> </title>
<style>
/*继承来的属性 权重为0*/ /*如果是继承来的熟悉，就近原则，谁更深入谁厉害*/
/*#father1 .box2{
color: red;
} .box1{
color: green;
}*/ /*都是继承来的 ，都一样深*/ #father1 #father2 .box3{
color: red;
}
#father1 .box2 .box3{
color: green;
} </style>
</head>
<body>
<div class="box1" id="father1">
<ul class="box2" id="father2">
<li class="box3" id="father3">
<p class="box4" id="child">猜猜我的颜色</p>
</li>
</ul>
</div>
</body>
</html>
层叠性深入理解
1
day 38 高级选择器的更多相关文章
- JQuery_高级选择器
在很多特殊的元素上,比如父子关系的元素,兄弟关系的元素,特殊属性的元素等等. 在早期 CSS 的使用上,由于 IE6 等低版本浏览器不支持,所以这些高级选择器的使用也不具备普遍性,但随着 jQuery ...
- jquery学习（3）--高级选择器
自己手写的学习笔记.常规选择器: /****************学习--高级选择器(1)****************/---高级选择器:ie7+ 层次选择器: 后代选择器 ul li ...
- 清除系统默认样式，文本样式,高级选择器(权重),边界圆角，a标签的四大伪类，背景图片
清除系统默认样式 大多系统预定义标签,有默认样式,不满足实际开发需求,反倒影响布局通常清除系统样式,利于开发 body,h1-h6,p,table { margin:; } ul { margin:; ...
- day48 前端高级选择器优先级
复习 1. 基础选择器 标签选择器(div) | 类选择器(.div1) | id选择器(#div2) <div class="div1" id="div2&quo ...
- css高级选择器&盒模型
css高级选择器&盒模型 1.组合选择器 群组选择器 /* 每个选择器为可以为三种基础选择器的任意一个,用逗号隔开,控制多个*/ div,.div,#div{ color:red } 后代(子 ...
- Python-ccs高级选择器 盒模型
css高级选择器与盒模型 脱离文档流 ,其中就是产生了BFC 1.组合选择器 - 群组选择器 /* 每个选择器位可以位三种基础选择器的任意一个, 用逗号隔开, 控制多个 */ div, #div, . ...
- python 全栈开发，Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)
一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...
- python全栈开发day38-css三种引入方式、基础选择器、高级选择器、补充选择器
一.昨日内容回顾 div:分割整个网站,很多块 (1)排版标签 (2)块级标签 独占一行 可以设置高和宽,如果不设置宽高,默认是父盒子的宽 span: (1) 小区域 (2)文本标签 (3)在一行内显 ...
- 盒子总结,文本属性操作,reset操作,高级选择器,高级选择器优先级,边界圆角(了解),a标签的四大伪类,背景图片操作,背景图片之精灵图
盒子总结 ''' block: 设置宽高 1.没有设置宽,宽自适应父级的宽(子级的border+padding+width=父级的width) 2.没有设置高,高由内容撑开 设置了宽高 一定采用设置的 ...
随机推荐
- Python 依赖库管理哪家强？pipreqs、pigar、pip-tools、pipdeptree 任君挑选
在 Python 的项目中,如何管理所用的全部依赖库呢?最主流的做法是维护一份"requirements.txt",记录下依赖库的名字及其版本号. 那么,如何来生成这份文件呢?在上 ...
- Unity系统消息广播
# 1.前言Unity自带消息系统,如SendMessage等,此方法利用的反射,且会反射游戏物体上的所有组件,对性能不友好.而且由于参数为方法名称,所以如果使用代码混淆,则会无法调用 方法,且难以追 ...
- 三、进程和线程、协程在python中的使用
三.进程和线程.协程在python中的使用 1.多进程一般使用multiprocessing库,来利用多核CPU,主要是用在CPU密集型的程序上,当然生产者消费者这种也可以使用.多进程的优势就是一个子 ...
- 第三篇 Flask中的request
每个框架中都有处理请求的机制(request),但是每个框架的处理方式和机制是不同的,下面我们来了解一下Flask的request中都有什么东西 from flask import request 1 ...
- Mycat分布式数据库架构解决方案--Linux安装运行Mycat
echo编辑整理,欢迎转载,转载请声明文章来源.欢迎添加echo微信(微信号:t2421499075)交流学习. 百战不败,依不自称常胜,百败不颓,依能奋力前行.--这才是真正的堪称强大!!! Myc ...
- idea 2019 1 spring boot 启动报错 An incompatible version [1.2.12] of the APR based Apache Tomcat Native library is installed, while Tomcat requires version [1.2.14]
1.构建一个简单springboot工程,日志打印报错内容如下: 15:38:28.673 [main] DEBUG org.springframework.boot.devtools.setting ...
- [考试反思]0813NOIP模拟测试20
咕了两天,补一下. 4个AK的,210是第10,190的第15并列一大排,我个傻子160排第29. 历史新低,但是心态还好. 真是没想到会一天考两场.中午没回去睡觉晚上考试... 困倒是其次,关键还是 ...
- 建设城市(city)：组合数，容斥原理
想模一大堆人呢.考场上AC的大仙. 估计没人想给这题好好写一个题解吧,因为它的确挺简单的... 但是它对我来说一点都不简单啊!!! 至少出题人用脚写题解的时候肯定认为这道题是送分题了 容斥,枚举至少有 ...
- NOIP模拟 13
我终于又厚颜无耻地赖着没走 ...... T1 矩阵游戏 用了30hmin找规律,然后发现貌似具有交换律,然后发现貌似有通项公式,然后发现貌似每次操作对通项的影响是相同的,然后发现貌似跟N没啥关系.. ...
- NOI导刊总结
NOI导刊总结 前两天去郑州,参加了什么NOI导刊的培训,然后就发现大佬是真的多,还十分意外的发现了一个事,清华北大是不是发笔记本和耳机,为啥三个老师的都一模一样... 这几天主要以讲.NOIP知识点 ...