龙空技术网

css3新手入门(1)基础选择器

程序员小叶 58

前言:

现时兄弟们对“css选择器class类选择器”大约比较讲究,兄弟们都想要了解一些“css选择器class类选择器”的相关内容。那么小编同时在网络上网罗了一些有关“css选择器class类选择器””的相关知识,希望你们能喜欢,大家快快来学习一下吧!

今天学习下css3的基础选择器类型,只有使用选择器选中了元素,才可把样式应用于元素上,所以选择器对我们来说是至关重要的。选择器允许开发者根据元素的类型、类名、ID等属性来选择性地应用样式。

下面是一个包含HTML和CSS代码的例子,展示了CSS3中的几种基础选择器如何工作

<!DOCTYPE html>  <html lang="en">  <head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>CSS3 基础选择器示例</title>  <style>      /* 元素选择器 */      p {          color: blue;      }        /* 类选择器 */      .highlight {          background-color: yellow;      }        /* ID选择器 */      #unique-id {          color: red;      }        /* 后代选择器 */      div p {          font-style: italic;      }        /* 子选择器 */      ul > li {          list-style-type: none;      }        /* 相邻兄弟选择器 */      h1 + p {          font-size: 18px;      }        /* 通用兄弟选择器 */      h1 ~ p {          margin-top: 20px;      }  </style>  </head>  <body>    <p>这是一个普通的段落,应用了元素选择器。</p>    <p class="highlight">这是一个高亮显示的段落,应用了类选择器。</p>    <div id="unique-id">这是一个ID为unique-id的div,它的文本应用了ID选择器。</div>    <div>      <p>这个段落位于div内部,应用了后代选择器。</p>  </div>    <ul>      <li>列表项1,应用了子选择器。</li>      <li>列表项2,也应用了子选择器。</li>  </ul>    <h1>标题</h1>  <p>这个段落紧接在h1之后,应用了相邻兄弟选择器。</p>  <p>这个段落也在h1之后,但由于不是紧接的,所以只应用了通用兄弟选择器的样式。</p>    </body>  </html>

在这个例子中,我们有一个HTML文档,其中包含了各种元素,并且针对这些元素使用了CSS3中的基础选择器来应用样式。

元素选择器:所有的<p>元素都会应用蓝色文本颜色。类选择器:具有class="highlight"的<p>元素会有黄色背景。ID选择器:ID为unique-id的<div>元素内的文本会变成红色。后代选择器:位于<div>内部的<p>元素会以斜体显示。子选择器:<ul>元素的直接子<li>元素将不会有列表样式(即无圆点或数字)。相邻兄弟选择器:紧接在<h1>之后的<p>元素会有18px的字体大小。通用兄弟选择器:所有在<h1>之后的<p>元素都会有20px的顶部外边距,但由于相邻兄弟选择器更具体,紧接在<h1>之后的<p>还会受到它的影响(这里两个选择器都作用于相同的元素,但样式会累加或根据CSS的层叠规则来应用)。不过,在这个特定的例子中,字体大小只由相邻兄弟选择器设置,顶部外边距则由通用兄弟选择器设置。

标签: #css选择器class类选择器