css选择器 | 易学教程

css中选择器的类型和权重大全

阅读更多关于 css中选择器的类型和权重大全

1. 选择器的类型和用法： 1.id选择器：#id{属性：属性值} 2.class选器 : .classname{属性：属性值} 3.类选择器：标签名{属性：属性值} 4. 特殊选择器：特殊选择器是除了上面三大类选择器之外的选择器，包括：群组选择，包含选择器，子元素选择器，伪类选择器群组选择器：选择符1，选择符2{属性：属性值} 包含选择器（后代选择器）：选择符1 选择符2 {属性：属性值} 子元素选择器：选择符1>选择符2{属性：属性值} 伪类选择器：标签名：后缀{属性：属性值} 例如： a:link{属性：属性值} 2.选择器的权重比较: 类型选择器：0001 class选择器：0010 id选择器： 0100 子元素选择器：0000 伪类选择器： 0010 内联样式权重： 1000 包含选择器权重：包含的选择符权重值之和注：通用选择器用法： {属性：属性值} *{margn:0;padding:0} //去除标签之间的间距来源： CSDN 作者：孤浪漂泊链接： https://blog.csdn.net/jdsfui/article/details/104719839

CSS常用选择器（通配符选择器，标签选择器，类选择器，id选择器.....），你知道多少？

阅读更多关于 CSS常用选择器（通配符选择器，标签选择器，类选择器，id选择器.....），你知道多少？

CSS常用选择器 CSS选择器的作用是从HTML页面中找出特定的某类元素，而常用的CSS选择器有如下几类，一起来看看吧！一、通配符选择器通配符选择器常用 ‘*’ 号表示，它是所有选择器里作用范围最广的，能匹配页面中所有的元素。基本语法格式：*{ 属性1：属性值1；属性2：属性值2；} 例子使用该选择器定义样式，清除所有HTML标记的默认边距。 *{ margin：0； /*定义外边距*/ padding：0； /*定义内边距*/ } 但实际开发中不建议使用通配符选择器，因为它设置的样式对所有的HTML标记都生效，不管标记是否需要该样式，反而降低了代码的执行速度。二、标签选择器标签选择器是指用HTML标记名称作为选择器，按标记名称分类，为页面中某一类标签指定统一的CSS样式。基本语法格式：标签名{ 属性1：属性值1；属性2：属性值2；} 所有的HTML标记名都可以作为标签选择器，例如a、body、p、h1等等。用标签选择器定义的样式对页面中该类型的所有标签都有效。例子使用p选择器定义HTML页面中所有段落的样式。 p{ font-size: 12px; color: #666; font-family:"微软雅黑"; } 标签选择器最大的优势是能快速为页面中同类型的标签统一样式，同时这也是它的缺点，不能设计差异化样式。三、类选择器类选择器使用**‘.’**

CSS基础选择器

阅读更多关于 CSS基础选择器

ID选择器 ID 选择器是用 “#” 号加 ID 名称 xxx 来表示，用来选择 HTML 中 id=“xxx” 的 DOM 元素 <span id="content">Hello World</span> #content{ color: red; } 这样 ID 为 content 的元素内容会呈现红色的效果了。 Tips：ID 选择器只能对一个元素生效，同一个页面里不允许出现两个 ID 相同的元素类选择器类选择器是用 “.” 号加 class 名称 xxx 来表示，用来选择 HTML 中class=“xxx” 的 DOM 元素 <ul> <li class="list-item"></li> <li class="list-item"></li> <li class="list-item"></li> <li class="list-item"></li> </ul> #list-item{ border-bottom: 1px solid #ccc; } 这样列表里所有的项就都有一个宽 1px 灰色的下边框了。 Tips：类选择器会选择到所有类名相同的 DOM 元素，没有数量限制通配选择器通配选择器使用星号来选择到页面里所有元素。用法如下： *{ margin: 0; padding: 0; } 上面这个样式就是把所有元素的内外边距都归零,效率较低，一般不建议使用

css引入方式与选择器

阅读更多关于 css引入方式与选择器

css引入方式 css引入方式一_行内行内样式: 在HTML标签中添加属性作用域最小,作用当前标签; 行内样式的优先级最高 <body> <h3 style="color: red;">h3标签</h3> <h3>哈哈</h3> </body> css引入方式二_内部内部样式: 在HTML页面里面写CSS代码, 一般写在 <head> 中, 使用标签 style , 属性: type="text/css" 作用是当前整个页面有效 <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> h3{color: chocolate;} </style> </head> <body> <h3>h3标签</h3> <h3>哈哈</h3> </body> </html> css引入方式三_外部外部样式: CSS样式定义在另一个文件中,后缀名.css (文本文件) 在HTML页面中,引入样式表, 使用link标签写在head中属性: href="css文件路径" | type="text/css" | rel="引入的文件和当前页面是什么关系" 作用范围最大,哪个页面引入,哪个有效 <html> <head> <meta charset="UTF-8"> <title></title>

CSS引入方式与选择器

阅读更多关于 CSS引入方式与选择器

参考 https://www.cnblogs.com/yuanchenqi/articles/5977825.html 引入方式方法一（标签里设置） <!DOCTYPE html> <html> <head> <title>Python</title> <link rel="icon" href="https://common.cnblogs.com/favicon.ico"/> <meta charset="utf-8"> </head> <body> <div style="color: #ffff77;background: crimson">你好</div> </body> </html> 方法二（head里面设置） <!DOCTYPE html> <html> <head> <title>Python</title> <link rel="icon" href="https://common.cnblogs.com/favicon.ico"/> <meta charset="utf-8"> <style> #hello{ color: crimson; background: cyan; } </style> </head> <body> <div id="hello">你好</div> </body> </html> 方法三(引入link 主要使用方法) <

CSS 引入方式选择器

阅读更多关于 CSS 引入方式选择器

---恢复内容开始--- CSS是Cascading Style Sheets的简称，中文称为层叠样式表，用来控制网页数据的表现，可以使网页的表现与数据内容分离。步骤：　　A.找到标签 B.操作标签一 CSS四种引入方式 1.行内式 <p style="background-color: rebeccapurple">hello yuan</p> 2.嵌入式 <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ background-color: #2b99ff; } </style> </head> 3.链接式 <link href="mystyle.css" rel="stylesheet" type="text/css"/> 4.导入式将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，<style>标记也是写在<head>标记中，使用的语法如下： <style type="text/css"> @import"mystyle.css"; 此处要注意.css文件的路径 </style>　注意：导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷

CSS引入方式，高级选择器

阅读更多关于 CSS引入方式，高级选择器

css引入方式： 1、内部样式 style标记在head标记中应用范围：当前整个页面中应用 2、行内样式 style属性 <p style="color:black; font-size:24px">行内样式</p> 应用范围：指定的标签内应用，优先级高于内部样式不太推荐用这种方式 3、外部样式声明：.css样式文件引入：链接方式：<link href="css文件" rel="stylesheet" type="text/css"/> 应用：多个页面中共享优先级：行间>内部>外部注：在有相同的样式时，才考虑优先 css高级选择器： 1.后代选择器：应用在具有嵌套关系的元素上选择器1 选择器2 ，各个选择器之间用"空格"隔开 2. 交集选择器：选择器1选择器2，各个选择器直接链接在一起进一步缩小选择范围 .clCSS 类选择器，应用在任何标记上 p .clCSS 后代选择器，应用在p标记上的子标记中 p.clCSS 交集选择器，应用在p标记上具有class=“clCSS” #p1 .cls :选择id属性为“p1”的标记，再在该标记中选择class 为“cls”的子标记 3.并集选择器：选择器1，选择器2，选择器3{}；应用：为不同选择器设置相同的样式注：其中的选择器是之前学的的任意选择器继承特性：具有嵌套关系的标记，外层标记叫父标记

五种css选择器的基础练习

阅读更多关于五种css选择器的基础练习

CSS的三种选择器在其中我对标签、类、id三种选择器进行了详细的讲解下面是我在复习之中，找到的一个css选择器的练习，其中除了刚说到的三种还讲到了后代/属性两选择器的特点； <!DOCTYPE HTML> <html> <head> <title>CSS选择器</title> <meta charset="UTF-8" /> <style type="text/css" > /* 为了看着方便给所有标签都加上边框，及设置一些默认的样式 */ body,input{font-size:18px;} input{border: 2px solid green;} div,span,p{border: 2px solid red;font-size:18px;} span{border-color: blue;margin-right:10px;} div,p{ width:350px;height:80px;padding:5px;} /* ----- 1.标签名选择器练习 ----- 将所有span标签的背景颜色设置为#efbdef, 设置字体大小为22px，字体加粗；*/ span{/*通过元素名选中当前文本中所有span*/ /*设置背景颜色为#efbdef*/ background:#efbdef; /*设置字体大小为22px*/ font-size:22px; /

[Sass]Sass基础知识面试题

阅读更多关于 [Sass]Sass基础知识面试题

1、有多少种方法可以使用SASS？您可以使用三种不同的方式使用SASS: 作为命令行工具作为一个Ruby模块作为Rack启用框架的插件 2、SASS中的嵌套规则是什么？嵌套是不同逻辑结构的组合。使用SASS，我们可以将多个CSS规则相互组合。如果使用多个选择器，则可以在另一个选择器中使用一个选择器来创建复合选择器。 3、如何在SASS中引用父选择器？使用＆字符选择父级选择器。它告诉父选择器应该插入的位置。 4、如何在SASS中写入占位符选择器？ SASS使用 class 或 id 选择器支持占位符选择器。在正常CSS中，这些用“＃"或“。“指定，但在SASS中，它们替换为“％”。 5、列出SASS上的不同类型的运算符？有5种类型的运算符: 数字运算符颜色运算符字符串运算符布尔运算符列表运算符 6、什么是数字运算？它允许诸如加法，减法，乘法和除法的数学运算。 7、什么是彩色运算？它允许使用颜色分量和算术运算。 8、什么是列表运算？列表表示使用逗号或空格分隔的一系列值。 9、什么是布尔运算？您可以使用and、or和not（与或非）对Sass脚本执行布尔运算。 10、SASS中的括号是什么？括号是一对标记，通常用圆括号（）或方括号[]来标记，这提供了影响操作顺序的符号逻辑。 11、什么是SASS中的插值？它使用＃{}

css优先级规则

阅读更多关于 css优先级规则

一、在同一样式表内 1.权值相同　　就近原则（离被设置元素越近优先级越高） 2.权值不同　　根据权值来判断css样式　　哪种css样式权值高，就使用哪种样式二、选择器权值标签选择器：权值为1 类选择器和伪类：权值为10 id选择器：权值为100 通配符选择器：权值为10 行内样式：权值为1000 三、权值规则统计不同选择器的个数每类选择器的个数乘以相应权值把所有的值相加得出选择器的权值四、!important规则( 优先级最高 ) 可调整样式规则的优先级添加在样式规则之后，中间用空格隔开 div{color:red !important;} 五、优先级　　1、css使用方法的优先级　　　　行内样式 > 内部样式 > 外部样式　　　　（注：link链入外部样式和style内部样式优先级，取决于先后顺序）　　2、样式表中优先级　　　　id选择器 > class选择器 > 标签选择器 > 通配符来源： https://www.cnblogs.com/zwtqf/p/9036130.html

订阅 css选择器