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.没有设置高,高由内容撑开 设置了宽高 一定采用设置的 ...
随机推荐
- Kafka消费者 从Kafka中读取数据并写入文件
Kafka消费者 从Kafka中读取数据 最近有需求要从kafak上消费读取实时数据,并将数据中的key输出到文件中,用于发布端的原始点进行比对,以此来确定是否传输过程中有遗漏数据. 不废话,直接上代 ...
- Spring MVC（2）Spring MVC 组件开发
一.控制器接收各类请求参数 代码测试环境: 接收各类参数的控制器--ParamsController package com.ssm.chapter15.controller; @Controller ...
- 写出float x 与“零值”比较的if语句——一道面试题分析
写出float x 与“零值”比较的if语句 请写出 float x 与“零值”比较的 if 语句: const float EPSINON = 0.00001; if ((x >= - E ...
- SQLAlchemy的基础使用
一.ORM 与 SQLAlchemy 简介 ORM 全称 Object Relational Mapping, 翻译过来叫对象关系映射.简单的说,ORM 将数据库中的表与面向对象语言中的类建立了一种对 ...
- 网络安全-主动信息收集篇第二章-三层网络发现之nmap和fping和Hping
nmap IP -sn nmap当目标IP在同一网段时,nmap会发送ARP包,当目标IP不在同一网段时nmap会发送ICMP的包. fping IP fping -g 参数支持对IP地址起始和结 ...
- noip模拟9 达哥随单题
T1.随 看题第一眼,就瞄到最下面 孙金宁教你学数学 ?????原根?目测神题,果断跳过. 最后打了个快速幂,愉快的收到了达哥送来的10分. 实际上这题暴力不难想,看到一个非常小的mod应该就能想到 ...
- linux下的压缩解压命令
.gz解压1:gunzip FileName.gz解压2:gzip -d FileName.gz压缩:gzip FileName .tar.gz 和 .tgz解压:tar zxvf FileName. ...
- php查询字符串的函数
/* 查找一个字符串在另一个字符串的第一次出现,并返回其余部分(strstr别名) */ var_dump(strchr("hello world hello", "wo ...
- linux破解密码
1.关机2.按e进入grub 3.在linux16行末尾输入 rd.break console=tty1 4.按ctrl+“X”执行. 5.输入 mount -o remount,rw /sys ...
- 比较器中的comparing方法以及涉及到的知识
今天在学习Java核心技术集合程序清单9-3时遇到了问题. 代码如下 public class TreeSetTest { public static void main(String[] args) ...