css选择器

css---使用class和id

混江龙づ霸主 提交于 2020-03-13 06:10:20
网页现在的新标准是W3C。目前的模式是html+css+javascript,如何理解呢,就是html是网页的结构,CSS是网页的样式,javascript是行为。结构就是盖房子先要把结构建出来,然后用CSS来装饰。其实你在用dreamweaver做网页时就已经用到了CSS,比如你用DW的属性面板来设置一个字的字体、颜色和大小,当你选好后,就会自动生成一个.style1的红色代码,在<style></style>之间不知道你注意过没有,这就是CSS,这样讲的话你应该能理解html和CSS的区别了吧。CSS的名称就叫“层叠样式表”,从字面也就能理解了。 SS 即 级联样式表 。它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS id 和 class 选择器编辑如果你要在HTML元素中设置CSS样式,你需要在元素中设置"id" 和 "class"选择器。[1]id 选择器id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。以下的样式规则应用于元素属性 id="para1":实例12345#para1{text-align:center;color:red;}ID属性不要以数字开头,数字开头的ID在 Mozilla

一文吃透jQuery选择器!

折月煮酒 提交于 2020-03-12 17:06:37
1 jQuery选择器 jQuery选择器用于选择DOM元素进行相应操作,允许通过多种方式选择,包括标签名,属性名,类名,id等对元素进行选择,基于CSS选择器.jQuery中所有的选择器都以$符号开头,后面加一对括号. jQuery选择器可以分为基本选择器,层次选择器,过滤选择器与表单选择器. 2 基本选择器 基本选择器可以分成四个: id选择器 元素选择器 类选择器 通配符选择器 组合选择器 2.1 id选择器 id选择器根据给定的id匹配一个元素,以 # 开头,如有: <div id="div1"></div> 则选择器 $("#div1") 会选择 如果id中含有特殊字符,比如点: <div id="div1.1.1"></div> 则需要使用双反斜杠转义: $("#div1\\.1\\.1") 2.2 元素选择器 根据元素的标签名查找所有符合的元素.假设有: <div>1</div> <div>2</div> <div>3</div> 选择器 $("div") 会选择所有div元素. 2.3 类选择器 根据给定的css类名匹配元素,以 . 开头.如有: <div class="class1"></div> <p class="class1"></p> <div class="class2"></div> 选择器 $(".class1") 会选择: 选择器 $("

CSS选择器(伪类选择器)

爱⌒轻易说出口 提交于 2020-03-12 13:25:45
伪类选择器   伪类专门用来表示元素的一种特殊的状态   比如:访问过的超链接,比如普通的超链接,比如获取焦点的文本框   当我们需要为处在这些特殊状态的元素设置样式时,就可以使用伪类   有四个伪类可以让你根据访问者与该链接的交互方式,将链接设置成4种不同的状态:    * 正常链接:- a:link    * 访问过的链接:- a:visited(只能定义字体颜色)    * 鼠标滑过的链接: -a:hover    * 正在点击的链接: -a:active    * 获取焦点:-:focus    * 指定元素前:-:before    * 指定元素后:-:after    * 选中的元素:-::selection   访问过的呈现紫色,未访问过呈现蓝色:   为访问过的链接设置一个颜色为深红色   浏览器是通过历史记录来判断一个链接是否访问过   由于涉及到用户的隐私问题,所以使用visited伪类只能设置字体的颜色    :hover 和 :active也可以为其他元素设置   (IE6中不支持对超链接以外的元素设置)     * 获取焦点:-:focus    * 指定元素前:-:before    * 指定元素后:-:after    * 选中的元素:-::selection 点出来后: 来源: https://www.cnblogs.com/XiaMengJie/p

Web开发知识点总结

岁酱吖の 提交于 2020-03-12 06:51:18
HTML前言:这是一篇简单的 web 开发知识点的总结,适用于刚开始学习编程的人来学习的。我是为了能够在熟记熟记这些知识点而总结的一篇文章。 1 什么是浏览器? (1) 浏览器就是接收浏览者的操作 ( 打开一个网址,点击一个链接,点击一个按钮 ) ,然后帮助浏览者去 Web 服务器请求网页内容( HTML 格式返回),然后展现成人眼能够看得懂的可视化页面的软件。 (2) IE== 浏览器?这句话是错误呢。 IE 是浏览器的一种,还有 FireFox , Opera , Chrome 等,注意遨游 (Maxthon) ,世界之窗,搜狗浏览器, 360 浏览器等并不是一种独立于 IE 的浏览器,其内核还是 IE 的内核,只不过是换了一个外壳而已,所以用遨游的不能嘲笑用 IE 的,否则就露怯了。 (3) 所谓 Trident 引擎就是 IE 的 WebBrowser 控件,现在很多非 IE 核心的浏览器用的是 Trident 引擎,比如遨游 3 和搜狗的双核, Chrome,Safari 。 2 静态页面,动态页面 (*) (1) 网站页面分为静态页面和动态页面 1) 静态页面:有一个 Html 页面文件保存在服务器上,浏览器需要这个页面的时候就把这个页面文件发给浏览器。 2) 动态页面:服务器上没有浏览者要看的页面,而是服务器动态生成的 Html 页面发给浏览器

CSS选择器

早过忘川 提交于 2020-03-11 13:55:05
一、简单选择器 1.通用选择器:*{} 2.元素选择器:元素{} 3.id选择器 4.类选择器 5.群组选择器:选择器1,2,...n{} 6.后代选择器:选择器1 选择器2...{} 7.子代选择器:选择器1>选择器2...{} 8.伪类选择器:①:link 未访问时;②:visited 访问后;③:hover 鼠标悬停;④:active 元素激活状态下;⑤:focus 获得焦点时; 二、复杂选择器 1.兄弟选择器 ①相邻兄弟选择器:选择器1+选择器2:获取紧挨在选择器1后的兄弟元素 ②.通用兄弟选择器:选择器~选择器:获取元素后面所有符合条件的兄弟元素 2.属性选择器: ①[attr]{} ②[attr1][attr2]{} ③[attr=value]{} ④elem[attr=value]{} ⑤elem[attr1][attr2]{} ⑥[attr^=value]{}——开头 ⑦[attr$=value]{}——结尾 ⑧[attr*=value]{}——含有 ⑨[attr~=value]{}——含有value这个单词的元素(前后空格) 3.伪类选择器 ①目标伪类::target{} 锚点被激活时,让锚点元素应用的样式 ②结构伪类::first-child{} 找大哥 :last-child{}找小弟 :nth-child(n) ③:empty:找内部无任何元素的标签,文本

2019年前端常见jQuery面试题

僤鯓⒐⒋嵵緔 提交于 2020-03-09 06:47:14
一、$(document).ready() 是个什么函数?为什么要用它? ready() 函数用于在文档进入ready状态时执行代码。当DOM 完全加载(例如HTML被完全解析DOM树构建完成时),jQuery允许你执行代码。使用$(document).ready()的最大好处在于它适用于所有浏览器,jQuery帮你解决了跨浏览器的难题。需要进一步了解的用户可以点击 answer链接查看详细讨论。 二、JavaScript window.onload 事件和 jQuery ready 函数有何不同?  这个问答是紧接着上一个的。JavaScript window.onload 事件和 jQuery ready 函数之间的主要区别是,前者除了要等待 DOM 被创建还要等到包括大型图片、音频、视频在内的所有外部资源都完全加载。如果加载图片和媒体内容花费了大量时间,用户就会感受到定义在 window.onload 事件上的代码在执行时有明显的延迟。   另一方面,jQuery ready() 函数只需对 DOM 树的等待,而无需对图像或外部资源加载的等待,从而执行起来更快。使用 jQuery $(document).ready() 的另一个优势是你可以在网页里多次使用它,浏览器会按它们在 HTML 页面里出现的顺序执行它们,相反对于 onload 技术而言,只能在单一函数里使用

CSS笔记

我的未来我决定 提交于 2020-03-08 23:01:56
极客CSS笔记 基础语法: selector选择器{ property属性:value值 } 例: h1{ color:red; font-size:18px }    高级语法: 选择器分组: h1, h2, h3, h4, h5, h6 { color : red; } 继承: 在最外层的元素添加样式,若里层元素没有样式,则套用该样式 body{ color:green; } CSS选择器: 派生选择器: 通过依据元素在其位置的上下文关系来定义样式。 例:li strong{},中间用空格隔开 id选择器 :以#号来定义,常用方式是id选择器常常用于建立派生选择器。 例:#pid a{} 类选择器 :以 . 点号来表示,也可以用作派生选择器 属性选择器 :对带有指定属性的HTML元素设置样式,属性和值选择器。 例:[title]{} 或 [title=t]{} 子元素选择器: element > element。例 <div> > <p> ,选择父元素为div的所有p元素 兄弟选择器: element + element。例 <div> + <p> ,选择紧接着div元素之后的所有p元素 CSS样式: CSS背景 属性 描述 background-attachment 背景图像是否固定或者随着页面的其余部分滚动 background-color 设置元素的背景颜色

笔记-JavaWeb学习之旅16

拟墨画扇 提交于 2020-03-08 16:57:50
增强对象的功能 动态代理:在内存中形成代理类 实现步骤: 代理对象和真实对象实现相同的接口 代理对象 = Proxy.newProxyInstance(); 使用代理对象调用真实对象的方法 增强方法 增强方式: 增强参数列表 增强返回值类型 增强方法体执行逻辑 package com.data.proxy; //实现动态代理需要真实对象和代理对象具有相同的接口 //定义一个卖电脑的接口 public interface SaleComputer { public String sale(double money); public void show(); } package com.data.proxy; //真实类 //真实类对应真实对象,真实对象被代理对象代理,用来增强方法 public class Lenovo implements SaleComputer{ @Override public void show() { System.out.println("展示电脑...."); } @Override public String sale(double money) { System.out.println("花了"+money+"元买了一台联想电脑"); return "联想电脑"; } } package com.data.proxy; import java

如何写出优雅的css代码 ?

拈花ヽ惹草 提交于 2020-03-08 08:02:10
如何写出优雅的css代码 ?    对于同样的项目或者是一个网页,尽管最终每个 前端开发工程师 都可以实现相同的效果,但是他们所写的代码一定是不同的。有的优雅,看起来清晰易懂,代码具有可拓展性,这样的代码有利于团队合作和后期的维护;而有的混乱,虽然表达出了最终的效果,然而却晦涩难懂,显然团队成员在读这样的代码时就显得无从下手,更不利于后期的维护了。那么如何写出优雅的代码呢?下面我将以一个很小的项目就以下几个方面简单的表达一下自己的看法,如有不妥,望批评指正。 如何整理一个项目。 如何写出清晰易懂的HTML代码。 如何写出优雅的css代码(重点)。 第一部分:如何整理一个项目。    当我们接手一个表白墙的小项目时,怎么去分类整理呢?是把所有的html文件、css文件、js文件和图片等等混乱的放在一起?好吧,那就看看这样是什么效果吧?    可能你会觉得这没有什么啊?文件都可以找到啊,但是你试图在sublime编辑器中打开看看是什么效果:   ( 补充说明:博友@Tabweng 建议文件名不要使用中文而尽量使用英文,在此表示感谢,希望大家也可以注意这个问题。 )    有没有觉得很混乱呢?! 此外,如果项目更大了呢?你需要的html文件、css文件、js文件、以及图片的需求量更大了呢?你还能保证可以顺利的找出每一个你想要的文件并编辑吗?显然显然是否定的。所以对于这种项目

前端(三)-----css入门

别来无恙 提交于 2020-03-08 02:10:11
网页美容师 1. css========cascading style sheets 美化样式 ----内部样式 ----行内样式 ----外部样式 2.内联样式 又称行内样式 <标签名 style="属性1:属性值1; 属性2:属性值2; "> 内容 </标签名> 作用范围:当前以及子标签起作用 3. 外部样式表 实际工作开发中以此为主 链入式是将所有样式放在一个或多个.css为扩展名的外部样式表文件中 通过link标签将外部样式文件链接到html文档中,其基本语言格式如下: <head> <link href="css文件的路径" type="text/css" rel="style.sheet"> </head> 1.单标签 2.必须在head头部标签中 3.必须指明3个属性 四.内部样式表 <head> <style> 选择器{属性:值} </style> </head> 选择器是用于选择标签的 五.项目格式 项目1======html css 文件 .style.css web工程 包括 css文件夹,images文件夹,js文件夹,index.html文件夹 六. 选择器 h1{ color:red; font-size:25px; } 1.选择器用于指定 css样式作用的html对象 2.属性以k-v的形式设置样式属性,字体大小,文本颜色等 3,之前以;相连接 1