搜索到
47
篇与
的结果
-
13、CSS三大特性-优先级 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS三大特性-优先级</title> <style> /* 一、优先级：不同选择器选择同一个元素，并且设置相同的样式时，css会根据优先级选择使用样式。 选择器的权重： ！important 无敌 行内样式 1000 id选择器 0100 类、属性、伪类选择器 0010 标签选择器 0001 通配符、继承 0000 注意： 权重由四位数组成，权重高就优先执行。 权重从左到右依次比较，如高位相同，则比较下一位 权重可以叠加,但是不会进位 选择器分组单独计算 */ /*#d1{ color: yellowgreen; } */ /* 0001 0010 0011 */ div[class*="div1"]{ color: orange!important; } /* 0010 0010 0020 */ .div1.div2{ color: red; } </style> </head> <body> <div id="d1" class="div1 div2">我是div</div> </body> </html> -
12、CSS三大特性-层叠性 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS三大特性-层叠性</title> <style> /* 一、层叠性：相同选择器（同等权重）对同一个元素设置样式时 不冲突的样式：样式都生效 冲突的样式：会根据“就近原则”，书写位置接近元素的样式会将位置远的样式覆盖 */ .div1{ color: red; } .div1{ font-size: 50px; color: yellowgreen; } </style> </head> <body> <div class="div1">我是div</div> </body> </html>
-
11、伪元素选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>伪类选择器</title> <style> /* 一、伪元素:在HTML文档中并不真实存在的元素。以两个英文的冒号：：开头 1.常用的伪元素 ：：before在元素内部最前面插入内容 ：：after在元素内部最后插入内容 ：：first-letter 在元素内的第一个字母 ：：first-line 在元素内部的第一行 ：：selection 表示选中的内容 2.注意： ::before与::after中必须有content属性 伪元素在文档中找不到 */ div::before{ content:"乐"; } div::after{ content: "笑哈哈"; } p::first-line{ background-color: #7edcc7; } p::selection{ color: red; background-color: #fde6e0; font-size: 50px; } p::first-letter{ font-size: 30px; } </style> </head> <body> <div>呵呵</div> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sunt assumenda perspiciatis repudiandae hic natus veniam tempore accusantium, eos neque a, deserunt nemo dolores maxime autem dicta suscipit nobis qui quidem?Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus quam repellat veritatis labore ut hic, dolores necessitatibus inventore aperiam sapiente dicta sed reiciendis expedita nemo, incidunt in provident unde <nisi class="lorem"></nisi></p> </body> </html>
-
10、伪类选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>伪类选择器</title> <style> /* 一、伪类：同一个标签在不同的状态下，显示的样式是不同的，这一类标签，称为伪类 例如：超链接（未被点击过，已被点击过，属标鼠标悬停时，鼠标正在点击时）了- 二、伪类选择器：选中标签状态的选择器，为标签的状态指定样式。伪类选择器都是以“：”开头 1.链接伪类选择器 ：link选择未被访问的链接 ：visited选择已被访问的链接 上述两个选择器仅对于超链接使用，下面两个选择器任何标签使用 ：hover选择鼠标“悬停”时 ：active选择鼠标正在电击时（鼠标点击，不松开时） 2.其他伪类选择器 ：first-chind 匹配第一个子元素 ：last-chind 匹配最后一个子元素 ：nth-chind（n） 匹配第n个子元素 n的值可以是以下三种方式 数字 关键字 odd奇数 even偶数 公式（an+b）ab是自然数，n从0开始，递增1 ：first-of-type 匹配同类型的第一个元素 ：last-of-type 匹配同类型的最后一个元素 ：nth-of-type（n） 匹配同类型的第n个子元素 E:first-child 匹配父元素下的第一个元素是不是E，是则选中，不是则不选 E：first-of-type 匹配父元素下所有的子元素中的第一个E ：focus 获取某个标签的焦点时（比如文本框） */ a:link{ color: yellowgreen; } a:visited{ color: indianred; } a:hover{ background-color: #dce2f1; } a:active{ background-color: #7edcc7; font-size: 30px; } /*div p:first-child{ color: red; } */ div p:last-child{ color: red; } div p:nth-child(2n+0){ color: blue; } div p:first-of-type{ color:red; } input:focus{ background-color: #7edcc7; } </style> </head> <body> <a href="#">超链接</a> <div> <span>我是span</span> <p>第1个</p> <p>第2个</p> <p>第3个</p> <p>第4个</p> <p>第5个</p> </div> <input type="text"> </body> </html>
-
9、属性选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>属性选择器</title> <style> /* 一、属性选择器：为带有属性的元素指定样式 语法格式一：标签必须包含某属性 标签名[属性名] */ input[value]{ background-color: #c7edc7; } /* 语法格式二:标签属性必须等于某个值 */ input[value="哈哈"]{ background-color: #fde6e0; } /*css对属性选择器的扩展*/ /* 语法格式三：标签属性以某个值开头 标签名[属性名^=属性值] */ div[class^="div"]{ background-color: #dce2f1; } /* 语法格式四：标签属性以某个值结尾 标签名[属性名$=属性值] */ div[class$="hello"]{ color: red; } /* 语法格式五：标签属性必须包含某个值 标签名[属性名*=属性值] */ div[class*="d"]{ font-size: 30px; color:blue; } </style> </head> <body> <input type="text"value="呵呵"> <input type="text"value="哈哈"> <div class="div1">我是div</div> <div class="div2">我是div</div> <div class="div3">我是div</div> <div class="d1-hello">我是hello1</div> <div class="d2-hello">我是hello2</div> <div class="d3-hello">我是hello3</div> </body> </html>
