今日内容:

高级选择器

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. 手机计算器1+1=2---Appium自动化

    要想计算1+1=2,首先要定位到按钮1,定位方式和selenium类似

  2. jenkins之从0到1利用Git和Ant插件打war包并自动部署到tomcat(第二话):安装插件,配置JDK、Git、Ant

    jenkins之所以这么强大,离不开丰富的插件库. 要确保jenkins上安装好Git plugin.GitHub plugin.AntPlugin插件,一般在启动jenkins时默认安装的插件中就包 ...

  3. python 读写TXT,安装pandas模块。

    今天需要用python读TXT 文件,发现pandas库好用,所以就去下载,没想pythoncharm中的setting中下载失败,所以去下源文件,安装pandas 是提示得先装numpy库,于是又去 ...

  4. Feign

    Feign简介 Feign是一个声明式的Web服务客户端,使用Feign可使得Web服务客户端的写入更加方便. 它具有可插拔注释支持,包括Feign注解和JAX-RS注解.Feign还支持可插拔编码器 ...

  5. mybatis ----> 各种方式使用MBG

    1.maven方式使用 配置好.pom文件 ①src/main/resources下创建 generatorConfig.xml,并配置好(自动生成的配置文件骨架) ②src/main/java 下创 ...

  6. canvas学习之折线图

    接着上一张柱状图讲,我们是使用折线图: import {canvasPoint} from '../../assets/js/canvas';import {basicInfo,histogramMo ...

  7. android -------- Eclipse下的NDK配置环境

    NDK 全称是Native Development Kit,是一个让开发人员在Android应用中嵌入使用本地代码编写的组件的工具集 原生开发工具包 (NDK) 是一组可让您在 Android 应用中 ...

  8. 大div中嵌套小div,点击大div时隐藏,点击小div不隐藏

    给小div添加一个click事件 <div onClick="event.cancelBubble = true">  //小div

  9. Lowest Common Ancestor of a Binary Search Tree(Java 递归与非递归)

    题目描述: Given a binary search tree (BST), find the lowest common ancestor (LCA) of two given nodes in ...

  10. 推荐系统评测指标—准确率(Precision)、召回率(Recall)、F值(F-Measure)

    下面简单列举几种常用的推荐系统评测指标: 1.准确率与召回率(Precision & Recall) 准确率和召回率是广泛用于信息检索和统计学分类领域的两个度量值,用来评价结果的质量.其中精度 ...