下的子元素； :last：同上了，只是是最后一个而已； :first- child：为每个父元素匹配第一个子元素，如li:first-child返回每个ul的第一个li元素。...可以这样理解，页面中的元素有相同的父元素 的，并且里面又包含li元素的，那么就取第一个li元素，每个子类集合都要进行判断，直到找出所有符合要求的li元素； :last-child：这个也与上面相对了，...只是取的是最后一个； :only– child：返回所有没有兄弟节点的元素，注意，文本元素不是，也就是说类似这样的hellojquery，对于这段会选出...An+B的所有子节点，比如3n+1返回所处位置为父节点子元素的是3的倍数加1的那个子元素； :even：页面范围内的处于偶数位置的元素，如：li:even返回全部偶数li元素； :odd：页面范围内的处于奇数位置的元素...利用css选择器进行选择： 元素标签名：比如说(”a“)会选出所有链接元素； #id：通过元素id进行选择，比如说(“#form1”)会选择id为form1的元素； .class：通过元素的CSS类来选择
|先应用第二个的元素，且在第一个元素中| 子代选择器 | 选择器>>选择器>|ul>li|匹配第二个选择器，属于第一个选择器的子代| 兄弟选择器 |选择器>+选择器> |p+a{}|匹配紧跟第一个选择器的选择器...该选择器与前两个选择器一样，E元索也可以省略，如果省略则表示可以匹配满足条件的任意元素。...(1)临近兄弟选择器 该选择器使用加号“+ ”来链接前后两个选择器。选择器中的两个元素有同一个父亲，而且第二个元素必须紧跟第一-个元素。...(2)普通兄弟选择器 该选择器使用加号“~”来链接前后两个选择器。选择器中的两个元素有同一个父亲，但第二个元素不必紧跟第一-个元素。...:empty选择器 :empty选择器用来选择没有子元素或者文本内容为空的所有元素。
结构伪类 /* 父元素的第一个子元素且该子元素为 p 的元素 */ p:first-child { background: #046582; } /* 父元素中第一个....div1::after { content: 'div1 的 after'; margin-left: 10px; color: #ef4f4f } /* ::before 在选中元素的第一个位置添加一个子元素...* 0 继承属性 样式作用元素 -1 假设在一个拍卖会上，有以下几种筹码： 一个内联样式相当于一千元 一个ID 选择器相当于一百元 一个类选择器相当于十元 一个标签选择器相当于一元 通用选择器为零元...important 是 CSS 选择器中的一个"流氓"属性，不论选择器的权重或者优先级的高低，只要加上 !important，那么这个样式的优先级就是最高的 如果针对同一元素样式存在冲突且同时存在 !...important，那么选择器总权重值高者生效 选择器的权重值最高就一定会生效吗？
6.CSS3 结构性伪类选择器—first-child :first-child选择器表示的是选择父元素的第一个子元素的元素E。...简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。...如下表所示： 9.CSS3 only-child选择器 :only-child选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。...10.CSS3选择器 :enabled和:disabled选择器 在Web的表单中，有些表单元素有可用（“:enabled”）和不可用（“:disabled”）状态，比如输入框，密码框，复选框等。...12.CSS3选择器 ::selection选择器 ::selection伪元素是用来匹配突出显示的文本(用鼠标选择文本时的文本)。
（1）临近兄弟选择器 该选择器使用加号“+”来链接前后两个选择器。选择器中的两个元素有同一个父亲，而且第二个元素必须紧跟第一个元素。...（2）普通兄弟选择器 普通兄弟选择器使用 “~”来链接前后两个选择器。选择器中的两个元素有同一个父亲，但第二个元素不必紧跟第一个元素。...:first-child和:last-child选择器 :first-child选择器和:last-child选择器分别用于为父元素中的第一个或者最后一个子元素设置样式。...:nth-child(n)和:nth-last-child(n)选择器 使用:first-child选择器和:last-child选择器可以选择某个父元素中第一个或最后一个子元素，但是如果用户想要选择第...:nth-of-type的值还可以设为odd或2n-1（奇数），even或2n（偶数），即为选择所有排序为奇数或偶数的元素 :empty选择器 :empty选择器用来选择没有子元素或文本内容为空的所有元素
一、CSS特性 1.继承：子元素继承父元素的某些样式（因为有些元素有默认值，所以它们就不用继承父元素的）。 ...哪些css样式可以直接被继承： [1]:文本相关属性:如font-size、font-family、line-height、text-index等。 ...二、CSS选择符 1.CSS选择符就是要控制的对象，要想对某一元素进行控制，有两种方式。 1).使用id选择器，要求id在网页中必须具有唯一性。...六、CSS控制边框属性 语法：border:border-width border-style border-color.(如果只写border，则后面紧跟着的是粗细、样式、颜色三个子属性)。...[2].内联元素：{display:inline}内联元素只能容忍文本和其他内联元素，它允许其他元素与其同一行，但宽度和高度变得不起作用，常见内联元素有：em、span、a等（不能设置宽和高，不影响换行
其中，子节点接口包括firstChild（第一个子节点）和lastChild（最后一个子节点）等属性，同级节点接口包括nextSibling（紧邻在后的那个同级节点）和previousSibling（紧邻在前的那个同级节点...image.png 4.查询元素有几种常见的方法？ES5的元素选择方法是什么?...ES5的方法： document.querySelector():返回匹配指定的CSS选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null。...document.querySelectorAll():返回匹配指定的CSS选择器的所有节点，返回的是NodeList类型的对象。...ct2.removeChild(ct2.childNodes[1]); //将ct2元素下的第一子元素删除，即删除newspan 6.element.classList
结构选择：使得开发者可以选择基于文档树结构的特定元素，如第一个子元素、最后一个子元素、奇数或偶数位置的子元素等。 增强交互性：通过伪类，开发者可以实现更加动态和交互性强的网页效果。...:first-child 和 :last-child :first-child和:last-child伪类分别用于选择父元素的第一个和最后一个子元素。...:empty :empty伪类用于选择没有任何子元素（包括文本节点）的元素。 div:empty { display: none; } 4....伪类和伪元素有什么区别？ 伪类用于选择元素的特定状态或特性，而伪元素用于选择元素的一部分内容。伪类以冒号（:）开头，伪元素以双冒号（::）开头。 2. 如何在不同浏览器中兼容伪类？...伪类选择器对性能有影响吗？ 伪类选择器可能会对性能产生影响，特别是在大型项目中。应尽量简化选择器，减少嵌套层级，并优先使用性能较好的伪类。
子元素过滤选择器 ——5.1 :first-child和:last-child :first-child表示第一个子元素，:last-child表示最后一个子元素。...举个例子：div:first返回的是整个DOM文档中第一个div元素，而div:first-child是返回所有div元素下的第一个元素合并后的集合。...这里有个问题：如果一个元素没有子元素，:first-child和:last-child会返回null吗？...——5.2 :only-child 当某个元素有且仅有一个子元素时，:only-child才会生效。...:text（取单行文本框元素）和:password（取密码框元素） 这两个选择器分别和属性选择器$('input[type=text]')、$('input[type=password]')等同。
1. jQuery选择器 - 选择器都是以 $() 开头的 基础选择器 选择器 描述 id选择器 指定id元素 class选择器 遍历css类元素 element元素 遍历HTML元素 *选择器 遍历所有元素...简单伪类选择器 伪类选择器 说明 :not(selector) 选择除了某个选择器之外的所有元素 :first或first() 选择某元素的第一个元素 :last或last() 选择某元素的最后一个元素...： 不分元素类型的 选择器 说明 :first-child 选择父元素的第一个子元素 :last-child 选择父元素的随后一个子元素 :nth-child(n) 选择父元素下的第n个或奇偶元素,n的值为..."整数或odd或even" :only-child 选择父元素中唯一的子元素(该父元素只有一个子元素) 区分元素类型的 选择器 说明 :first-of-type 选择同元素类型的第一个子元素 :last-of-type...) 选择包含选择器所匹配元素的元素 :empty 选择所有不包含子元素或者不包含文本的元素 :parent 选择含有子元素或者文本的元素 $("div:contains('刘
正文-CSS基础 1.结构和语法 首先需要清楚，CSS 职责是控制 HTEM 文档里的文本内容在网页上样式呈现的效果，写的每一个样式最终是通过选择器作用到具体的元素上面。 工作原理 ?...最后，通过 CSS 的选择器将相对应的样式作用到 DOM 中选择器找到的元素节点，然后浏览器渲染呈现在网页上。 结构 ?...同时满足同层级，且在 p 元素后面的兄弟元素有两个，第三个 a 元素和第四个 a 元素，因此这里可以匹配到这两个元素。...因此被选择器匹配到的元素，都是直接将 CSS 样式作用到整个元素上，也就是作用到整个文本内容上。...伪类选择器相对来说，比较多，如下： :first-child 选择元素的第一个子元素 :last-child 选择元素的最后一个子元素 :only-child 选取元素的唯一一个子元素 :only-of-type
接下来，我们将介绍如何使用CSS来美化这个HTML文档。 2. CSS 基础 CSS用于控制HTML元素的外观和布局。它通过选择器（selector）和属性（property）来定义样式规则。...以下是一个简单的CSS示例，它将元素的文本颜色设置为红色： h1 { color: red; } 在上面的代码中，h1是选择器，表示选择所有元素。...ID 选择器 ID选择器用于选择页面中的唯一元素。与类不同，每个ID在文档中只能出现一次。...定义ID选择器如下： #my-id { background-color: yellow; } 然后，在HTML中使用ID： 这个元素有一个黄色背景。...一些常见的伪类包括:hover（鼠标悬停时应用样式）、:active（元素被激活时应用样式）和:first-child（选择第一个子元素）。
元素 ele,ele 并列选择器 h1,h2 选择所有h1元素和h2元素 ele ele 后代选择器 div p 选择div元素内的所有p元素 :link 伪类选择器 a:link 选择未访问链接 :visited...p:first-letter 选择每一个p元素的第一个字母 ::first-line 首行选择器 p:first-line 选择每一个p元素的第一行 ---- CSS1版本有我们最常使用的经典选择器...:empty 空标签选择器 div:empty 选择无任何子元素（包括文本节点）的div元素 :target 目标元素选择器 #new:target 选择当前活动的#new元素（包含锚名称点击的URL...##空元素选择器## :empty就是选择真正的空元素，内部没有任何子元素，文本节点也不能有 举个例子 1 2 3 p:empty::before...## ::selection是CSS3新增的选择器 它用来匹配突出显示的文本（用鼠标选择文本） 浏览器有默认的样式（背景为蓝色，字体为） this is a long long text..
var title = document.getElementsByClassName("title"); 查看示例程序 2.5 CSS单元素选择器 通过CSS样式表选择器的强大语法，来选择元素。...//选取第一个h1元素 查看示例程序 2.6 CSS多元素选择器 这是最强大的终极选择器 var h1s = document.querySelectorAll("h1"); //返回所有h1标签元素...var children = node.childNodes; 查看示例程序 3.1.3 首子节点-firstChild 返回第一个子节点。...var first = node.firstChild; 查看示例程序 3.1.4 尾子节点-lastChild 返回最后一个子节点。...var h1 = document.createElement("h1"); 查看示例程序 6.2 创建文本节点-createTextNode 创建纯文本节点。
"+"，匹配与之相邻、同时拥有相同父节点的节点（如若中间存在文本节点，文本节点将被忽略）。 ...下面的第一个p标签将被h1+p{}匹配： 我是标题 我是纯粹的文本节点 我是文字 我也是文字 广义兄弟选择器即"~"...此外CSS2还支持了:first-child和:lang，需要注意的是:first-child是对元素本身状态的描述，而非其它元素，比如li:first-child的意思是“这个li是第一个子节点”，而非...“li元素里面的第一个子节点”，这也是伪类和伪元素容易混淆的原因所在（第九点有说明）。...举一个最容易混淆的例子p:first-child和p:first-letter，乍一看以为两个都是伪元素，其实不然，:first-child只是对p这个元素属性的一个描述，也就是说这个p是其父级元素的第一个子节点
作者 | Jeskson 来源 | 达达前端小酒馆 HTML5和CSS3开发基础与应用，详细说明HTML5的新特性和新增加元素，CSS3的新特性，新增加的选择器，新的布局，盒子模型，文本，边框，渐变...HTML5的介绍，常用的元素和属性，表单相关元素和属性，CSS3新添加的选择器，CSS3新的属性。 了解HTML5，和现在主流的浏览器的，与基本语法。...样式，class用于匹配css样式的class选择器，dir用于设置元素中内容排列的方向，有ltr和rtl两个属性。...， warp默认值为soft，在表单中提交时，textarea中文本不换行， 当提交表单时，如果wrap="hard",则提交的文本会包含换行符 css3选择器 兄弟选择器，2.新增的属性选择器...n个子元素 :noly-child 该元素是它的父元素的唯一子元素 :first-of-type 该元素是同级同类型元素中第一个元素 :last-of-type 该元素是同级同类型元素中最后一个元素 :
它的子节点是一个文本节点和我们的一些 元素对应的节点。...这些 SPAN结点也是父节点，它们各自的文本节点就是它们的子节点： P ├─ "Let's use:" ├─ SPAN | └─ "Cascading" ├─ SPAN...伪类（Pseudo-classes）： 匹配处于确定状态的一个或多个元素，比如被鼠标指针悬停的元素，或当前被选中或未选中的复选框，或元素是DOM树中一父节点的第一个子节点。...你可能希望某个元素在处于某种状态下呈现另一种样式，例如当鼠标悬停在元素上面时，或者当一个复选框被禁用或被勾选时，又或者当一个元素是它在 DOM 树中父元素的第一个子元素时。...第三个和第四个选择器在链接文本颜色的样式上进行竞争——第二个选择器获胜，使文本变白，因为缺少一个元素选择器，缺少的选择器被换成类选择器，它的值是十，而不是个位。所以专用性值为113和104。
"文本的会变色 $('dd:contains("jQuery")').css('color', '#FF0000'); }); 下面的代码，第一个dd会变色 ?...子元素过滤选择器 ——5.1 :first-child和:last-child :first-child表示第一个子元素，:last-child表示最后一个子元素。...这里有个问题：如果一个元素没有子元素，:first-child和:last-child会返回null吗？...——5.2 :only-child 当某个元素有且仅有一个子元素时，:only-child才会生效。...:text（取单行文本框元素）和:password（取密码框元素） 这两个选择器分别和属性选择器$('input[type=text]')、$('input[type=password]')等同。
该部分主要为CSS3新增的选择器 接上一篇 CSS（CSS3）选择器（1） 一.通用兄弟选择器: 24：E ~ F，匹配任何E元素之后的同级F元素。...h1:not(.name) { color: red; } /*其含义是，匹配所有h1元素的类名不为name的h1元素，如果:not选择器前面不带指明的元素是无效的*/...30：E:empty，匹配一个不包含任何子元素的元素，包括文本节点。...input::placeholder{ color:red; } 至此，CSS（CSS3）选择器的简单说明笔记就到这里结束了，其实这些内容包含了CSS（CSS3）世界的绝大多数常用选择器，当然，...参考：css选择器笔记，30个你必须熟记的css选择器，MDN-docs-选择器介绍，HTML5和CSS3权威指南（第3版下册-庐陵牛）第十九章，before和after伪元素的用法。
该部分主要为CSS3新增的选择器 接上一篇 CSS（CSS3）选择器（1） 一.通用兄弟选择器: 24：E ~ F，匹配任何E元素之后的同级F元素。...30：E:empty，匹配一个不包含任何子元素的元素，包括文本节点。...nth-last-of-type(even){ background:red; } 37：E:first-of-type，匹配父元素下使用同种标签的第一个子元素...input::placeholder{ color:red; } 至此，CSS（CSS3）选择器的简单说明笔记就到这里结束了，其实这些内容包含了CSS（CSS3）世界的绝大多数常用选择器，当然，...参考：css选择器笔记，30个你必须熟记的css选择器，MDN-docs-选择器介绍，HTML5和CSS3权威指南（第3版下册-庐陵牛）第十九章，before和after伪元素的用法。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
