CSS八大常用选择器详解_css除了id还有什么-CSDN博客

<!-- 
基本格式如下
    标签名 {
        设置属性
    } 
-->

<style>
    p {
        color: red;
    }
    div {
        color: green;
    }
</style>


<div>
    标签选择器
</div>
<p>
    类选择器
</p>
<div>
    id选择器
</div>
<p>
    通配符选择器
</p>

效果如下

2) 类选择器

特点:

因为每一个标签,我们可以特定的指定类名,因此类选择器可以差异化的选中不同的标签
同时因为类名可以重复,即让多个标签都使用同一个类名,因此也可以灵活的选中多个标签

语法细节:

CSS中使用 . 开头表示类选择器
需要在想要选中的标签中设置 class 属性
一个类可以被多个标签使用, 一个标签也能使用多个类(多个类名需要用空格分割)
如果类名较长,建议使用 - 分割
类名尽量不要使用纯数字, 中文和标签名,容易出问题

代码示例

<!-- 
基本格式如下
    .类名 {
        设置属性
    } 
-->
<style>
    .box {
        font-size: 50px;
    }
    .green {
        background-color: green;
    }
    .red {
        background-color: red;
    }
</style>

<!-- 多个类名之间以空格分割 -->
<div class="box green">类选择器</div>
<div class="red">类选择器</div>
<div class="box green">类选择器</div>

效果如下

可以很明显的看到, .box 选择器选中了第一和第三行,设置了字体大小, 而 .green 和 .red 选择器都正确选中了对应的行.

3) id 选择器

特点:

因为每一个标签,我们可以特定的指定id,因此id选择器可以差异化的选中特定的id的标签
但是因为id是不可以重复的,因此id选择器不能选中多个标签(但是也可以通过复合的id选择器来实现选中多个标签)

语法细节:

CSS中使用#开头的选id选择器
html中的元素id不需要带#
id是唯一的,不可以被多个标签一起使用

代码示例

<!-- 
基本格式如下
    #id {
        设置属性
    } 
-->
<style>
    #label1 {
        background-color: blue;
    }
</style>

<!-- 多个类名之间以空格分割 -->
<div id="label1">id选择器</div>
<div id="label2">id选择器</div>

效果如下

4) 通配符选择器

特点:

使用 * 可以选中页面中所有的标签,一般用来指定html页面中最基本的属性

代码示例

<!-- 
基本格式如下
    * {
        设置属性
    } 
-->
<style>
    * {
        color:chocolate;
    }
</style>

<!-- 多个类名之间以空格分割 -->
<div id="label1">通配符选择器</div>
<div id="label2">通配符选择器</div>
<div id="label3">通配符选择器</div>
<div id="label4">通配符选择器</div>
<div id="label5">通配符选择器</div>
<div id="label6">通配符选择器</div>

效果如下

复合选择器

1) 后代选择器

后代选择器也叫包含选择器,主要的目的就是选择父元素下的某些子元素

基本格式如下:

元素1 元素2 ....... { 设置属性 }

元素1和元素2要使用空格分割
元素1是父级,元素2是子集,选中的是元素2,不会选中元素1
元素2不一定是儿子,也可以是孙子 ,重孙子等其后代
可以是任意选择器的组合(类选择器,id选择器等)
元素的数量不限于两个

代码示例

<style>
    ul li{
        color: blue;
    }
</style>

<div>
    <ul>
        <li>标签选择器</li>
        <li>类选择器</li>
        <li>id选择器</li>
        <li>通配符选择器</li>
    </ul>
</div>

<div>
    <ol>
        <li>后代选择器</li>
        <li>子选择器</li>
        <li>并集选择器</li>
        <li>伪类选择器</li>
    </ol>
</div>

效果如下

代码示例 (演示选中的子元素可以不是儿子,只要是其后代都行)

<!-- 
基本格式如下
    元素1 元素2 .... {
        设置属性
    }
-->
<style>
    div li{
        color: blue;
    }
</style>

<div>
    <ul>
        <li>标签选择器</li>
        <li>类选择器</li>
        <li>id选择器</li>
        <li>通配符选择器</li>
    </ul>
</div>

<div>
    <ol>
        <li>后代选择器</li>
        <li>子选择器</li>
        <li>并集选择器</li>
        <li>伪类选择器</li>
    </ol>
</div>

效果如下

代码示例: (这里演示一下后代选择器可以是任意基础选择器的组合)

<!-- 
基本格式如下
    元素1 元素2 .... {
        设置属性
    }
-->
<style>
    .one #test{
        color: blue;
    }
</style>

<div class="one">
    <ul id="test">
        <li>标签选择器</li>
        <li>类选择器</li>
        <li>id选择器</li>
        <li>通配符选择器</li>
    </ul>
</div>

<div>
    <ol>
        <li>后代选择器</li>
        <li>子选择器</li>
        <li>并集选择器</li>
        <li>伪类选择器</li>
    </ol>
</div>

效果如下

2) 子选择器

子选择器的用法和后代选择器类似,但是最大的区别是子选择器只能选择其子标签中满足条件的,不能选择孙子,重孙子的等标签,而后代选择器可以选择其所有后代中满足条件的.

基本格式如下:

元素1>元素2 { 设置属性 }

元素的个数不限于两个,可以是很多个
元素之间用 > 分割
只能选择亲儿子,不能选择孙子,重孙子等元素

代码示例

<!-- 
基本格式如下
    元素1>元素2 .... {
        设置属性
    }
-->
<style>
    .two>a {
        color: red; 
    }
</style>

<div class="two">
    <a href="#">链接1</a>
    <p>
        <a href="#">链接2</a>
    </p>
</div>

效果如下

3) 并集选择器

可以选择多组标签

基本格式如下:

元素1,元素2 { 设置属性 }

通过 , 分割每个元素
可以同时选中列出的所有元素
并集选择器可以是任何基础选择器的组合
并集选择器建议竖着写, 即每个元素占一行,最后一个选择器不能加逗号.

代码示例

<!-- 
基本格式如下
    元素1,
    元素2,
    .... {
        设置属性
    }
-->
<style>
    /* 这里演示使用一下前面的子选择器和后代选择器 */
    .one>ul,
    div ol li {
        color: brown;
    }
</style>

<div class="one">
    <ul id="test">
        <li>标签选择器</li>
        <li>类选择器</li>
        <li>id选择器</li>
        <li>通配符选择器</li>
    </ul>
</div>

<div>
    <ol>
        <li>后代选择器</li>
        <li>子选择器</li>
        <li>并集选择器</li>
        <li>伪类选择器</li>
    </ol>
</div>

效果如下

4) 伪类选择器

伪类选择器（简称：伪类）通过冒号来定义，它定义了元素的状态，如点击按下，点击完成等，通过伪类可以为元素的状态修改样式。这里我们主要介绍以下两类伪类选择器.

1. 链接伪类选择器

a:link 选择未被访问过的链接

a:visited 选择已经被访问过的链接

a:hover 选择鼠标指针悬停上的链接

a:active 选择活动链接(鼠标按下了但是还未弹起的链接)

注意事项:

设置的时候需要按照 LVHA 的顺序设置,例如需要设置hover和active时,将active拿到hover前面,就会导致active失效
浏览器的 a标签有默认的样式, 但是在开发中一般都是需要制定样式的

代码示例

<style>
    a:link {
        color: black;
    }

    a:visited {
        color: green;
    }

    a:hover {
        color: red;
    }

    a:active {
        color: blue;
    }
</style>

<a href="#">超链接</a>

这里因为是配合鼠标来展示颜色的变化,因此这里不展示结果,你们可以自己copy一下代码,跑一下感受一下.

2. :focus 伪类选择器

:focus 选取获取焦点的 input 表单元素

代码示例

<style>
    .one>input:focus {
        color: red;
    }
</style>

<div class="one">
    <input type="button" value="按钮">
    <input type="button" value="按钮">
    <input type="button" value="按钮">
    <input type="button" value="按钮">
</div>