搜索到
146
篇与
的结果
-
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>
-
8、关系选择器 <!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.子元素选择器 语法格式 父元素A > 子元素B{ —— } 作用：选中指定父元素所有的子元素B 2.后代元素选择器 语法格式 祖先元素A 后代元素B{ —— } 作用：选中指定祖先元素A中所有的后代元素B 3.兄弟元素选择器 1）相邻兄弟选择器 语法格式 兄弟A+兄弟B{ —— } 作用：选中兄弟A相邻的一个兄弟B标签 2）通用兄弟选择器 语法格式 兄弟A~兄弟B{ —— } 作用：选中兄弟A后面所有的兄弟B元素 */ ul>li{ color: red; font-size: 20px; } div span{ color: blue; } ul+span{ background-color: #7edcc7; } ul~span{ background-color: #fde6e0; } </style> </head> <body> <!-- 标签之间的关系：标签之间创建另一对标签，外面的标签为父标签，里面的标签为子标签 标签的一层层父级标签，统称为祖先标签 标签的一层层子级标签，统称为后代标签 同一个层级的标签之间，统称为兄弟标签 --> <div> <ul> <li>项目1</li> <li>项目2</li> <li>项目3 <span>我是span</span> </li> </ul> <div></div> <span>我是span</span> <span>我是小span</span> </div> <ol> <li>项目1</li> <li>项目2</li> <li>项目3</li> </ol> </body> </html>
-
7、交集选择器 <!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.语法格式： 选择器1选择器2。。。n{ —— } 2.注意： 选择器之间不能有任何的符号，必须紧密的连接在一起。 若交集选择器中有标签选择器，标签选择器必须在首位 */ .d1{ color: red; } p.d1{ font-size: 50px; } </style> </head> <body> <div class="d1">我是div</div> <div class="d1">我是div</div> <p class="d1">我是p</p> </body> </html>
