欢迎光临
我的个人博客网站

【CSS】CSS3学习笔记——选择器


✨CSS

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化

✨课程链接

【狂神说Java】CSS3最新教程快速入门通俗易懂_哔哩哔哩_bilibili

✨学习笔记——选择器

我的第一个CSS

h1{     color: blue; } 
<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title> <!--    规范:建议分离css与html--> <!--    <style>编写css代码</style>--> <!--    语法:--> <!--    选择器{--> <!--        声明1;--> <!--        声明2;--> <!--        声明3;--> <!--    }--> <!--    声明最好以;结尾-->      <link rel="stylesheet" href="css/style.css">  </head> <body> <h1>一级标题</h1>  <p>css的优势:<p/> <p>1、内容和表现分离</p> <p>2、网页结构表现统一,可以实现复用</p> <p>3、样式十分的丰富</p> <p>4、建议使用独立于htm的css文件</p> <p>5、利用SEO,容易被搜索引擎收录!</p>  </body> </html> 

导入方式

/*外部样式*/ h1{     color: green; } 
<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>  <!--    内部样式-->     <style>         h1{             color: red;         }     </style>  <!--    外部样式-->     <link rel="stylesheet" href="css/style.css">  </head> <body>  <p>优先级 就近原则</p>  <p>外部样式</p> <ul>     <li>链接式(html)</li>     <li>导入式(css2.1)</li> </ul>  <!--行内样式 在标签元素中 编写style属性 编写样式--> <h1 style="color: blue">标题</h1> </body> </html> 
<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>      <li>导入式</li>     <style>         @import "css/style.css";         /*@import url("css/style.css");*/     </style>  </head> <body>  <h1>外部样式导入式</h1>  </body> </html> 

基本选择器

标签选择器

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>      <style>         /*标签选择器 会选择所有这个标签的元素*/         h1{             color: red;         }         p{             font-size: 20px;         }     </style>  </head> <body>  <h1>标签选择器h1</h1> <h1>标签选择器h1</h1> <p>标签选择器p</p>  </body> </html> 

类选择器

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>      <style>         /*类选择器格式 .class的名称{}*/         /*可以多个标签归类 同一个class 可以复用*/         .class1{             color: red;         }         .class2{             color: blue;         }     </style>  </head> <body> <h1 class="class1">类选择器</h1> <h1 class="class2">类选择器</h1> <h1 class="class3">类选择器</h1> <p> class="class1">类选择器</p>   </body> </html> 

id选择器

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>      <style>         /*id选择器 id必须保证全局唯一*/         /*#id名称{}*/         /*不遵循就近原则*/         /*id选择器 > class选择器 > 标签选择器*/          #id1{             color: red;         }          .class1{             color: blue;         }          h1{             color: green;         }     </style>  </head> <body>   <h1 id="id1">id选择器</h1> <h1 class="style1">id选择器</h1> <h1>id选择器</h1>  </body> </html> 

基本选择器总结

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>      <style>         p{             font-size: 20px;         }     </style>  </head> <body>      <p>标签选择器 选择一类标签</p>     <p>类选择器 选择所有class属性一致的标签 跨标签</p>     <p>id选择器 全局唯一</p>     <br>     <p>优先级:</p>     <p>不遵循就近原则<p/>     <p>id选择器 > class选择器 > 标签选择器</p>  </body> </html> 

层次选择器

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>      <style>         /*后代选择器*/         /*body p{*/         /*    background: red;*/         /*}*/          /*子选择器*/         /*body > p{*/         /*    background: green;*/         /*}*/          /*相邻兄弟选择器 只有下一个*/         /*.active + p{*/         /*    background: red;*/         /*}*/          /*通用兄弟选择器 当前选中元素的向下所有兄弟元素*/         .active ~ p{             background: blue;         }      </style>  </head> <body> <p>p0</p> <p class="active">p1</p> <p>p2</p> <p>p3</p> <ul>     <li>         <p>p4</p>     </li>     <li>         <p>p5</p>     </li>     <li>         <p>p6</p>     </li> </ul>  <p>p7</p> <p>p8</p>  </body> </html> 

结构伪类选择器

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>  <!--    避免使用class id选择器-->     <style>         /*ul第一个元素*/         ul li:first-child{             background: red;         }         /*ul最后一个元素*/         ul li:last-child{             background: blue;         }          /*选中p1*/         /*定位到父元素 选择当前的第一个元素*/         /*选择当前p元素的父级元素 选中父级元素的第一个 并且是当前元素才生效*/         p:nth-child(1){             background: green;         }         /*选择当前p元素的父级元素 选中p元素的第二个 类型*/         p:nth-of-type(2){             background: yellow;         }          a:hover{             background: red;         }     </style>  </head> <body> <!--    <a href="">a</a>--> <!--    <h1>h1</h1>-->     <p>p1</p>     <p>p2</p>     <p>p3</p>     <ul>         <li>li1</li>         <li>li2</li>         <li>li3</li>     </ul>  </body> </html> 

属性选择器

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>      <style>         .demo a{             float: left;             display: block;             height: 50px;             width: 50px;             border-radius: 10px;             background: red;             text-decoration: none;             text-align: center;             font:bold 20px/50px Arial;             color: gainsboro;             margin-right: 5px;         }          /*属性名 属性名 = 属性值(正则)*/         /*         = 绝对等于         *= 包含这个元素         ^= 以这个开头         $= 以这个结尾         */           /*存在id属性的元素*/         /*a[id]{*/         /*    background: yellow;*/         /*}*/         /*a[id = first]{*/         /*    background: yellow;*/         /*}*/          /*class中有links的元素*/         /* a[class*="links"]{             background: yellow;         } */          /* 选中herf中以http开头的元素 */         a[href^=http]{             background: yellow;         }          a[href$=pdf]{             background: blue;         }      </style>   </head> <body>  <p class="demo">      <a href="https://www.baidu.com/" class="links item first" id="first">1</a>     <a href="https://www.baidu.com/" class="links item active" target="_blank" title="test">2</a>     <a href="images/none.html" class="links item active">3</a>     <a href="images/none.png" class="links item">4</a>     <a href="none.jpg" class="links item">5</a>     <a href="none.pdf" class="links item">6</a>     <a href="none.docx" class="links item">7</a>     <a href="none.pptx" class="links item">8</a>     <a href="none.xlsx" class="links item">9</a>     <a href="none.cpp" class="links item last">10</a>  </p>  </body> </html> 

⭐转载请注明出处

本文作者:双份浓缩馥芮白

原文链接:https://www.cnblogs.com/Flat-White/p/14964830.html

版权所有,如需转载请注明出处。

赞(0) 打赏
未经允许不得转载:张拓的天空 » 【CSS】CSS3学习笔记——选择器
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏