1、E:nth-child(n):匹配元素类型为E且是父元素的第n个子元素<style type="text/css"> .list div:nth-child(2){background-color:red;} </style> ...... <div ><h2>1</h2><div>2</div><div>3</div><div>4</div><div>5</div> </div><!-- 第2个子元素div匹配 --> 2、E:first-child:匹配元素类型为E且是父元素的第一个子元素3、E:last-child:匹配元素类型为E且是父元素的最后一个子元素4、E > F E元素下面第一层子集5、E...
1.通配选择器匹配所有元素 *{color:red;}2.标签选择器匹配所有p元素 p{color:red;}3.ID选择器匹配ID="div1"的元素 #div1{color:red;}4.类选择器匹配class="red"的元素,CSS和HTML对大小写不敏感,但ID是大小写敏感的。 .red{color:red;} 应用多个class,类名中间用空格隔开,class="red green"。元素将应用red和green的所有规则,重复规则只有一个生效,但不取决于class中类名顺序,而是CSS定义的顺序。 1<!DOCTYPE ht...
一、表单标签<form> 功能:表单用于向服务器传输数据,从而实现用户与Web服务器的交互。 表单能够包含input系列标签,比如文本字段、复选框、单选框、提交按钮等等。 表单还可以包含textarea、select、fieldset和 label标签。表单属性 action: 表单提交到哪。一般指向服务器端一个程序,程序接收到表单提交过来的数据(即表单元素值)作相应处理,比如https://www.sogou.com/web method: 表单的提交方式 post/get默...
我们目前接触到的选择器:.class #id div ......不了解的选择器:a>b a+b [a~=b] [a|=b]...... 一下说举5 6 7 8为css3中的定义1.a>bdiv>p 选择父元素为 <div> 元素的所有 <p> 元素。2.a+bdiv+p 选择紧接在 <div> 元素之后的所有 <p> 元素。3.[a~=b][title~=flower] 选择 title 属性包含单词 "flower" 的所有元素。4.[lang|=en]选择 lang 属性值以 "en" 开头的所有元素。5.[a^=b]a[src^="https"] 选择其 src 属性值以 "h...
常见的基于关系的选择器选择器选择的元素A E元素A的任一后代元素E (后代节点指A的子节点,子节点的子节点,以此类推)A > E元素A的任一子元素E(也就是直系后代)E:first-child任一是其父母结点的第一个子节点的元素EB + E元素B的任一下一个兄弟元素EB ~ EB元素后面的拥有共同父元素的兄弟元素E你可以任意组合以表达更复杂的关系。你还可以使用星号(*)来表示”任意元素“。一般情况下,如果你提高了某个选择器的的确定度,你便提高它...
CSS选择器.class.intro选择 class="intro" 的所有元素。1#id#firstname选择 id="firstname" 的所有元素。1**选择所有元素。2elementp选择所有 <p> 元素。1element,elementdiv,p选择所有 <div> 元素和所有 <p> 元素。1element?elementdiv p选择 <div> 元素内部的所有 <p> 元素。:后代选择器1' ref='nofollow'>element>elementdiv>p选择父元素为 <div> 元素的所有 <p> 元素。(子选择器,只选子代)2element+elementdiv+p选择所有{紧接...
先看下下面的例子<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><div style="background-color:#2459a2;height:24px;">欢迎来到京东商城 </div></body></html>在标签上设置style属性:background-color:#2459a2height:24pxcolor可以参照RGB颜色对照表,一种码对应一种颜色当然我们也可以不在body里面写,因为方便模板重用,我们可以把style模板放到head里面页面效果如下: (1)i...
一、CSS基本选择器1、标签选择器a<a href=”#”>word<a>p<p>p段落</p>h1<h1>标题文本</h1>2、ID选择器#p1<p id=”p1”></p>#p2<p id=”p2”></p>3、类选择器.myclass<p class=”myclass”></p>.myclass2<p class=”myclass”></p>二、CSS复合选择器1、交集选择器“交集”选择器由两个选择器直接连接构成,其结果是选中二者各自元素范围的交集。其中第一个必须是标记选择器,第二个必须是类别选择器或者ID选择器。这两个选择器直接不...
基础选择器一、标签选择器p{。。。} h1{…..} css不区分大小写,建议小写1、所有的标签都可以作为标签选择器去使用2、无论这个标签藏多深,一定能够被选上3、选择页面所有的,而不是具体某一个;标签选择器,选择的是页面上所有这种类型的标签,所以经常描述“共性”,无法描述某一个元素的“个性”的。 二、id选择器所有的标签都可以有id属性来标识标签。Id属性的值:1)只能是数字字母下划线,必须以字母开头 ,不能和标签同...
html 在一个网页中负责的事情是一个页面的结构 css(层叠样式表) 在一个网页中主要负责了页面的数据样式。编写css代码的方式: 第一种: 在style标签中编写css代码。 只能用于本页面中,复用性不强。 格式 : <style type="text\css"> 编写css的代码。 </style> 例子: <style type="text\css"> a{ color:#F00; text-decoration:none...
PPT:Taming CSS Selectors作者:Nicole Sullivan 翻译:ytzongCSS 文件的大小和所引起的 HTTP 的请求数是 CSS 性能的最关键因素回流(reflow)和渲染时间(非常!)没那么重要副本(duplication)比陈旧的规则(stale rules)更糟糕因为我们有工具处理后者定义缺省值不要在每处都重复编码不好的:#weatherModule h3{color:red;}#tabs h3{color:blue;}推荐:h1, .h1{...}h2, .h2{...}h3, .h3{...}h4, .h4{...}h5, .h5{...}h6, .h6{...}用单...
选择器:CSS3新增了许多灵活查找元素的方法,极大的提高了查找元素的效率和精准度。CSS3选择器与jQuery中所提供的绝大部分选择器兼容一 属性选择器:a) E[attribute] 表示存在attr属性即可;div[class]b) E[attr=val] 表示属性值完全等于val;div[class=mydemo]c) E[attr*=val] 表示的属性值里包含val字符并且在“任意”位置;div[class*=mydemo]d) E[attr^=val] 表示的属性值里包含val字符并且在“开始”位置;d...
/*分配符选择器*/*{font-size: 10px;margin: 0px;padding: 0px;}/*标签选择器*/p{font-size: 20px; }/*class类选择器*/.test_class{font-size: 40px;}/*id选择器 ——只能用一次 否则不规范*/#test_id{font-size: 60px;}/*分组选择器*/span,#test_id,.test_class,.my_class{font-size: 200px;}/*后代选择器:中间是空格 两边一个是父选择器名字(包括标签,类 ,id),另一个是子选择器名(包括标签 ,类,id)*/ol li{color: aqu...
或许大家平时总是在用的选择器都是: id class 以及标签选择器。可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选或许大家平时总是在用的选择器都是:#id .class 以及标签选择器。可是这些还远远不够,爱创课堂为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助。更多精彩关注:http://www.icketang.com/1 *:通用选择器* { margin:0; padding:0; }*选择器是选择页面上的全部元...
对于我们前端人员来说,必须要注重的就是页面的美观,一个页面的好看与否就肯定要看你css的样式写的水平怎么样,而要全面利用css写好网页当然也要熟悉css选择器的使用,只有熟练掌握了css选择器,才不至于在书写css代码的时候掉进坑里。 最常见的CSS选择器是元素选择器。换句话说,文档的元素就是最基本的选择器。如果设置HTML的样式,选择器通常将是某个HTML元素,比如p、h1、em、a,甚至可以是html本身。在W3C标准中,元...