css选择器

学习css常用基本层级伪类属性选择器

对着背影说爱祢 提交于 2020-02-21 06:26:40
常见的css选择器包含:常用选择器、基本选择器、层级选择器、伪类选择器、属性选择器,其中 常用选择器 分为:1.html选择符*{}//给页面上所有的标签设置模式;2.类选择符.hcls{}//给class是hcls的一类标签设置模式;3.id选择符#h3{}//给id是h3的标签设置样式;4.关联选择符#div h1、#div h1.ljhcls;5.div,h1,pmspan,button{} 基本选择器 分为:first-child第一个、::first-letter第一个字母、::fist-line第一行、:last-child最后一个元素、:nth-child(n)第几个元素, 层级选择器 分为a,b组合、a b后代、a>b子代、a+b a的一个是b,伪类选择器:hover鼠标经过、:focus焦点、::selection文字选中背景色, 属性选择器 [属性]、[属性=值]、[属性~=值]//包含任意一个值、[属性^=值]以什么开始、[属性$=值]以什么结束。 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title

BeautifulSoup解析(CSS选择器)

人盡茶涼 提交于 2020-02-20 13:51:45
CSS选择器 通过select()直接传入CSS选择器即可完成选择 实例代码如下: html=''' <div class="panel"> <div class="panel-heading"> <h4>Hello</h4> </div> <div class="panel-body"> <ul class="list" id="list-1"> <li class="element">Foo</li> <li class="element">Bar</li> <li class="element">Jay</li> </ul> <ul class="list list-small" id="list-2"> <li class="element">Foo</li> <li class="element">Bar</li> </ul> </div> </div> ''' 1.基本语法 from bs4 import BeautifulSoup soup = BeautifulSoup(html, 'lxml') print(soup.select('.panel .panel-heading'))#选择class的类型 print(soup.select('ul li'))#直接选择标签 print(soup.select('#list-2 .element'))#选择id的类型

前端——jQuery

会有一股神秘感。 提交于 2020-02-20 13:04:02
  jQuery是JS的工具库,对原生JS中的DOM操作、事件处理、包括数据处理和Ajax技术等进行封装, 使用 . 链式写法 , 提供更完善,更便捷的方法。   再使用jquery之前,我们需要先引入jquery文件,才能使用jquery语法,导入jQ文件的方法有两种。 从 jquery.com 下载 jQuery 库,本地导入(比较常用) 从 CDN(内容分发网络)中载入 jQuery,Staticfile CDN、百度、新浪、谷歌和微软的服务器都存有 jQuery 。 <head> // 本地导入 <script src="js/jquery.min.js"></script> // 从 Staticfile CDN 导入 <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> // 百度CDN <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </head> 注意:使用CDN有一个很大的优势,那就是许多用户在访问其他站点时,已经从百度、又拍云、新浪、谷歌或微软加载过 jQuery。当他们访问您的站点时,会从缓存中加载 jQuery,这样可以减少加载时间。同时,大多数 CDN

HTML/CSS 基础知识总结(一)

天大地大妈咪最大 提交于 2020-02-20 04:48:11
本文转载自 https://segmentfault.com/a/1190000004491633 要点:对Web标准的理解、浏览器差异、CSS基本功:布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端开发 技术等 1.Doctype作用? 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义? (1)、<!DOCTYPE> 声明位于文档中的最前面,处于 <html> 标签之前。告知浏览器的解析器,用什么文档类型 规范来解析这个文档。 (2)、严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。 (3)、在混杂模式中,页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。 (4)、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。 2.行内元素有哪些?块级元素有哪些? 空(void)元素有那些? (1)CSS规范规定,每个元素都有display属性,确定该元素的类型,每个元素都有默认的display值,比如div默认display属性值为“block”,成为“块级”元素;span默认display属性值为“inline”,是“行内”元素。 (2)行内元素有:a b span img input select strong(强调的语气) 块级元素有:div ul ol li dl dt dd h1 h2 h3 h4…p (3

CSS用途、分类、权重、性能

梦想与她 提交于 2020-02-19 03:22:30
CSS基础 Cascading Style Sheet 层叠样式表 选择器 { 属性 : 值 ; 属性 : 值 } 分号是分隔符 选择器: 1. 用于匹配HTML元素 有不同的匹配规则,多个选择器可叠加 2. 分类和权重 选择器分类 元素选择器a { } 伪元素选择器 : : before { } 类选择器 . link { } 属性选择器 [ type = radio ] { } 伪类选择器 : hover { } ID 选择器 #id { } 组合选择器 [ type = checkbox ] + label { } 否定选择器 : not ( . link ) { } 通用选择器 * { } 选择器权重 ID选择器#id{} +100j 类 属性 伪类 +10 元素 伪元素 +1 其它选择器 +0 计算一个不进位的数字 #id . link a [ href ] 100 + 10 + 1 + 0 = 111 #id . link . active 100 + 10 + 10 = 120 如果一个id选择器,11个类选择器 第一位是1, 第二位是11,不进位 !important优先级最高 style元素属性 优先级高比id高 相同权重 后写的生效 3.性能 < style > . body div . hello { color : red ; } < / style > <

java基础加强

陌路散爱 提交于 2020-02-17 22:57:44
java程序的执行过程 编写java程序 编写完的java程序,进行保存时自动将.java文件编译成.class文件 先启动虚拟机,虚拟机加载字节码对象.class文件,进行这个类的main方法开始执行 数据类型 基本数据类型 类型 描述 byte 占1个字节,范围-127-128,-2 7 到2 7 -1 short 占2个字节,范围-2 15 到2 15 -1 int 占4个字节,范围-2 31 到2 31 -1 long 占8个字节,范围-2 63 到2 63 -1 float 占4个字节,单精度 double 占8字节,双精度度 char 占2字节 boolean 占1字节 引用数据类型 基本类型的字面值规则 整数的字面值是int类型 byte、short、char三种比int小的整数,可以用范围内的值可以直接赋值 浮点数字字面值,是double类型 字面值的后缀:L表示long,F表示float,D表示double类型 字面值的前缀:0b表示二进制,0表示八进制,0x表示十六进制,\u表示char16机制 基本类型的运算规则 计算结果的数据类型,和算项的最大类型保持一致 byte、short、char三种比int小的整数,运算时自动转化成int 整数运算溢出 浮点数计算不精确 浮点数的特殊值: Java基础 1.验证JDK是否安装成功的命令: Echo %JAVA

前端基础 css基础

怎甘沉沦 提交于 2020-02-17 18:39:42
文章目录 前言 正文 1.css的一些简单介绍 2.页面引入css 2.1 外部样式表 2.2 内部样式表 2.3 行内样式表 3.css选择器 3.1 元素选择器(标签选择器) 3.2 id选择器 3.3 类选择器(class选择器) 3.4 并集选择器 3.5 属性选择器 3.6 后代选择器 3.7 对上面的几种选择器归纳总结 4.常见的属性 4.1 字体属性 4.2 颜色和背景属性 4.3 文本属性 4.4 边框和编号属性 4.5 块元素和内联元素 4.6 浮动、块属性、层属性 总结 前言 昨天写了html的基础,今天趁热打铁再来学学css。不过可能今天的内容就有点多了,记得隔几天回头来复习一下加深印象(骗骗浏览数,嘻嘻嘻) 正文 玩笑归玩笑,不过今天的内容确实很多,现在开始正文。 1.css的一些简单介绍 css:指的是“Cascading Style Sheet(层叠样式表)”,是用来控制网页外观的一门技术。 作用:美化页面 之前说前端三剑客嘛,html,css,js。当然现在有很多很好的js框架出现(比如Angular、React、Vue),这方面框架的学习推荐去B站看技术胖的视频,我们今天只聊聊最基础的css,打好基础之后的学习才会更轻松。 2.页面引入css 三种方法 外部样式表 内部样式表 行内样式表 一般开发的话推荐外部样式表,我举例子的话会用内部样式表

HTML 学习笔记 JQuery(锋利的JQuery 代码)

馋奶兔 提交于 2020-02-17 11:17:03
一 制作简单的导航栏 <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script> <style type="text/css"> #menu {width: 300px;} /*cursor 规定光标的显示类型*/ .has_children{background: #555555; color: #ffffff;cursor: pointer;} .highlight{color: #ffffff; background: green;} div { /*内间距*/ padding: 1px; clear: left; } div a { background: #888888; /*标签a先不显示*/ display: none; float: left; margin: 2px; widows: 300px; } </style> <script> $(function() { //为class = "has_children"的div添加点击事件 $(".has_children").click(function() { $(this).addClass("highlight") /

css基础

╄→гoц情女王★ 提交于 2020-02-15 15:49:12
CSS,是层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。 CSS具有以下特点: 1、丰富的样式定义 CSS提供了丰富的文档样式外观,以及设置文本和背景属性的能力;允许为任何元素创建边框,以及元素边框与其他元素间的距离,以及元素边框与元素内容间的距离;允许随意改变文本的大小写方式、修饰方式以及其他页面效果。 2、易于使用和修改 CSS可以将样式定义在HTML元素的style属性中,也可以将其定义在HTML文档的header部分,也可以将样式声明在一个专门的 CSS文件 中,以供HTML页面引用。总之,CSS样式表可以将所有的样式声明统一存放,进行统一管理。 3、多页面应用 CSS样式表可以单独存放在一个 CSS文件 中,这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件,在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。 4、层叠 层叠就是对一个元素多次设置同一个样式,这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套CSS样式表,而某些页面中的某些元素想使用其他样式,就可以针对这些样式单独定义一个样式表应用到页面中。 5、页面压缩 在使用HTML定义页面效果的网站中

css笔记

▼魔方 西西 提交于 2020-02-15 13:13:19
1.css书写规范:CSS (Cascading Style Sheets) :层叠样式表----->对标签进行样式的设置 <head> <style> /*css代码*/ //注释快捷点ctrl+/ span{font-size:30px;color:bule;} //属性1:值1;属性2:值2; </style> </head> 2.选择器 1.元素选择器 元素名称{} span{ } //此样式作用于所有的span标签 2.类选择器名称 先定义class属性 .类名{/*css ...*/} //作用于所有此class属性的标签 3.id选择器 定义id属性,必须在本页面唯一 #id{ /* css */ } //#后面没有空格 作用于此id对应的标签 改变特定标签内容属性值 4.层级 选择器1 选择器2 …..{ //选择器有层级关系,表示作用与选择器1下的选择器2标签 /*css样式代码*/ } 5.组合选择器 选择器1,选择器2...{ //作用于所有的选择器 } 2.边框属性 border : 1px solid red; //边框的粗细 样式 颜色 width:300px; //边框宽度 height:300px; //边框高度 3.浮动属性(float) 三个值:left right none(默认值) //设置浮动属性后,脱离原来文档流,即脱离原来版式 注意事项