（利用优先级来过滤） 优先级-- 内联样式表>内部样式表>外部样式表>浏览器默认设置 同级中的由高到低（含有!...基础选择器 .class--选中html中类名为class的所有元素 #id--选择id为某值的所有元素 *--通配符，选择所有元素 element--选择某元素，比如p/div/span等 div1,...div2--逗号，并列关系，选中所有列出的元素 div1 div2--空格，下属关系，选中div1内所有的div2元素 div1>div2--大于号，父子关系，选中所有父元素为div1的div2元素 div1...https"] 选择src属性以https开头的所有a元素 [attribute$=value]--以value结尾 [attribute*=value]--包含value 后三个是CSS3的新写法，使用正则表达式来匹配...，则显示滚动条 inherit从父元素继承 position--元素的定位类型，制作一些放在某个框内的hot/new小图标时可用”子绝父相“，来达到无论缩放浏览器窗口都不会移位的效果。
XPath 路径表达式 使用XPath我们可以很容易定位到网页中的节点，也就是找到我们关心的数据。这些路径跟电脑目录、网址的路径很相似，通过/来表示路径的深度。...下面我们以一个简单的html文档为例，来解释不同的节点及其关系。...还是以上面的html文档为例来说明节点关系： 父（Parent） 每个元素节点（Element）及其属性都有一个父节点。 比如，body的父是html，而body是div、ul 的父亲。...比如，li的父辈有：ul、div、body、html 后代（Descendant） 某节点的子及其子孙节点。 比如，body的后代有：div、ul、li。...//body/div ` ` //body/ul 选取body的所有div和ul元素。 body/div 相对路径，选取当前节点的body元素的子元素div。绝对路径以 / 开始。
$('[name$="end"]') 匹配 name 以 end 结尾的元素 $('[class*="text"]') 匹配class属性包含text的元素 $('#demo>p') 子代选择器,通过父元素找子元素...$('#demo p') 后代选择器,通过父元素找子孙元素 $('#p1+div') 兄弟相邻选择器,通过定位当前元素，找到同一层级的下一个兄弟元素 $('#p1~div') 同辈选择器，,通过定位当前元素...4.同辈选择器, 如#p1~div 子代选择器,通过父元素找子元素用大于号> // 父元素找子元素 var a1 = $('#demo>p') // 找出id为demo的 的子元素p...// 后代选择器 var a1 = $('#demo p'); // id为demo的后代p元素 （包含子元素和子孙元素） console.log(a1) 兄弟相邻选择器...第一个p元素 console.log(p1) var p2 = $('p:last'); //查找 最后一个p元素 console.log(p2) 模糊匹配 模糊匹配属性以什么开头和以什么结尾的元素
用//表示所有路径以//后指定的子路径结尾的元素，如//D表示所有的D元素；如果是//C/D表示所有父节点为C的D元素。...6.1.2 相对路径 即相对于上下文节点的路径，使用双斜杠，例如： By.xpath("//input//div") 相对路径更加实用，一般我们难以直接定位到一个目标元素时，可以先定位到一个能准确定位到的上级元素...，又因为对于每一个元素，它的各个子元素都是有序的，所以通过索引就能准确定位到目标元素： /A/B/C[1]表示A元素下的B元素下的C元素下的第一个子元素。...，使用属性定位时要以@开头（下面form仅为示例，也可以为div、input等） //form[@id]：表示所有具有属性id的form元素。...元素By.cssSelector(“div[class^=‘bar’]”) 属性class的值以bar结尾的div元素By.cssSelector(“div[class$=‘bar’]”) 属性
再来看看优先级，从高到低依次为：网页开发者定义的样式、网页阅读者定义的样式、浏览器的默认样式。 对继承的元素来说，子元素自身的样式优先级高于从父级继承来的样式。 更多细节 CSS 另外提供了一个！...文档中的多个元素可以拥有同一个类名。 在写样式表时，类选择器是以英文句号（.）开头的。 ID 选择器（ID selectors） 通过设置元素的 id 属性为该元素制定 ID。...如果后代元素没有自己的装饰，祖先元素上设置的装饰会 “延伸” 到后代元素中。不要求用户代理支持 blink。...盒模型及定位 已知宽度的 div 居中 用两种方法来实现一个背景色为红色、宽度为 960px 的 在浏览器中居中 我的方法一： 使用 margin：0 auto; html 文件 的 div，通过背景图定位等方式可以实现。
fixed 生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。...static 默认值，没有定位，元素出现在正常的文档流中，相当于取消定位属性或者不设置定位属性 inherit 从父元素继承 position 属性的值 定位元素特性 绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素...-- 第2个子元素div匹配 --> 2、E:nth-last-child(n)：匹配元素类型为E且是父元素的倒数第n个子元素（与上一项顺序相反） 3、E:first-child：匹配元素类型为E且是父元素的第一个子元素...个类型为E的子元素 7、E:nth-last-of-type(n)：匹配父元素的倒数第n个类型为E的子元素（与上一项顺序相反） 8、E:first-of-type：匹配父元素的第一个类型为E的子元素 9...-- 点击链接，h2标题变红 --> 2、E[data-attr='ok'] 含有data-attr属性的元素且它的值为“ok” 3、E[data-attr^='ok'] 含有data-attr属性的元素且它的值的开头含有
如何从槽发出数据 您知道如何通过使用范围限定的插槽将数据传递到插槽中，但是如何返回通信呢? 你将一个方法传递到槽中，然后在槽中调用那个方法。...乍一看，这可能有点奇怪，这也是为什么插槽很难理解的原因之一。槽最终被呈现为子组件的子组件，但它不与子组件共享作用域。相反，它充当父组件的子组件。...将从父组件发出一个事件。...从一个槽里发射回孩子 那么返回到子组件的通信呢? 我们刚刚看到，在槽中调用$emit将从父组件向祖父组件发送一个事件，因此这已被排除。...但是我们知道如何将数据从child传递到槽中: // Child.vue div> div> </template
p标签的元素 element element： div p，选择div标签元素内部的所有p标签元素 element>element： div>p，选择父元素为div标签元素的所有p标签元素 element...通过class定位，一个标签有多个class中间的空格用点代替，通过父标签的父标签定位p，在通过p定位子标签input，通过标签+class定位 #element element： div p，选择...div标签元素内部的所有p标签元素 #element>element： div>p，选择父元素为div标签元素的所有p标签元素 #element element： div p，选择div标签元素内部的所有...p标签元素 #element>element： div>p，选择父元素为div标签元素的所有p标签元素 #element+element： div+p，选择紧接在div元素之后的所有p元素 #id：...src属性以’https’开头的每个a标签元素 #[attribute$=value] a[src$=’.pdf’]，选择其src属性以’.pdf’结尾的所有a标签元素 #[attribute*=value
浮动和定位 定位 CSS 有三种基本的定位机制：普通流、浮动和绝对定位。 通过使用 position 属性，选择不同类型的定位。...这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。 因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。...元素不浮动，并会显示在其在文本中出现的位置。 Inherit -> 规定应该从父元素继承 float 属性的值。 完成一个简单的菜单栏 ? 菜单栏 开头 变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做） 变量名称对大小写敏感（y 和 Y 是不同的变量） 驼峰式命名 声明 // 先声明后赋值 var x; x = 20; //...中的None var tr = null arry 数组 方法： length属性：获取数组长度 pop() 方法从数组中删除最后一个元素 push() 方法（在数组结尾处）向数组添加一个新的元素
/ 开头的，如： /html/body/div/ul/li 缺点：一旦页面结构发生改变，路径也随之失效，必须重新定位。...所以不推荐使用绝对路径的写法 相对路径定位 作用：相对路径 以"//" 开头， 让xpath 从文档的任何元素节点开始解析（也就是说每个节点都作为起点找一下） 和绝对路径的区别：绝对路径 以 "/"...开头，让xpath 从文档的根节点开始解析 索引定位 跟Python的列表一样，通过[ 1 ]下标去找，注意！...= "footer"的任意元素 模糊匹配函数starts-with、contains //*[starts-with(@id,"s")] 找到id开头为 s 的任意元素 //*[ends-with...(@id,"s")] 找到id结尾为 s 的任意元素 //*[contains(text(),'注册')] 找到标签间文本包含 注册 的任意元素 定位函数position //*[contains
img标签img[alt="参赛作品"] 选择有alt属性以参赛作品开头的img标签序号选择器举例意义:first-child选择父元素的第一个子元素:last-child选择父元素的最后一个子元素:nth-child...(n) 第n个子元素:nth-of-type(n) 选择父元素下指定类型的第n个元素，只针对指定类型的元素进行计数和选择，而不会考虑其他类型的元素:nth-last-child(n)] 从父元素的最后一个子元素开始计数...，选择第n个元素:nth-last-of-type(n) 从父元素的最后一个指定类型的子元素开始计数，选择第n个元素元素关系选择器名称举例意义子选择器div > pdiv的子标签p相邻兄弟选择器img+...div { display: inline;}3、转换为行内块元素还有一种常见的情况是将元素转换为行内块元素，即display属性值设置为inline-block。...盒子的垂直居中，需要使用绝对定位技术实现。
CSS3新增选择器 1、E:nth-child(n)：匹配元素类型为E且是父元素的第n个子元素 .list div:nth-child...-- 第2个子元素div匹配 --> 2、E:first-child：匹配元素类型为E且是父元素的第一个子元素 3、E:last-child：匹配元素类型为E且是父元素的最后一个子元素 4、E >...E:first-child：匹配元素类型为E且是父元素的第一个子元素 E:last-child：匹配元素类型为E且是父元素的最后一个子元素 除了上面根据序号来定位相关元素的样式，还可以使用first-child...和last-child来进行定位。...3、E[attr^='ok'] 含有attr属性的元素且它的值的开头含有“ok” ? ? 4、E[attr$='ok'] 含有attr属性的元素且它的值的结尾含有“ok” ?
在WebDriver中有多种定位方法，常用的一般都是id、name和Xpath，特别是Xpath是常用的定位方式，但是未来用CSS定位更好。...1 element element div p 选择 div> 元素内部的所有 元素。...1 element>element div>p 选择父元素为 div> 元素的所有 元素。...2 :lang(language) p:lang(it) 选择带有以 "it" 开头的 lang 属性值的每个 元素。...3 [attribute$=value] a[src$=".pdf"] 选择其 src 属性以 ".pdf" 结尾的所有 元素。
data是每个组件的私有内存，可以在其中存储需要的任何变量。props是将数据从父组件传递到子组件的方式。...在本文中，我们将学习到： 什么是props，为什么这些数据只向下流动，而不是向上 data 选项的用途 响应式是什么 如何避免 props 和 data 之间的命名冲突 如何将 props 和 data...结合使用 什么是 props 在Vue中，props(或properties)是我们将数据从父组件向下传递到其子组件的方式。...> 在这个例子中，我们传递一个名为color-prop prop,其值为“hello world”。...我们如何从父组件(ProfilePage)向下获取数据到子组件(ContactInfo) 我们必须使用 props 传递数据。
此函数必须保持纯净，即必须每次调用时都返回相同的结果。 3. 如何将两个或多个组件嵌入到一个组件中？...Props 是 React 中属性的简写。它们是只读组件，必须保持纯，即不可变。它们总是在整个应用中从父组件传递到子组件。子组件永远不能将 prop 送回父组件。...从父组件中接收初始值 Yes Yes 2. 父组件可以改变值 No Yes 3. 在组件中设置默认值 Yes Yes 4. 在组件的内部变化 Yes No 5....设置子组件的初始值 Yes Yes 6....) 在我看来属性代理就是提取公共的数据和方法到父组件，子组件只负责渲染数据，相当于设计模式里的模板模式，这样组件的重用性就更高了 function proxyHoc(WrappedComponent)
-- 规范， 可以编写css的代码，每个声明，最好使用分号结尾 语法：(里面不能写html代码， 注释/**/) 选择器{ 声明1;...background: gold; } /*选择p标签，定位到其父标签，选择当前的第(x)个元素， 当该元素与设置的标签一致时，应用修改...（约定俗称的东西） div也类似 字体样式 定位 仍然基于xx定位 position: absolution 没有父级元素定位的前提下，相对浏览器定位 父级元素存在定位，会相对于父级元素进行偏移 在父级元素范围内移动（好像可以出去？）...绝对的，不保留原来位置。 固定定位 position: fixed; 固定定位是固定在某个地方，浏览器向下移动页面也不动； 绝对定位是会动的。
节点 ul + p 选择ul后面的第一个p元素 div#container > ul 选取id为container的div的第一个...非贪婪（尽可能少匹配字符） ^ 字符串开头 $ 字符串结尾 \A/\Z 指定的字符串必须出现在开头...选取所有属于article的子元素的a元素 //div 选取所有div子元素（不论出现在文档任何地方） article//div 选取所有输入...选取属于article子元素的第一个div元素 /article/div[last()] 选取输入article子元素的最后一个div元素 /article/div[last()-1]...lang属性为eng的div元素 /div/* 选取属于div元素的所有子节点 //* 选取所有元素 //div[@
那么我们可以把div内部的标签、组件视为插槽内容，同理，我们也可以把 select 内部的 option 也视为插槽内容。 我们可以用匿名插槽的方式，写一个my-div的组件。 子组件 .... 没有设置插槽 插槽后 div> 子组件设置一个 slot 标签，slot 可以理解为是一种“插值”，表示父组件的插槽在这个位置被渲染...> 这是结尾 div-name> 父组件需要用 template 限定具名插槽内容的范围...子组件的插槽，先起个名字，就叫做“td”好了，不要纠结名称，俺有起名困难症。 然后用 row 属性传递行的数据，用 $index 传递遍历到第几行的数据。 这样一个简单的作用域插槽就搞定了。...做一个默认规则 自定义列的插槽名称格式：td_{字段名称}。 也就是说 td_开头的视为自定义列的插槽，加上前缀可以避免和 el-table 自带的具名插槽冲突。
改变盒子模型的属性为 box-sizing: border-box/content-box;。 2. CSS选择符有哪些？哪些属性可以继承？...id选择器（ # myid） 类选择器（.myclassname） 标签选择器（div, h1, p） 相邻选择器（h1 + p） 子选择器（ul > li） 后代选择器（li a） 通配符选择器（ *...display 属性的值 6. position属性值 absolute 生成绝对定位的元素，相对于值不为 static的第一个父元素进行定位。...fixed （老IE不支持） 生成绝对定位的元素，相对于浏览器窗口进行定位。 relative 生成相对定位的元素，相对于其正常位置进行定位。 static 默认值。...没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）。 inherit 规定从父元素继承 position 属性的值 7.
属性值]：选择属性值以指定值开头的元素 [属性名$=属性值]：选择属性值以指定值结尾的元素 [属性名*=属性值]：选择属性值中含有某值的元素的元素 开头 例如： :first-child 第一个子元素 :last-child 最后一个子元素 :nth-child()选中第n个子元素 特殊值: ...第四等：代表元素选择器和伪元素选择器，如div p，权值为0001。 通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。 继承的样式没有权值。...所以我们经常利用这个特点来使一个元素 在其父元素中水平居中 元素的垂直方向布局 子元素是在父元素的内容区中排列的， 如果子元素的大小超过了父元素，则子元素会从父元素中溢出 使用overflow...（可以-x或-y） 属性来设置父元素如何处理溢出的子元素 可选值: visible：默认值子元素会从父元素中溢出，在父元素外部的位置显示 hidden：溢出内容将会被裁剪不会显示
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
