Web前端学习笔记4：CSS3

最新推荐文章于 2024-08-13 17:31:17 发布

杰涅斯

最新推荐文章于 2024-08-13 17:31:17 发布

阅读量79

点赞数

分类专栏：从Java基础到开发的心路历程 Web前端 CSS3 文章标签：学习前端 html5 css Powered by 金山文档

本文链接：https://blog.csdn.net/m0_63615578/article/details/129274067

版权

从Java基础到开发的心路历程同时被 3 个专栏收录

10 篇文章 0 订阅

订阅专栏

Web前端

5 篇文章 0 订阅

订阅专栏

CSS3

3 篇文章 0 订阅

订阅专栏

文章详细介绍了CSS中的各种选择器，包括后代选择器、子选择器、相邻兄弟选择器和通用兄弟选择器，以及结构伪类选择器如`:first-child`和`:last-child`等。此外，还讲解了属性选择器的用法，如通过ID、类、链接属性进行元素选择。这些选择器在网页样式控制中起到关键作用。

摘要由CSDN通过智能技术生成

层次选择器

假设body中代码如下：

<body>
<p class="a">标题1</p>
<p>标题2</p>
<p>标题3</p>
<!--无序列表-->
<ul>
  <li>标题4</li>
  <li>标题5</li>
  <li>标题6</li>
</ul>

</body>

后代选择器

 <style>body p{
    background:red;
  }</style>

则标题1——6背景色全变红

子选择器

 <style>body>p{
    background:red;
  }</style>

则标题1——3背景色变红

相邻兄弟选择器（弟弟选择题）

  <style>.a + p{
    background:red;
  }</style>

则标题二变红

通用选择器（所有弟弟选择器）

  <style>.a ~ p{
    background:red;
  }</style>

则标题二、三变红

2.结构伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
/*ul的第一个子元素*/
        ul li:first-child{
            background: blue;
        }
/*ul的最后一个子元素*/
        ul li:last-child{
            background: aquamarine;
        }
/*选择当前p元素的父级元素的第一个元素，故该选中的元素不一定为p标签 */
p:nth-child(1){
    background: coral;
}
/*选择当前p元素的父级元素的第二个为p元素*/
p:nth-of-type(2){
    background: darkmagenta;
}
    </style>




</head>
<body>
<p >标题1</p>
<p>标题2</p>
<p>标题3</p>
<!--无序列表-->
<ul>
  <li>标题4</li>
  <li>标题5</li>
  <li>标题6</li>
</ul>

</body>
</html>

结果如下：

3.属性选择器（建议常用）

<body>
<p class="a">
<!-- id是唯一的-->
    <a href="http://www.baidu.com" class="b" id="one">1</a>
    <a href="" class="c" target="_blank" title="标题">2</a>
    <a href="">3</a>
    <a href="">4</a>
    <a href="">5</a>
    <a href="">6</a>
    <a href="">7</a>
    <a href="">8</a>
    <a href="">9</a>
    <a href="">10</a>
</p>

</body>


        /*选中a标签中带有id属性的*/
        a[id]{
            background: darkmagenta;
        }
        /*选中a标签id叫one的*/
        a[id=one]{
            background: royalblue;
        }
        /*选中class为c的所有a标签*/
        a[class*="c"]{
            background: brown;
        }
        /*选中href中以http开头的元素*/
        a[href^=http]{
            background: chartreuse;
        }
        /*选中href中以com结尾的元素*/
        a[href$=com]{
            background: darkkhaki;
        }
        /*总结：= 绝对等于*/
        /*       *=包含*/
        /*         ^=以什么什么开头*/
        /*           $=以什么什么结尾*/