day042 前端CSS选择器
今日内容:
高级选择器
1.子类选择器
用 > 表示
类比于相对路径
选择的是前一级标签的子标签
2后代选择器
用空格表示
选择的是前一级标签的后代标签
3并集选择器
用,逗号表示
选择的是用逗号连接的标签
4交集选择器
用标签名字作为开头 ,后面跟id或者是类选择器(注意,没有空格)
5.通用选择器
*选择所有的标签(使用场景一般是删除所有的空格)
6.属性选择器
[属性名] 带这个属性的标签
[属性名=’’需要匹配的属性值’’ ] 带有属性,属性名符合匹配的要求
[属性名^=’xxxx’] 匹配以xxx开头的字符串
[属性名$=’xxxx’] 匹配以xxx结尾的字符串
[属性名*=’xxx’] 匹配属性值包含的字符串
7.伪装选择器
简称: a :LoVe HAte 爱恨
Link 未被访问的链接
Visited 访问过的链接
Hover 鼠标悬停的样式
Active 鼠标按下时的样式
选择标签
选择第一个孩子标签:
:first-child
选择最后一个孩子标签
:last-child
选择指定的孩子标签:
:nth-child(n) 选择第N个孩子
选择指定的字符:
P : first-letter : 选择第一个字符
P : before 在标签的最前面添加一个标签内容
P : after 在标签的最后面添加一个标签内容
8.继承性
子标签可以继承父标签的样式:
Color
Font- ,
Text-
Line-
9.层叠性
(选择器权重相同的时候) 后面添加的样式会覆盖全面的样式
10.权重
类比id标签 100 ,类标签 10, 普通标签 1 谁的分高谁的权重大
Id 100
类 10
普通标签 1
!important 权重无限大
如果都有!important的时候,比较权重的大小
day042 前端CSS选择器的更多相关文章
- 前端——CSS选择器
目录 前端CSS CSS三种引入方式 CSS标签选择器 基本选择器 1.元素选择器 2.类选择器 3.id选择器 4.通用选择器 组合选择器 1.后代选择器 空格 2.儿子选择器 > 3.毗邻选 ...
- 前端----css 选择器
css 为了修饰页面作用, 让页面好看 ⑴ css的引入方式1,行内样式body里面2,内接样式在html里面的 style 里面3,外接样式两种:①链接式: <link rel=" ...
- web前端----css选择器样式
一.css概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,对html标签的渲染和布局 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如 二.c ...
- 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
- {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性 定位(position)z-index
前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...
- 前端css样式及选择器
标题: 1.scc概述 2.行内样式 3.内接样式 4.外接样式(链接式) 推荐使用 5.外接样式(导入式) 6.嵌套规则 7.css选择器 1.scc(Cascading Style Shee ...
- 前端03 /css简绍/css选择器
前端03 /css简绍/css选择器 目录 前端03 /css简绍/css选择器 昨日内容回顾 html标签 常用标签 table标签:表格标签 input标签 select下拉框 textarea多 ...
- 前端学习(十):CSS选择器
进击のpython ***** 前端学习--CSS选择器 每一条CSS样式声明由两部分组成: 选择器{ 样式: } 在CSS中{}之前的部分就是"选择器","选择器&qu ...
- 前端知识之CSS(1)-css语法、css选择器(属性、伪类、伪元素、分组与嵌套)、css组合器
目录 前端基础之css 1.关于css的介绍 2.css语法 3.三种编写CSS的方式 3.1.style内部直接编写css代码 3.2.link标签引入外部css文件 3.3.标签内直接书写 4.c ...
随机推荐
- MYSQL常用函数(聚合函数(常用于GROUP BY从句的SELECT查询中))
AVG(col)返回指定列的平均值 COUNT(col)返回指定列中非NULL值的个数 MIN(col)返回指定列的最小值 MAX(col)返回指定列的最大值 SUM(col)返回指定列的所有值之和 ...
- Ubuntu 16 , 从时间服务器更新时间
因为在公司的内网,所以不能用Ubuntu默认的服务器去更新时间. 只能改成从网关 10.182.202.2 上取时间 1) 如果没有安装ntp 的话,先安装 apt-get install ntp 2 ...
- spring cloud: 关闭ribbon负载均衡
spring cloud: 关闭ribbon负载均衡 1.eureka服务 2.2个user服务:7900/7901 3,movie服务 movie服务去请求 user的用户信息,而此时只想请求790 ...
- 尝试重新(多次反复)处理某个逻辑的示例(good)
以下例程的优点: 1.可以重新尝试某个动作 2.另外,在重新尝试的同时,可以做一些逻辑判断及标记的初始化 public static bool RetryLogin() { ...
- mongodb shell和Node.js driver使用基础
开始: Mongo Shell 安装后,输入mongo进入控制台: //所有帮助 > help //数据库的方法 > db.help() > db.stats() //当前数据库的状 ...
- sgu 169 Numbers
题意:n和n+1同时被数位乘积整除的k位数个数. 假如a是237,b是238.由于个位以前的数一样.那么对于2,如果a%2==0,b%2就!=0,如果a%3==0,b%3就!=0.因此个位以前的数只能 ...
- hadoop 企业应用案例--大众点评
hadoop 企业应用案例--大众点评 http://f.dataguru.cn/thread-260531-1-1.html
- Numpy常用API
目录 一.输入和输出 1.1 NumPy二进制文件(NPY,NPZ) 1.2 文本文件 1.3 正则表达式解析 1.4 原始二进制文件 1.5 内存映射文件 1.6 Base-n相关 1.7 数据源 ...
- 漏洞复现——apache文件解析漏洞
漏洞描述: 我们可以上传一个文件名末尾包含换行符的文件,以此绕过它的黑名单 影响版本: apache 2.4.0-2.4.29 漏洞分析: <FilesMath "\.(?i:php| ...
- python-day73--django-分页
''' 批量导入数据:bulk_create Booklist=[] for i in range(100): Booklist.append(Book(title="book"+ ...