CSS选择器

21fanqie · 发表于 2024-7-8 18:40:44

类选择器在css样式编码中是最常用到的，如右侧代码编辑器中的代码:可以实现为“胆小如鼠”、“勇气”字体设置为红色。

语法：
CSS选择器

.类选器名称{css样式代码;}

复制代码

注意：
1、英文圆点开头
2、其中类选器名称可以任意起名（但不要起中文噢）

使用方法：
第一步：使用合适的标签把要修饰的内容标记起来，如下：

<span>胆小如鼠</span>

复制代码

第二步：使用 class="类选择器名称" 为标签设置一个类，如下：

<span class="stress">胆小如鼠</span>

复制代码

第三步：设置类选器css样式，如下：

.stress{color:red;}/*类前面要加入一个英文圆点*/

复制代码

登录/注册后可看大图

综上所述，类选择器其实就是自定义选择器，可以自定义各种名字，但避免中文。
其他选择器还有：包括ID选择器（#），属性选择器（[attribute='value'〕），后代选择器（如 div > p），子元素选择器（如 div ~ p），相邻元素选择器（如 div + p）等。

登录/注册后可看大图

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>认识html标签</title>
    <style type="text/css">
    .stress {
        color: red;
    }
    .gongkaike {
        color: green;
    }
    </style>
</head>

<body>
    <h1>勇气</h1>
    <p>三年级时，我还是一个<span class="stress">胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个<span class="stress">勇气</span>来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
    <p>到了三年级下学期时，我们班上了一节<span class="gongkaike">公开课</span>，老师提出了一个很简单的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>
    <img src="http://img1.sycdn.imooc.com//52b4113500018cf102000200.jpg">
</body>

</html>

21fanqie · 发表于 2024-7-8 18:50:50

id选择器
1、使用ID选择器，必须给标签添加上id属性，为标签设置id="ID名称"，而不是class="类名称"。
2、ID选择符的前面是井号（#）号，而不是英文圆点（.）。
3、id属性的值既为当前标签的id，尽量见名思意，语义化。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>认识html标签</title>
    <style type="text/css">
    #stress {
        color: red;
    }
    #gongkaike {
        color: green;
    }
    </style>
</head>

<body>
    <h1>勇气</h1>
    <p>三年级时，我还是一个<span id="stress">胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
    <p>到了三年级下学期时，我们班上了一节<span id="gongkaike">公开课</span>，老师提出了一个很简单的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>
</body>

</html>

21fanqie · 发表于 2024-7-8 18:54:36

类选择器和id选择器的区别

相同点：可以应用于任何元素
不同点：
1、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。

2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）。

.stress{
    color:red;
}
.bigsize{
    font-size:25px;
}
<p>到了<span class="stress bigsize">三年级</span>下学期时，我们班上了一节公开课...</p>

21fanqie · 发表于 2024-7-8 19:03:25

子选择器

.food>li{border:1px solid red;}

复制代码

这行代码会使class名为food下的子元素li（水果、蔬菜）加入红色实线边框。

应用场景
1.组织列表：使用子选择器可以轻松地为列表中的每个子列表项应用特定的样式，而不影响整个列表的样式。
2.表单验证：在表单验证中，可以通过子选择器来指定特定的表单输入域的验证规则，例如，只针对表单中特定的输入字段应用颜色或提示信息。
3.样式优化：在某些情况下，子选择器可以用于优化网站的CSS，例如，只对特定类别的子元素应用某种特定的CSS样式，而不影响其他类的子元素。

注意事项
效率问题：使用子选择器可能会影响CSS的性能，尤其是在处理大量页面元素时。因此，合理地使用子选择器非常重要，只针对确实需要的元素进行样式设置。
选择器的嵌套：子选择器可以嵌套使用，但需要注意避免无限嵌套的情况，以免导致CSS样式冲突。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>子选择器</title>
    <style type="text/css">
    /*添加边框样式（粗细为1px， 颜色为红色的实线）*/

    .food>li {
        border: 1px solid red;
    }
    .first>span {
        border: 1px solid red;
    }
    </style>
</head>

<body>
    <p class="first">三年级时，<span>我还是一个<span>胆小如鼠</span>的小女孩</span>，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
    <h1>食物</h1>
    <ul class="food">
        <li>水果
            <ul>
                <li>香蕉</li>
                <li>苹果</li>
                <li>梨</li>
            </ul>
        </li>
        <li>蔬菜
            <ul>
                <li>白菜</li>
                <li>油菜</li>
                <li>卷心菜</li>
            </ul>
        </li>
    </ul>
</body>

</html>

21fanqie · 发表于 2024-7-8 19:08:41

后代选择器

包含选择器，即加入空格,用于选择指定标签元素下的后辈元素。

.first span{color:red;}
这行代码会使第一段文字内容中的“胆小如鼠”字体颜色变为红色。

请注意这个选择器与子选择器的区别：
子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。
后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。

总结：>作用于元素的第一代后代，空格作用于元素的所有后代。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>
    <style type="text/css">
    .first span {
        color: red;
    }

    .food li {
        /*添加边框样式（粗细为1px， 颜色为红色的实线）*/
        border: 1px solid red;

    }
    </style>
</head>

<body>
    <p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
    <!--下面是本小节任务代码-->
    <ul class="food">
        <li>水果
            <ul>
                <li>香蕉</li>
                <li>苹果</li>
                <li>梨</li>
            </ul>
        </li>
        <li>蔬菜
            <ul>
                <li>白菜</li>
                <li>油菜</li>
                <li>卷心菜</li>
            </ul>
        </li>
    </ul>
</body>

</html>

21fanqie · 发表于 2024-7-8 19:15:13

通用选择器

通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素，如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色：

* {color:red;}

复制代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>* 选择符</title>
    <style type="text/css">
    * {
        color: red;
        font-size: 20px;
    }
    </style>
</head>

<body>
    <h1>勇气</h1>
    <p>三年级时，我还是一个胆小如鼠的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
    <p>到了三年级下学期时，我们班上了一节公开课，老师提出了一个很简单的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>
    <img src="http://XXXXXXXXX.jpg">
</body>

</html>

多个选择器同时使用，也可以这样写：

h1, p {
font-size: 20px;
}

复制代码

h1和p之间用逗号隔开

21fanqie · 发表于 2024-7-8 19:34:33

伪类选择符，它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：

a:hover{color:red;}

复制代码

上面一行代码就是为 a 标签鼠标滑过的状态设置字体颜色变红。这样就会使第一段文字内容中的“胆小如鼠”文字加入鼠标滑过字体颜色变为红色特效。

关于伪选择符：

关于伪类选择符，到目前为止，可以兼容所有浏览器的“伪类选择符”就是 a 标签上使用 :hover 了（其实伪类选择符还有很多，尤其是 css3 中，但是因为不能兼容所有浏览器，本教程只是讲了这一种最常用的）。其实 :hover 可以放在任意的标签上，比如说 p:hover，但是它们的兼容性也是很不好的，所以，现在比较常用的还是 a:hover 的组合。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>伪类选择符</title>
    <style type="text/css">
    a:hover {
        color: red;
        font-size: 20px;
    }
    </style>
</head>

<body>
    <h1>勇气</h1>
    <p class="first">三年级时，我还是一个<a href="http://www.imooc.com">胆小如鼠</a>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
    <p id="second">到了三年级下学期时，我们班上了一节公开课，老师提出了一个很<span>简单</span>的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>
    <img src="http://img1.sycdn.imooc.com//52b4113500018cf102000200.jpg">
</body>

</html>

21fanqie · 发表于 2024-7-8 19:39:26

分组选择器

h1,span{color:red;}

复制代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>分组选择符</title>
    <style type="text/css">
   .first,#second span {
       color:green;
   }
    </style>
</head>

<body>
    <h1>勇气</h1>
    <p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
    <p id="second">到了三年级下学期时，我们班上了一节公开课，老师提出了一个很<span>简单</span>的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>
    <img src="http://img1.sycdn.imooc.com//52b4113500018cf102000200.jpg">
</body>

</html>

		自动登录	找回密码
密码			立即注册

CSS选择器

相关帖子