css选择器 | 易学教程

CSS选择器分类整理

阅读更多关于 CSS选择器分类整理

读完《CSS权威指南》，对选择器有如下整理： selector 本质上是执行元素样式匹配规则，我们可以利用它来限定某些元素选择器类型：  1.通配选择器 * 匹配任意 2.元素选择器 p 3.类选择器 .class 4.ID选择器 #id 5.属性选择器 element[rep] (不常用)  1.伪类(一些在某种行为会被自动定义的类,有点类似游览器会自动帮我管理这些内置类)  1.link 2.visited 3.focus 4.hover 5.active  1.first-child 2.last-child 3.nth-chlid(an+b) 4.not()  1.empty 2.伪元素(向文档中插入的假想元素)  before after 选择器规则：  1.分组逗号分隔(相同属性聚集) 2.交集  1.后代选择器空格 2.子代选择器 > 3.兄弟选择器 + 来源： https://www.cnblogs.com/sefaultment/p/10195394.html

CSS选择器详解

阅读更多关于 CSS选择器详解

本文全部基于HTML进行讲解，没有考虑XML，XHTML的情况，请知悉。一、元素选择器通配选择器语法： * { sRules } 说明：选定文档所有的元素示例： * { 　　color: red; } <div>我是div</div> 元素选择器语法： E { sRules } 说明：选定指定的文档元素E 示例： p {　　color: red; } <p>我是p</p> 二、类选择器和ID选择器类选择器语法： E.myclass { sRules } 说明：选定class属性包含myclass的文档元素E 示例： .myClass { 　　color: red } <div class="myclass">我是div</div> 多类选择器语法： E.myclass.myotherclass { sRules } 说明：选定class属性包含myclass以及myotherclass的文档元素E 示例： .myClass.myotherclass { 　　color: red } <div class="myclass myotherclass">我是div</div> ID选择器语法： E#myid { sRules } 说明：选定id属性值为myid的文档元素E 示例： #myid { 　　color: red; } <div id="myid"

jQuery初学者笔记一

阅读更多关于 jQuery初学者笔记一

jQuery初学者笔记一 Mirror王宇阳 by jQuery语法 jQuery语法是通过选取HTML元素，并对选取的元素进行操作基础语法：所有jQuery语句用“$”符号开始 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p>点击消失</p> <p>点击消失</p> <script src="jq/jquery-3.4.1.min.js"></script> <script> $(document).ready(function(){ //固定的jQ开头 $("p").click(function(){ // 选取p标签，并绑定clisk事件 $(this).hide(); //事件触发使用hide()方法（隐藏当前标签属性） }) }) </script> </body> </html> jQuery函数位于一个document ready函数中，我们需要在js中加载该函数文档 // jQuery入口函数 $(document).ready(function(){ //jQuery代码 }); /*******************************/ $(function(){ //jQuery代码 }); 选择器语法:

CSS 选择器详解

阅读更多关于 CSS 选择器详解

文章目录 1. CSS 选择器 2. 思维导图 3. 选择器分类 3.1 基础选择器 3.2 组合选择器 3.3 复杂选择器 1. CSS 选择器要想操作页面上的元素，首先就得 "拿" 到它，CSS 中，称之为选择器。 2. 思维导图 3. 选择器分类 3.1 基础选择器 <!DOCTYPE html> < html lang = " en " > < head > < meta charset = " UTF-8 " > < title > CSS 选择器 </ title > < style > /*通配符选择器，不推荐*/ * { margin : 0 ; padding : 0 ; font-size : 14px ; } /*元素选择器，又称标签选择器*/ span { color : red ; } /*类选择器，class*/ .div_class { width : 100px ; height : 100px ; background-color : greenyellow ; } /*id选择器，id*/ #div_id { width : 200px ; height : 100px ; background-color : lightblue ; } /*群组选择器，*/ .div_class, #div_id { font-size : 20px

JQ选择器

阅读更多关于 JQ选择器

1.#id 查找ID 为myDIV的元素 <body> <div class="mydiv"><p> I am little D!</p></div> <div class="opl"> <p>小弟</p> </div> <script src="../js/jquery-3.1.0.min.js"></script> <script type="text/javascript"> console.log($(".mydiv")); </script> </body> 2.element 用于搜索的元素指向DOM节点的标签名 <body> <div>div</div> <div>div2</div> <span>span</span> <script src="../js/jquery-3.1.0.min.js"></script> <script type="text/javascript"> console.log($("div")); </script> </body> 3. .class 获取类 <div class="notMe">div class="notMe"</div> <div class="myClass">div class="myClass"</div> <span class="myClass">span class="myClass"</span>

CSS3 :nth-of-type() 选择器

阅读更多关于 CSS3 :nth-of-type() 选择器

定义和用法 :nth-of-type( n ) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素. n 可以是数字、关键词或公式。 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 div p:nth-of-type(3){ 8 color:#fff; 9 background:#333; 10 } 11 </style> 12 </head> 13 <body> 14 <div> 15 <p>第一行</p> 16 <p>第二行</p> 17 <p>第三行</p> 18 <p>第四行</p> 19 <p>第五行</p> 20 </div> 21 </body> 22 </html> 1.Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1） 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 div p:nth-of-type(odd){ 8

css选择器总结

阅读更多关于 css选择器总结

CSS1选择器选择器解释说明 E 类型选择器选择指定类型的元素(指定标签) E#myid ID选择器 id等于myid的E元素,E若省略则表示id等于myid的任意元素 E.class 类选择器所有class等于指定class的E元素.若E省略E的用处同上 E F 包含选择器选择包含在E元素中的F元素.E和F可以是其它选择器,如:E.abc F.cde a:link 链接伪类匹配已定义了href属性的a元素 a:visited 链接伪类匹配已访问过的a元素 E:active 用户操作伪类选择被激过的E元素,如被鼠标按住 E:hover 用户操作伪类正被鼠标经过的E元素 E:focus 伪选择器匹配获得焦点的E元素 E::first-line 伪选择器 E元素内的第一行文本 E::first-letter 伪选择器匹配E元素内的第一个字符 CSS2选择器选择器解释说明 * 通配选择器选择文档中所有的元素 E[foo] 属性选择器匹配E元素,且它定义了foo属性,若E省略,则表示所有定义了foo属性的任意元素 E[foo=”bar”] 属性选择器匹配E元素,且它定义了foo属性,且值是bar,E省略的情况同上 E[foo~=”bar”] 属性选择器匹配E元素,且它的foo属性中有bar,如:<a title=”bar bar1 bar2”></a

css选择器四大类：基本、组合、属性、伪类

阅读更多关于 css选择器四大类：基本、组合、属性、伪类

什么是选择器？选择器的作用是通过它可以找到元素，把css样式传递给元素！css选择器主要分为：基本选择器、属性选择器、组合选择器与伪类选择器四个大类！ css基本选择器基本选择器又分为：*通配符、标签选择器、class选择器、id选择器，在这里需要注意的编程思想在css层叠样式表中元素有且仅有一个id。注意以下几点1.id唯一性2.元素id不相同，就像每一个人只有一个身份证一样，ID就代表身份证3.class选择器不具有唯一性，它可以重复使用！此外这个*通配符代表的是全局 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>css基本选择器</title> 7 <style type="text/css"> 8 *{ 9 color: skyblue; 10 }/**通配符*/ 11 div{ 12 color: red; 13 }/*标签选择器*/ 14 .box{ 15 color: steelblue; 16 }/*class选择器*/.box{color: steelblue;}也可以写成*.box{color:

css的核心原理分为优先级原则与继承原则两大部分

阅读更多关于 css的核心原理分为优先级原则与继承原则两大部分

css原理：1.优先原则=>后解析的内容会覆盖之前解析的内容（所谓解析就是读取的css样式）2.继承原则=>嵌套里面的标签拥有外部标签的某些样式，子元素可以继承父元素的属性 1》优先原则针对选择器：a.同一个选择器从上往下读取执行css样式 b.同一类选择器从上往下执行 c.不同类型的选择器优先级，先执行低优先级再执行高优先级，比方基本选择器就是从*通配符<标签div<class选择器<id选择器 d.外部样式与内部样式合并之后再一起执行，根据从上往下执行顺序读取 e.内联样式也就是行内样式是最后执行的 f.加了！important字段是最后执行的 2》继承原则：2.1跟文字样式相关的可以被继承/其他的不能继承 2.2块级元素的宽度如果不设置会继承父元素的宽度，高度取决于它的内容 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>css的核心原理分为优先级原则与继承原则两大部分</title> 7 <!-- 优先原则针对选择器：a.同一个选择器从上往下读取执行css样式 8 b.同一类选择器从上往下执行 c.不同类型的选择器优先级

jq 选择器

阅读更多关于 jq 选择器

层次选择器： $('div p');//选取div下的所有的p元素 $('div>p').css('border','1px solid red');//只选取div下的直接子元素 //相邻的元素 $('div ~ p).css('border','1px solid red');与$('div').nextAll('p')等价;//表示div后面的所有p兄弟元素 $('div ~ *').css('border','1px solid red');//表示div后面的所有兄弟元素 $('div +p').css('border','1px solid red');与$('div').next('p')等价//这种写法表示div后只找紧挨着的第一个兄弟元素，并且该元素是p。获得兄弟元素的方法： next(); //当前元素之后的紧邻着的第一个兄弟元素（下一个） nextAll();//当前元素之后的所有兄弟元素 prev();//当前元素之前的紧邻着的兄弟元素（上一个） prevAll();//当前元素之前的所有兄弟元素 siblings();//当前元素的所有兄弟元素基本过滤选择器： $('p:first')与$('p').first()是等价的。获取所有p元素中的第一个P元素 $('p:last')与$('p').last() $('p:eq(2)'

订阅 css选择器