css选择器 | 易学教程

Selenium(四)：CSS选择器(一)

阅读更多关于 Selenium(四)：CSS选择器(一)

1. CSS选择器前面我们学习了根据 id、class属性、tag名选择元素。如果我们要选择的元素没有id、class 属性，或者有些我们不想选择的元素也有相同的id、class属性值，怎么办呢？这时候我们通常可以通过CSS selector语法选择元素。 1.1 CSS Selector语法选择元素原理 HTML中经常要为某些元素指定显示效果，比如前景文字颜色是红色，背景颜色是黑色，字体是微软雅黑等。那么CSS必须告诉浏览器：要选择哪些元素，来使用这样的显示风格。比如，下图中，为什么灰太狼红太狼小灰灰会显示为红色呢？ html代码： <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .wolf{ color: red; } </style> </head> <body> <div class="raise"><span>喜羊羊</span></div> <div class="raise"><span>美羊羊</span></div> <div class="raise"><span>暖羊羊</span></div> <div class="wolf"><span>灰太狼</span></div> <div class="wolf"><span>红太狼</span></div>

Web开发（五）jQuery

阅读更多关于 Web开发（五）jQuery

jQuery是什么 <1> jQuery是由John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。 <2> jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE! <3> 它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器 <4> jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。 <5> jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。 jQuery 对象 jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象。 jQuery 对象是 jQuery 独有的 . 如果一个对象是 jQuery 对象 , 那么它就可以使用 jQuery 里的方法 : $(“#test”).html(); $("#test").html() //意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法 // 这段代码等同于用DOM实现代码： document.getElementById(" test ")

day46 jQuery

阅读更多关于 day46 jQuery

day46 jQuery 内容回顾: 1.库和框架的区别库: 小而精: 直接操作DOM, 如css()方法 jquery封装了js中的哪些操作(大量的api=方法) - 事件 - 属性 - DOM - 选择器 - ajax(交互的技术) jQuery的链式编程: jQuery的方法可以实现和js的属性操作一样的功能, 好处在哪, jQuery的方法执行完,给返回了jQuery对象, 还可以接着使用其他方法, 这就是链式编程 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <ul> <li>bajie</li> <li>wukong</li> <li>datang</li> </ul> <script src="jquery.js"></script> <script> var colors = ['red','yellow','blue']; //1.从jquery对象转换为js对象 console.log($('li')[0]); //注意这里, 方式一.加上[下标], 是从jquery对象到js对象的转换 //方式二.JQ对象.get(0) //2.从js对象转换为jquery对象 var item = document

css-基础

阅读更多关于 css-基础

1. CSS盒模型 CSS盒模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。CSS 假定所有的HTML 文档元素都生成了一个描述该元素在HTML文档布局中所占空间的矩形元素框，可以形象地将其看作是一个盒子。CSS 围绕这些盒子产生了一种“盒子模型”概念，通过定义一系列与盒子相关的属性，可以极大地丰富和促进各个盒子乃至整个HTML文档的表现效果和布局结构。 CSS盒模型可以看成是由从内到外的四个部分构成，即内容区（content）、内边距(padding)、边框(border)和外边距(margin)。内容区是盒子模型的中心，呈现盒子的主要信息内容；内边距是内容区和边框之间的空间；边框是环绕内容区和内边距的边界；外边距位于盒子的最外围，是添加在边框外周围的空间。根据计算宽高的区域我们可以将其分为 IE盒模型和 W3C标准盒模型，可以通过 box-sizing 来进行设置： content-box ：W3C标准盒模型 border-box ：IE盒模型区别： W3C标准盒模型：width(宽度) = content(内容宽度) IE盒模型：width(宽度) = content(内容宽度) + padding(内边距) + border(边框) 2. BFC BFC即Block Fromatting Context(块级格式化上下文)

css权重计算

阅读更多关于 css权重计算

1、!important，加在样式属性值后，权重值为 10000 2、内联样式，如：style=””，权重值为1000 3、ID选择器，如：#content，权重值为100 4、类，伪类和属性选择器，如： content、:hover 权重值为10 5、标签选择器和伪元素选择器，如：div、p、:before 权重值为1 6、通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0 来源： https://www.cnblogs.com/jack123/p/11928297.html

中高级前端面试秘籍，助你直通大厂(一)

阅读更多关于中高级前端面试秘籍，助你直通大厂(一)

引言又是一年寒冬季，只身前往沿海工作，也是我第一次感受到沿海城市冬天的寒冷。刚过完金九银十，经过一场惨烈的江湖厮杀后，相信有很多小伙伴儿已经找到了自己心仪的工作，也有的正在找工作的途中。考虑到年后必定又是一场不可避免的厮杀，这里提前记录一下自己平时遇到和总结的一些知识点，自己巩固复习加强基础的同时也希望能在你的江湖路上对你有所帮助。笔者在入职最近这家公司之前也曾有过长达3个月的闭关修炼期，期间查阅资料无数，阅读过很多文章，但总结下来真正让你印象深刻的，不是那些前沿充满神秘感的新技术，也不是为了提升代码逼格的奇淫巧技，而是那些我们经常由于项目周期紧而容易忽略的基础知识。所谓万丈高楼平地起，只有你的地基打得足够牢固，你才有搭建万丈高楼的底气，你才能在你的前端人生路上越走越远。这篇主要是先总结一下CSS相关的知识点，可能某些部分不会涉及到太多具体的细节，主要是对知识点做一下汇总，如果有兴趣或者有疑惑的话可以自行百度查阅下相关资料或者在下方评论区留言讨论，后续文章再继续总结JS和其他方面相关的知识点，如有不对的地方还请指出。 1. CSS盒模型 CSS盒模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。CSS 假定所有的HTML 文档元素都生成了一个描述该元素在HTML文档布局中所占空间的矩形元素框，可以形象地将其看作是一个盒子。CSS 围绕这些盒子产生了一种“盒子模型

scss/sass 快速入门

阅读更多关于 scss/sass 快速入门

1.1.定义变量 $开头就可以定义点亮：比如$sidebar-width、$highlight-color 1.2.变量引用 1.3下划线 '_' 和中划线 '-' sass 的变量名可以与 css 中的属性名和选择器名称相同，包括中划线和下划线 2.1嵌套规则 css 中重复写选择器是非常恼人的。如果要写一大串指向页面中同一块的样式时，往往需要一遍又一遍地写同一个 ID ： 2.2父选择器的标识符&; 1.普通用法编译后 2.特殊用法：给当前&添加上层选择器 2.3群组选择器的嵌套 1.群组在外编译后： 2.群组在内编译后： 2-3. 子组合选择器和同层组合选择器：>、+和~; ' '（空格)：表示子选择器，可以是直接子和间接子 >：表示直接子选择器 +：表示当前元素的后一个兄弟元素 ~：表示当前元素的后全部兄弟元素 2-4. 嵌套属性; 目的写法1：写法2： 3. 导入SASS文件; 1.css中的@import 规则：只有执行到 @import 时，浏览器才会去下载其他 css 文件，这导致页面加载起来特别慢。 2.scss中 @import 规则：所有相关的样式被归纳到了同一个 css 文件中，而无需发起额外的下载请求 3.可以省略 .sass 或 .scss 文件后缀： @import "sidebar"; 这条命令将把

CSS 预处理语言之 Scss 篇

阅读更多关于 CSS 预处理语言之 Scss 篇

1. Sass 和 Scss Sass 和 Scss 其实是同一种东西，我们平时都称之为 Sass；Scss 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。也就是说，任何标准的 CSS3 样式表都是具有相同语义的有效的 Scss文件。两者之间不同之处有以下两点：文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 Scss 是以“.scss”后缀为扩展名语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;) ，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。示例: // Sass 语法 $w:200px; //定义变量 $h:300px; //定义变量 body width:$w; height:$h; // Scss 语法 $w:200px; $h:300px; body{ width:$w; height:$h; } /* 编译出来的css*/ body{ width:200px; height:300px; } 2. Sass/Scss 和 Css Sass 和 Css Sass 和 CSS 写法的确存在一定的差异，由于 Sass 是基于 Ruby 写出来，所以其延续了 Ruby 的书写规范。在书写 Sass 时不带有大括号和分号，其主要是依靠

css基础知识1——

阅读更多关于 css基础知识1——

CSS是层叠样式表，用于定义HTML内容在浏览器内的显示样式 css的优点：（1）css简化html相关标签，网页体积小，下载快（2）解决内容与表现分离的问题（3）更好的维护网页，提高工作效率 css基础语法 (1)css样式规则由两部分组成：选择器、声明选择器的作用是：告诉浏览器给网页中的谁去设置样式声明：是由一对对的名值对组成格式，两个名值对之间由分号隔开：{属性名：属性值；属性名：属性值；.....} css样式格式：选择器{属性名：属性值；属性名：属性值；.....} 选择器1，选择器2，选择器3，选择器4......{属性名：属性值；属性名：属性值；.....}表示多个选择器都设置了相同的样式（2）css注释格式：/*注释语句*/ css使用方法 (1)css的引用方式 a.内联样式（行内样式）在开始标签内添加style样式属性，如:<p style="color: red;font-family: '微软雅黑';...">内容 </p> 缺点：增加html代码的冗余性，使代码没有达到分离的效果，同时也不便于后期的维护 b.嵌入样式（内部样式表）在<head></head>标签内：加入<style type="text/css"> css样式...... </style> 如： <!DOCTYPE html> <html> <head> <meta

CSS ID选择器&通配选择器

阅读更多关于 CSS ID选择器&通配选择器

ID选择器 ID（IDentity）是编号的意思，一般指定标签在HTML文档中的唯一编号。ID选择器和标签选择器、类选择器的作用范围不同。 ID选择器仅仅定义一个对下对象的样式，而标签选择器和类选择器可以定义多个对象的样式。 ID选择器以#号作为前缀，然后是一个自定义的ID名，用法如图所示示例： <!doctype html> <html> <head> <style type="text/css"> #box{/*ID样式*/ background: url("../photos/野外.jpg")center bottom; height: 200px; width: 400px; border: solid 2px red; padding: 100px; } </style> <meta charset="utf-8"> <title>无标题文档</title> </head> <body> <div id="box">问君能有几多愁，恰似一江春水向东流</div> </body> </html> 运行结果：除此之外，也可以为ID选择器指定标签范围。定义指定ID选择器的语法机构如图：采用这种方法可以提高该样式的优先级。 ##通配选择器如果HTML所以元素都需要定意思相同的样式，则一个个分别为它们定义样式，会感到很麻烦。通过使用通配选择器可以解决这一麻烦。

订阅 css选择器