css选择器 | 易学教程

CSS：让编写更高效的选择器

阅读更多关于 CSS：让编写更高效的选择器

高效的CSS已经不是一个新的话题了，也不是我一个非得重拾的话题，但它却是我在工作之时，所感兴趣的，关注已久的话题。有很多人都忘记了，或在简单的说没有意识到，CSS在我们手中，既能很高效，也可以变得很低能。这很容易被忘记，尤其是当你意识到你会的太少，CSS代码效率很低的时候。下面的规则只真正被应用到那些速度要求很高，有成百上千的DOM元素被绘制在页面上的大型网站。但是，实践出真理，多知道一点总是好的。 CSS 选择器对我们大多数人来说，CSS选择器并不陌生。最基本的选择器是元素选择器(比如div),ID选择器(比如#header)还有类选择器(比如.tweet)。一些的不常见的选择器包括伪类选择器(:hover)，很多复杂的CSS3和正则选择器，比如：first-child，class ^= “grid-”。 CSS选择器具有高效的继承性， CSS选择器效率从高到低的排序如下： ID选择器比如#header 类选择器比如.promo 元素选择器比如 div 兄弟选择器比如 h2 + p 子选择器比如 ul > li 后代选择器比如 ul a 通用选择器比如 * 属性选择器比如 type = “text” 伪类/伪元素选择器比如 a:hover 我们不得不提的是，纵使ID选择器很快、高效，但是它也仅仅如此。从CSS

css学习

阅读更多关于 css学习

**一个选择器的优先级可以说是由四个部分相加 (分量)，可以认为是个十百千 — 四位数的四个位数： ** 千位：如果声明在 style 的属性（内联样式）则该位得一分。这样的声明没有选择器，所以它得分总是1000。百位：选择器中包含ID选择器则该位得一分。十位：选择器中包含类选择器、属性选择器或者伪类则该位得一分。个位：选择器中包含元素、伪元素选择器则该位得一分。 CSS构建块级联和继承鼠标悬停时链接边框样式 /* specificity: 0033 */ div div .nav:nth-child(2) a:hover { border: 10px double black; } CSS选择器在CSS中，选择器用于定位我们要设置样式的网页上的HTML元素。它告诉浏览器应选择哪些HTML元素以将规则内的CSS属性值应用于它们。选择器选择的一个或多个元素称为选择器的主题。大多数选择器都是在Level 3 Selectors规范（这是一个成熟的规范）中定义的，因此您会发现这些选择器具有出色的浏览器支持。选择器列表选择器类型 1. 类型，类别和ID选择器该组包括针对HTML元素（例如）的选择器 <h1> 它还包括针对一个类的选择器： .box { } 或者，ID： #unique { } 2.属性选择器

网页设计博客2

阅读更多关于网页设计博客2

3.1.1CSS样式规则：格式：选择器{属性1：属性值；属性2:属性值2；属性3：属性值3；} 选择器严格区分大小写，属性和值不区分大小写。 *如果属性的值有多个单词组成且中间包含空格，则必须为这个属性值加上英文状态的引号 *在CSS代码中空格是不被解析的 3.1.2引用CSS样式表： 1.行内式：也称为内联样式，是通过标记的style属性来设置元素的样式，基本语法如下：< 标记名 style=“属性1：属性值1；属性2：属性值2；属性3:属性值3；”>内容< /标记名> 行内式只对所在的标记及嵌套在其中的子标记起作用。没有做到结构与表现的分离。只有在样式规则较少且只在该元素上使用一次，或则需要临时修改某个样式规则时使用。 2.内嵌式：是将CSS代码集中写在HTML文档的< head >头部标记中，并且用< style >标记定义，基本语法如下： < head> < style type=“text/css”> 选择器 {属性1：属性值1；属性2：属性值2；属性3：属性值3；} < /style> < /head> < style>标记一般位于< head>标记中< title>标记后，也可以放在HTML的任何地方。必须设置type的属性值为text/css 3.链入式：是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过< link/

自动化学习-Day08

阅读更多关于自动化学习-Day08

HTML标签行内标签 <span>行内标签或叫内联标签行内自己有多大就占多大白板标签没有附着任何css样式的就叫做白板标签块级标签 <div>块级标签无论自己有多大都占面一整行，伪白板标签段落标签 <p> 换行标签 <br> 标题标签 <h1>标题标签</h1> <h2>标题标签</h2> <h3>标题标签</h3> <h4>标题标签</h4> <h5>标题标签</h5> <h6>标题标签</h6> 文本框，默认是text 文本框 name属性是跟后端交互的key value属性是跟后端交互的值 <input type="text" placeholder="请输入用户名" value="admin" name="username"> <input type="password" placeholder="请输入密码" name="passwd"> radio单选 <span>男</span><input type="radio" name="sex"> <span>女</span><input type="radio" name="sex"> check box 多选框 <span>奔驰</span><input type="checkbox" checked="checked"> <span>宝马</span><input type="checkbox"

html+css快速入门教程（5）

阅读更多关于 html+css快速入门教程（5）

练习： 1.画盒子1 2.画盒子2 3.京东特色购物 4.京东发现好货 5.京东玩3c 7.3 定位通过使用 position 属性，我们可以选择 3 种不同类型的定位，这会影响元素框生成的方式。 relative 相对定位的参照物是原来自己的位置，元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。 <html> <head> <style type="text/css"> h2.pos_left{ position:relative; left:-20px } h2.pos_right{ position:relative; left:20px } </style> </head> <body> <h2>这是位于正常位置的标题</h2> <h2 class="pos_left">这个标题相对于其正常位置向左移动</h2> <h2 class="pos_right">这个标题相对于其正常位置向右移动</h2> <p>相对定位会按照元素的原始位置对该元素进行移动。</p> <p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p> <p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p> </body> </html> absolute 绝对定位的参照物是有定位属性的上级元素，一层一层往外找定位的参照物

HTML常用标签及CSS样式选择器

阅读更多关于 HTML常用标签及CSS样式选择器

HTML常用标签及CSS样式选择器 html部分 <!DOCTYPE html> <html> <head>   <link rel="stylesheet" type="text/css" href="css/mycss.css" />  <style> h1{ color: red; } </style> <meta charset="utf-8" /> <title></title> </head> <body>   <a href="http://www.baidu.com">我是超链接，链接地址是百度</a>  <form action="http://www.baidu.com" method="get/post"> <!-

五,JavaWeb简略的谈下前端技术<二>CSS层叠样式表

阅读更多关于五,JavaWeb简略的谈下前端技术CSS层叠样式表

最初的 web 页面只是在浏览器里边显示一些信息而已，后来随着互联网的发展，人们对页面的可观赏性要求越来越高，你网站做的难看，没人浏览啊，而且网站的功能越来越强大，如果这么多的页面没有一个很好的排版的话，简直就是乱七八糟，为此对于优化页面的需求也越来越高，但是 HTML 他没这个能力啊， HTML ：臣妾做不到啊 ~ 。为此为了弥补 HTML 的不足， W3C 组织又弄出来了一个新的东西，那就是 CSS ，然后就是 HTML 来负责内容， CSS 用来负责美观。 5.1 引用方式 CSS 有 4 种定义与引用方式：行内样式，内嵌式，链接式和导入式。用的时候可以根据实际的情况来选择合适的定义方式。 1 ，行内样式：行内样式是一种比较直接的一种样式，它通过 style 属性直接定义在 HTML 标记内，这种样式比较容易被初学者接受，但是非常不灵活。例子如下： <p style= ” color:blue ” > 文字 </p> 把段落里边的颜色设置成蓝色。 2 ，内嵌式：内嵌式样式表就是在页面中使用 <style></style> 标记将 CSS 样式包含在页面中，例如： <style> P{ color:red; } </style> 这样的话，在 html 文档中，所有 p 标记的内容都是红色字体的。但是呢，我们一个网站里边有很多的网页的

浅谈CSS 选择器

阅读更多关于浅谈CSS 选择器

A 标签HTML 选择器 body { padding : 0px ; margin : 0px ; background-color : #ffdee0 ; } B 类别CLASS 选择器 <style type="text/css"> .hongkong { color : blue ; } .hunang { color : red ; } </style> ...... <p class="hongkong">刘德华</p> <p class="hongkong">张学友</p> <p class="hunang">何炅</p> <p class="hunang">汪涵</p> C 专用ID 选择器 <style type="text/css"> #wanghan { color : blue ; } </style> ...... <p>刘德华</p> <p>张学友</p> <p>何炅</p> <p id="wanghan">汪涵</p> D 选择器组合筛选 <style type="text/css"> /* 只有<h1>标签中class值:"hongkong"的改成蓝色 */ h1.hongkong { color : blue ; } /* 只有<h1>标签中id值:"hunang"的改成红色 */ h1#hunang { color : red ; } <

css-标签选择器

阅读更多关于 css-标签选择器

css-选择器相关 1.选择器是什么? 　　在html学习当中,我们写完了html页面的时,我靠,感觉不对劲,别人的一个按钮都能花样奇多,我们却只是使用input的type="button"来实现按钮这个显示效果,但并没有美化效果,这时不必惊慌,刚出炉的html代码,就像素颜的她,需要化妆,才能映入眼帘,化妆得一步一步化,先在哪里点眉笔,再在哪里,都是有选择性,但是css它不知道你化哪里,这时候我们就需要对它说先去哪儿给我装饰,再去哪儿.接下来我们看下怎么指定它去化妆(渲染页面) 2.css基础选择器如下4类　　 id选择器,class选择器(类选择器),标签选择器以及通配符选择器(因为通配符选择器会遍历文档所有元素,在实际开放中,需要酌情使用),在html当中,有4个通用属性,id,class,title,style,通用属性就是在所有标签中都能设置这些属性,id选择器就是在标签的开始当中设置id名,class选择器就是在开始标签中设置class属性以及属性值 1 /* 标签选择器*/ 2 标签名{ 3 属性名:属性值; 4 属性名:属性值; 5 } 6 /*id选择器*/ 7 #id名{ 8 属性名:属性值; 9 属性名:属性值; 10 } 11 /*class选择器*/ 12 .class名{ 13 属性名:属性值; 14 属性名:属性值; 15 } 3.关联选择器　　

jQuery基础总结(后续整理)

阅读更多关于 jQuery基础总结(后续整理)

jQuery jQuery：是一个javascript库核心理念是write less,do more(写得更少,做得更多) 内部帮我们把几乎所有功能都做了封装，相比基于DOM、BOM的操作会更加简单，兼容性更好 jQuery引入本身是一个js文件 <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"> </script> 本地文件引入 <script src="jquery.js"></script> 另起一个script标签来写script代码或写在js文件里, 再 <script src="test3(3).js"></script>导入 JQuery和dom对象的转换 $ == Jquery dom对象 _> jq对象 $(dom对象) jq对象 _> dom对象 jq对象[0] 选择器 $('#d1') id选择器 var d1 = $('#d1'); -- jquery对象 -- jQuery.fn.init [div#d1] a.css({"background-color":"blue","height":"300px"}) var d = document.getElementById('d1'); -- 原生dom对象 jquery对象和dom对象之间不能调用互相的方法 a[0] --

订阅 css选择器