今日内容:

高级选择器

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选择器的更多相关文章

  1. 前端——CSS选择器

    目录 前端CSS CSS三种引入方式 CSS标签选择器 基本选择器 1.元素选择器 2.类选择器 3.id选择器 4.通用选择器 组合选择器 1.后代选择器 空格 2.儿子选择器 > 3.毗邻选 ...

  2. 前端----css 选择器

      css 为了修饰页面作用, 让页面好看 ⑴ css的引入方式1,行内样式body里面2,内接样式在html里面的 style 里面3,外接样式两种:①链接式: <link rel=" ...

  3. web前端----css选择器样式

    一.css概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,对html标签的渲染和布局 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如 二.c ...

  4. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  5. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性  定位(position)z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  6. 前端css样式及选择器

    标题: 1.scc概述 2.行内样式 3.内接样式 4.外接样式(链接式)    推荐使用 5.外接样式(导入式) 6.嵌套规则 7.css选择器 1.scc(Cascading Style Shee ...

  7. 前端03 /css简绍/css选择器

    前端03 /css简绍/css选择器 目录 前端03 /css简绍/css选择器 昨日内容回顾 html标签 常用标签 table标签:表格标签 input标签 select下拉框 textarea多 ...

  8. 前端学习(十):CSS选择器

    进击のpython ***** 前端学习--CSS选择器 每一条CSS样式声明由两部分组成: 选择器{ 样式: } 在CSS中{}之前的部分就是"选择器","选择器&qu ...

  9. 前端知识之CSS(1)-css语法、css选择器(属性、伪类、伪元素、分组与嵌套)、css组合器

    目录 前端基础之css 1.关于css的介绍 2.css语法 3.三种编写CSS的方式 3.1.style内部直接编写css代码 3.2.link标签引入外部css文件 3.3.标签内直接书写 4.c ...

随机推荐

  1. MYSQL常用函数(聚合函数(常用于GROUP BY从句的SELECT查询中))

    AVG(col)返回指定列的平均值 COUNT(col)返回指定列中非NULL值的个数 MIN(col)返回指定列的最小值 MAX(col)返回指定列的最大值 SUM(col)返回指定列的所有值之和 ...

  2. Ubuntu 16 , 从时间服务器更新时间

    因为在公司的内网,所以不能用Ubuntu默认的服务器去更新时间. 只能改成从网关 10.182.202.2 上取时间 1) 如果没有安装ntp 的话,先安装 apt-get install ntp 2 ...

  3. spring cloud: 关闭ribbon负载均衡

    spring cloud: 关闭ribbon负载均衡 1.eureka服务 2.2个user服务:7900/7901 3,movie服务 movie服务去请求 user的用户信息,而此时只想请求790 ...

  4. 尝试重新(多次反复)处理某个逻辑的示例(good)

    以下例程的优点: 1.可以重新尝试某个动作 2.另外,在重新尝试的同时,可以做一些逻辑判断及标记的初始化 public static bool RetryLogin()        {        ...

  5. mongodb shell和Node.js driver使用基础

    开始: Mongo Shell 安装后,输入mongo进入控制台: //所有帮助 > help //数据库的方法 > db.help() > db.stats() //当前数据库的状 ...

  6. sgu 169 Numbers

    题意:n和n+1同时被数位乘积整除的k位数个数. 假如a是237,b是238.由于个位以前的数一样.那么对于2,如果a%2==0,b%2就!=0,如果a%3==0,b%3就!=0.因此个位以前的数只能 ...

  7. hadoop 企业应用案例--大众点评

    hadoop 企业应用案例--大众点评 http://f.dataguru.cn/thread-260531-1-1.html

  8. Numpy常用API

    目录 一.输入和输出 1.1 NumPy二进制文件(NPY,NPZ) 1.2 文本文件 1.3 正则表达式解析 1.4 原始二进制文件 1.5 内存映射文件 1.6 Base-n相关 1.7 数据源 ...

  9. 漏洞复现——apache文件解析漏洞

    漏洞描述: 我们可以上传一个文件名末尾包含换行符的文件,以此绕过它的黑名单 影响版本: apache 2.4.0-2.4.29 漏洞分析: <FilesMath "\.(?i:php| ...

  10. python-day73--django-分页

    ''' 批量导入数据:bulk_create Booklist=[] for i in range(100): Booklist.append(Book(title="book"+ ...