目录
id选择器在css中{}之前的部分就是”选择器”,”选择器”指明了{}中的”样式“的作用对象，也就是说该”样式“作用与网页中的哪些元素。简单的来说,选择器就是帮助我们,选中要作用的标签.<!doctype html><html lang="en" dir="ltr"> <head> <meta chart="utf-8"> <title>实例</title> <style type='text/css'> p,h3{ /*将 p 和 h3 用逗号分隔，就定义了一个规则。其右边的样式（color:red;）将应用到这两个选择器所引用的元素。逗号告诉浏览器，规则中包含两个不同的选择器。如果没名人轶事有这个逗号，那么规则的含义将完全不同*/ color:red; } </style> </head> <body> <h3>啦啦啦</h3> <p>你好</p> <img src="image/八重樱2.jpg" width="400px" height="500px"> /*img插入图片 设置宽 高 (单位px)*/ <p>我的朋友</p> </body></html>执行结果/*格式 1 以#开头 2 其中id选择器名称可以任意起名(最好不要起中文) 3 id的名称必须是唯一的*/<!doctype html><html lang="en" dir="ltr"> <head> <meta chart="utf-8"> <title>实例</title> <style type='text/css'> #tale{ color: aqua; /*设置颜色 浅绿色*/ } #tiger{ color: red; } </style> </head> <body> <p> <span id="tale">一二三四五 上山打</span>&网络推广方法lt;span id="tiger">老虎</span> </p> </body></html><!doctype html><html lang="en" dir="ltr"> <个人简历大学生;head> <meta chart="utf-8"> <title>实例</title> <style type='text/css'> .box{ width: 240px; /*设置div 宽*/ height: 240px; /*设置div 高*/ margin-top: 5px; /*设置上边距 */ border: 5px solid black;/*设置div 边框 参数1(边框宽) 参数2(边框样式 实线) 参数3(边框颜色)*/ background: aquamarine; /*设置div背景色 (碧绿色)*/ } .big{ background-image: url("image/a.jpg"); /*设置div背景图 url(填图片链接)*/ background-repeat: no-repeat ;/*设置背景重复方式 默认(repeat)水平和垂直方向上重复。 (no-repeat)背景图像将仅显示一次。 (inherit)从父元素继承background-repeat属性的设置。 (repeat-x)背景图像将在水平方向重复。 (repeat-y)背景图像将在垂直方向重复。*/ } </style> </head> <body> <div class="box" ></div> <div class="box big"></div>/*可以使用类选择器为一个元素同时设置多个样式。我们可以为一个元素同时设置多个样式，但只可以用类选择器的方法实现，id选择器是不可以添加多个id名字的。*/ </body></html><!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>实例</title> <style> .box { color: cyan; font-size: 40px; } </style></head><body> <div class="box" > <span>盒子里有</span><br> <span>小动物</span> <p>小猫咪</p> <p>小跳蛙</p> <p id = "t">小老虎</p> </div></body></html>/*学习了类选择器和id选择器，我们会发现他们之间有很多的相似处，是否两者可以通用使用呢？那么，我们先来总结他们的相同点和不同点：相同点: 可以应用于任何元素不同点： id选择器只能在文档中使用一次。与类选择器不同，在一个html文档中，id选择器只能使用一次，而且仅仅一次。而类选择器可以使用多次。到底使用id还是用class？答案：尽可能的用class。除非一些特殊情况可以用id原因：id一般是用在js的。也就是说 js是通过id来获取到标签*/
/*顾名思义，所谓后代，就是父亲的所有后代(包括儿子、孙子、重孙子等)。语法： div p{ css代码样式; }使用空格表示后代选择器，上面的div是父元素，而p是div的后代元素。*/<!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>实例</title> <style> div p{ color: cyan; /*设置颜色为 蓝绿色(青色)*/ font-size: 40px; } </style></head><body> <div> <span>盒子里有</span> <p>小猫咪</p> <p>小跳蛙</p> </div></body></html>/*子代，仅仅表示父亲的亲儿子，只有亲儿子。使用>表示子代选择器。语法： div>p{css代码样式;} 是可以一直 div>元素>元素>元素>元素 超过256层嵌套失效....*/<!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>实例</title> <style> #box>p{ color: darkorange; /*设置颜色为 深橙色*/ font-size: 80px; } </style></head><body> <div id="box"> <div> <div> <div> <p> 狸花猫 </p> </div> </div> </div> <p> 大橘猫 </p> </div></body></body></html>/*通用选择器是功能最强大的选择器，它使用一个*号来表示，它的作用是匹配html中所有标签元素。使用它，我们可以对网页进行重置样式，以按照产品需求来开发对应的网页。对页面中所有的文本设置为红色 */<!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>实例</title> <style> *{ color:slateblue; /*设置颜色为石蓝色*/ font-size: 20px; } </style></head><body> <div class="zoo"> <ul class="animal"> <li> 犬科动物 <ul> <li>犬亚科 <ul> <li>灰狼</li> <li>郊狼</li> <li>黑背胡狼</li> </ul> </li> <li>狐亚科 <ul> <li>沙狐</li> <li>赤狐</li> <li>孟加拉狐</li> </ul> </li> </ul> </li> <li> 猫科动物 <ul> <li>猎豹亚科 <ul> <li>猎豹</li> </ul> </li> <li>猫亚科 <ul> <li>豹猫</li> <li>金猫</li> <li>美洲狮</li> </ul> </li> </ul> </li> </ul> </div></body></html><!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>实例</title> <style> div,p,h6,span,#h,.hhh{ color: deeppink; /*设置文本颜色为 深粉色*/ } </style></head><body> <div> 我是盒子 </div> <p>我是p标签</p> <h6>我是h6标签</h6> <span>我是span标签</span> <h1 id="h" >我是h1标签</h1> <h3 class="hhh" >我是h3标签</h3></body></html><!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>实例</title> <style> p{ color: deeppink; font-size: 30px; } .p2{ width: 150px; height:150px; } #p3{ width: 300px; height: 300px; } p.p2{ background: cyan; /*设置背景颜色为 蓝绿色*/ text-align: center; /*设置文本水平 居中*/ } p#p3{ background: gold; /*设置背景颜色为 金色*/ text-align: center; /*设置文本水平 居中*/ line-height: 300px; /*设置文本行高 等于父元素高度,实现水平垂直居中*/ overflow: auto; /*内容超出部分 自动上下滚动显示*/ }/*hidden 隐藏有何特长 auto 自动下拉显示 fragments 超出部分,分段显示等比例 scroll 上下左右滚轴显示 */ </style></head><body> <p>出山</p> <p class="p2" >琵琶行</p> <p id="p3" >告白之夜哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇</p></body></html><!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>实例</title> <style> .box{ width: 500px; height: 600px; font-size: 20px; background: cyan ; } .child-box1+.child-box2{ font-size: 40px; color: red; text-align: center ; } #child-box3+p{ font-size: 60px; color: brown; text-align: right ; } </style></head><body> <div class="box" > 我是爸爸 <div class="child-box1"> 我是大哥 </div> <div class="child-box2"> 我是二弟 </div> <div id="child-box3"> 我是三弟 </div> <p>我是打酱油的</p> </div></body></html><!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>实例</title> <style> .box{ width: 500px; height: 600px; font-size: 20px; background: cyan; } .child-box1~#child-box3{ font-size: 40px; color: red; text-align: center ; } </style></head><body> <div class="box" > 我是爸爸 <div class="child-box1"> 我是大哥 </div> <div class="child-box2"> 我是二弟 </div> <div id="child-box3"> 我是三弟 </div> <p>我是打酱油的</p> </div></body></html>/*属性选择器会尝试匹配精确的属性值 [at同泽高中tr] 该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。 [attr=val] 该选择器仅选择 attr 属性被赋值为 val 的所有元素。 [attr~=val] 该选择器仅选择具有 attr 属性的元素，而且要求 val 值是 attr 值包含的被空格分隔的取值列表里中的一个。*/<!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>实例</title> <style> /* 所有具有"data-vegetable"属性的元素将被应用绿色的文本颜色 */ [data-vegetable] { color: green } /* 所有具有"data-vegetable"属性且属性值刚好为"liquid"的元素将被应用金色的背景颜色 */ [data-vegetable="liquid"] { background-color: goldenrod; } /* 所有具有"data-vegetable"属性且属性值包含"spicy"的元素， 即使元素的属性中还包含其他属性值，都会被应用红色的文本颜色 */ [data-vegetable~="spicy"] { color: red; } </style></head><body> <i lang="fr-fr">poulet basquai</i>/*巴斯基香肠*/ <ul> <li data-quantity="1kg" data-vegetable>tomatoes</li>/*data-quantity 数量 data-vegetable 蔬菜 西红柿*/ <li data-quantity="3" data-vegetable>onions</li>/* 洋葱 */ <li data-quantity="3" data-vegetable>garlic</li>/*大蒜*/ <li data-quantity="700g" data-vegetable="not spicy like chili">red pepper</li>/*红辣椒*/ <li data-quantity="2kg" data-meat>chicken</li>/*鸡肉*/ <li data-quantity="optional 150g" data-meat>bacon bits</li>/*培根片*/ <li data-quantity="optional 10ml" data-vegetable="liquid">olive oil</li>/*液体*/ <li data-quantity="25cl" data-vegetable="liquid">white wine</li>/*白葡萄酒*/ </ul></body></html>[]组成，其中包含属性名称，后跟可选条件以匹配属性的值。 属性选择器可以根据其匹配属性值的方式分为两类： 存在和值属性选择器和子串值属性选择器。/*属性选择器使用例子*/ [for]{ color: red; } /*找到for属性的等于urname的元素 字体颜色设为红色*/ [for='urname']{ color: yellow; } /*以....开头 ^*/ [for^='ur']{ color: #008000; } /*以....结尾 $*/ [for$='vvip']{ color: red; } /*包含某元素的标签*/ [for*="vip"]{ color: #00bfff; } /*指定单词的属性*/ label[for~='ur1']{ color: red; } input[type='text']{ background: red; }/*这种情况的属性选择器也被称为“伪正则选择器”，因为它们提供类似 regular expression 的灵活匹配方式（但请注意，这些选择器并不是真正的正则表达式*//*伪类选择器一般会用在超链接a标签中*/ <!doctype html> <html lang="en"> <head> <meta chart="utf-8"> <title>伪类选择器的使用</title> <style type="text/css"> a:hover{ color:red; } </style> </head> <body> <a href="http://www.baidu.com">百度一下</a> </body> </html> /*没有被访问过a标签的样式*/ a:link { color: green; } /*访问过后a标签的样式*/ a:visited { color: yellow; } /*鼠标悬浮时a标签的样式*/ a:hover { color: red; } /*鼠标摁住的时候a标签的样式*/ a:active { color: blue; }本文发布于:2023-04-06 06:12:33，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/60690e9e35340df8e801581ff078ecaa.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：css 所有选择器 实例与总结.doc
本文 PDF 下载地址：css 所有选择器 实例与总结.pdf
| 留言与评论（共有 0 条评论） |
