搜索到
207
篇与
的结果
-
14、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> /* 一、继承性：一个元素的某些样式可以被后代元素继承。 优点：合理使用继承性，可以简化代码 注意： 通常文本、字体相关样式是可以继承的。但是背景、布局相关的样式不会被继承。 a链接不能继承文本颜色与下划线 h 标题标签不能继承字体大小 */ .father{ color: red; background-color: #c7edcc; } body{ font-size: 20px; } </style> </head> <body> <div class="father"> 我是father <div class="son">我是son <span>我是孙子span</span> </div> <a href="#">超链接</a> <h1>我是标题</h1> </div> </body> </html><!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> /* 一、继承性：一个元素的某些样式可以被后代元素继承。 优点：合理使用继承性，可以简化代码 注意： 通常文本、字体相关样式是可以继承的。但是背景、布局相关的样式不会被继承。 a链接不能继承文本颜色与下划线 h 标题标签不能继承字体大小 */ .father{ color: red; background-color: #c7edcc; } body{ font-size: 20px; } </style> </head> <body> <div class="father"> 我是father <div class="son">我是son <span>我是孙子span</span> </div> <a href="#">超链接</a> <h1>我是标题</h1> </div> </body> </html> -
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>
