web css 选择器的使用

程序员文章站 2022-04-14 12:01:39

外链样式 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/587490.html"> MVC母版页的使用方法 </a> 下一篇： <a href="/article/587492.html"> 抖音怎么查看有多少金币? </a> </div> <div class="wz_tuijian"> 推荐阅读 <ul> <li> <a href="/article/2077081.html" target="_blank" title="使用简单的CSS3属性实现炫酷读者墙效果"> <h2> 使用简单的CSS3属性实现炫酷读者墙效果 </h2> </a> </li> <li> <a href="/article/2076991.html" target="_blank" title="使用CSS3设计地图上的雷达定位提示效果"> <h2> 使用CSS3设计地图上的雷达定位提示效果 </h2> </a> </li> <li> <a href="/article/2076958.html" target="_blank" title="使用CSS3实现多列布局与多背景的技巧"> <h2> 使用CSS3实现多列布局与多背景的技巧 </h2> </a> </li> <li> <a href="/article/2071164.html" target="_blank" title="使用Python的Scrapy框架编写web爬虫的简单示例"> <h2> 使用Python的Scrapy框架编写web爬虫的简单示例 </h2> </a> </li> <li> <a href="/article/2070664.html" target="_blank" title="HTML5之消息通知的使用(Web Notification)"> <h2> HTML5之消息通知的使用(Web Notification) </h2> </a> </li> <li> <a href="/article/2062230.html" target="_blank" title="css类选择器的使用方法详解"> <h2> css类选择器的使用方法详解 </h2> </a> </li> <li> <a href="/article/2062238.html" target="_blank" title="CSS的inherit与auto使用分析"> <h2> CSS的inherit与auto使用分析 </h2> </a> </li> <li> <a href="/article/2060471.html" target="_blank" title="使用Python下的XSLT API进行web开发的简单教程"> <h2> 使用Python下的XSLT API进行web开发的简单教程 </h2> </a> </li> <li> <a href="/article/2059593.html" target="_blank" title="webpack4 CSS Tree Shaking的使用"> <h2> webpack4 CSS Tree Shaking的使用 </h2> </a> </li> <li> <a href="/article/2057871.html" target="_blank" title="react中使用css的7中方式(应该是最全的)"> <h2> react中使用css的7中方式(应该是最全的) </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>