web css 选择器的使用

程序员文章站 2022-06-22 11:19:57

外链样式 ID选择器优先级index.css文件内容#p1{ color:blue;}#div1{ background-color:red;}#p2{ color:green;}#div2{ color:green;} css基础</t....</div> <div class="content"> <img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczUuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAyMDEwMjYvYl8wXzIwMjAxMDI2MDkyNjQzNTU2OC5wbmc=" alt="web css 选择器的使用" title="web css 选择器的使用"> <h2> <a id="_ID__1" target="_blank" rel="nofollow" href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbQ=="></a>外链样式 ID选择器优先级</h2> index.css文件内容 <pre><code class="prism language-css">#p1{ color:blue; } #div1{ background-color:red; } #p2{ color:green; } #div2{ color:green; } </code></pre> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css基础</title>           <link rel="stylesheet" href="css/index.css">   <style> #div2{ color:red; } *{ margin:0; padding:0; } p{ } div{ } </style> </head> <body> <p id="p1"> 今天天气真热 </p> <div id="div1"> 明天可能会下雨  <div> 我是一个子类元素 </div> </div> <p id="p2"> 后天又是一个大晴天 </p>  <div id="div2" style="color:blue;"> 我是一个测试的内容 </div> </body> </html> </code></pre> <h2> <a id="__73" target="_blank" rel="nofollow" href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbQ=="></a>群组选择器后代选择器</h2> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>group组选择器</title>   <style> div,p,h3{ color:orange; } p,h3,figure,ul,ol{ margin: 0; padding: 0; } div p{ color: greenyellow; } div p span{ color: red; } </style> </head> <body> <div>今天</div> <p>明天</p> <h3>后天</h3> <div> <p>我是一个子类元素 <span>我是一个孙类元素</span> </p> </div> </body> </html> </code></pre> <h2> <a id="__113" target="_blank" rel="nofollow" href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbQ=="></a>伪类选择器类选择器</h2> <pre><code class="prism language-python"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>hover伪类选择器</title>  <style> .box{ width: 260px; background-color: blue; color: white; text-align: center; } .box:hover{ background-color: green; } #name:focus{ background-color: lightgray; } a:link{ color: green; } a:visited{ color: black; } a:hover{ color: blue; } a:active{ color: red; } </style> </head> <body>  <div class="box"> 我会变背景色 </div> <form action="#"> <label for="name">姓名:</label> <input type="text" id="name", name="name"> </form> <a href="https:www.baidu.com">百度</a> </body> </html> </code></pre> 本文地址：https://blog.csdn.net/weixin_45875105/article/details/109246552 </div> <div class="tags"> 相关标签： <a href="/t/web/" target="_blank"> web </a> </div> <div class="info-pre-next"> 上一篇： <a href="/article/1489261.html"> ps怎么做立体字 PS制作阳光照射效果的金属立体字教程 </a> 下一篇： <a href="/article/1489263.html"> C++ concurrency in action 读随记1 </a> </div> <div class="wz_tuijian"> 推荐阅读 <ul> <li> <a href="/article/2185463.html" target="_blank" title="使用HTML5里的classList操作CSS类"> <h2> 使用HTML5里的classList操作CSS类 </h2> </a> </li> <li> <a href="/article/2184448.html" target="_blank" title="CSS的color颜色使用说明"> <h2> CSS的color颜色使用说明 </h2> </a> </li> <li> <a href="/article/2182850.html" target="_blank" title="使用CSS3的appearance属性改变任何元素的浏览器默认风格"> <h2> 使用CSS3的appearance属性改变任何元素的浏览器默认风格 </h2> </a> </li> <li> <a href="/article/2182837.html" target="_blank" title="css媒体查询aspect-ratio宽高比在less中的使用"> <h2> css媒体查询aspect-ratio宽高比在less中的使用 </h2> </a> </li> <li> <a href="/article/2182752.html" target="_blank" title="CSS3的文字阴影—text-shadow的使用方法"> <h2> CSS3的文字阴影—text-shadow的使用方法 </h2> </a> </li> <li> <a href="/article/2180175.html" target="_blank" title="ASP.NET core Web中使用appsettings.json配置文件的方法"> <h2> ASP.NET core Web中使用appsettings.json配置文件的方法 </h2> </a> </li> <li> <a href="/article/2176826.html" target="_blank" title="10条影响CSS渲染速度的写法与使用建议第1/3页"> <h2> 10条影响CSS渲染速度的写法与使用建议第1/3页 </h2> </a> </li> <li> <a href="/article/2176721.html" target="_blank" title="采用XHTML和CSS设计可重用可换肤的WEB站点的方法"> <h2> 采用XHTML和CSS设计可重用可换肤的WEB站点的方法 </h2> </a> </li> <li> <a href="/article/2176666.html" target="_blank" title="不要使用CSS Expression的原因分析"> <h2> 不要使用CSS Expression的原因分析 </h2> </a> </li> <li> <a href="/article/2175119.html" target="_blank" title="HTML5 Web Database 数据库的SQL语句的使用方法"> <h2> HTML5 Web Database 数据库的SQL语句的使用方法 </h2> </a> </li> </ul> </div> </article> </div> </main> <footer><div class="box"><div class="ft_nav"><div class="ft_about">关于网站<ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </div></div></div></footer> </body> </html>