HTML_CSS学习：CSS选择器

马龙强_2024-05-08 16:45

一、通配选择器

相关代码：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通配选择器</title>
    <style>
        * {
            color: #1b8335;
            font-size: 40px;
        }
        /*可以选中所有的HTML元素*/
    </style>
</head>
<body>
    <h1>欢迎来到土豆官网，图的味道我知道</h1>
    <br>
    <h2>土味情话</h2>
    <h3>作者：优秀的网友们</h3>
    <p>万水千山总是情，爱我多点行不行</p>
    <p>草莓、蓝莓、蔓越莓、今天想我了没</p>
    <p>我心里给你留了一块地，我的死心塌地</p>

</body>
</html>

二、元素选择器

相关代码：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
<!--    作用：为页面中某种元素统一设置样式-->
    <meta charset="UTF-8">
    <title>元素选择器</title>
    <style>
        h1{
            color: #9721b1;
            font-size: 50px;
        }
        h2{
            color: #3cb121;

        }
        h3{
            color: #f73131;
        }
        p{
            color: #ab9c1b;
        }
    </style>
</head>
<body>
    <h1>欢迎来到土豆官网，图的味道我知道</h1>
    <br>
    <h2>土味情话</h2>
    <h3>作者：优秀的网友们</h3>
    <p>万水千山总是情，爱我多点行不行</p>
    <p>草莓、蓝莓、蔓越莓、今天想我了没</p>
    <p>我心里给你留了一块地，我的死心塌地</p>
    <br>
    <h2>反杀土味情话</h2>
    <h3>作者：更优秀的网友门</h3>
    <p>一寸光阴一寸金，全你死了这条心</p>
    <p>西瓜、南瓜、哈密瓜，把你打成大傻瓜！</p>
    <p>我心里只有一块地，我的玛莎拉蒂</p>

</body>
</html>

三、类选择器

相关代码：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
    <style>
        /*选中页面中所有类名为say的元素*/
        .say{
            color: #cb2525;
        }
        /*选中页面中所有类名为answer的元素*/
        .answer{
            color: #2bbc6d;
        }
        .big{
            font-size: 50px;
        }
        .hei-hei{
            color: #23efc5;
            font-size: 50px;
        }
    </style>
</head>
<body>
    <h1>欢迎来到土豆官网，图的味道我知道</h1>
    <br>
    <h2>土味情话</h2>
    <h3>作者：优秀的网友们</h3>
<!--    class不能用中文、不能用数字-->
    <p class="say big">我想对你说：万水千山总是情，爱我多点行不行</p>
    <p class="say">我想对你说：草莓、蓝莓、蔓越莓、今天想我了没</p>
    <p class="say">我想对你说：我心里给你留了一块地，我的死心塌地</p>
    <br>
    <h2>反杀土味情话</h2>
    <h3>作者：更优秀的网友门</h3>
    <p class="hei-hei">你回答我：一寸光阴一寸金，全你死了这条心</p>
    <p class="answer">你回答我：西瓜、南瓜、哈密瓜，把你打成大傻瓜！</p>
    <p class="answer">你回答我：我心里只有一块地，我的玛莎拉蒂</p>

</body>
</html>

四、ID选择器

相关代码：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ID选择器</title>
    <style>
        #earthy{
            color: #1b802c;
        }
        #turn-earthy{
            color: #831eb8;
        }
    </style>
</head>
<body>
<!--    ID选择器根据元素的id属性，来精准的选择某个元素-->
    <h1>欢迎来到土豆官网，图的味道我知道</h1>
    <br>
<!--    id不能是数字开头-->
<!--    一个元素不能有两个同名的属性-->
<!--    尽量由字母、数字、下划线、短杠组成，最好以字母开头、不要包含空格、区分大小写-->
    <h2 id="earthy">土味情话</h2>
    <h3>作者：优秀的网友们</h3>
    <p>我想对你说：万水千山总是情，爱我多点行不行</p>
    <p>我想对你说：草莓、蓝莓、蔓越莓、今天想我了没</p>
    <p>我想对你说：我心里给你留了一块地，我的死心塌地</p>
    <br>
    <h2 id="turn-earthy">反杀土味情话</h2>
    <h3>作者：更优秀的网友门</h3>
    <p>你回答我：一寸光阴一寸金，全你死了这条心</p>
    <p>你回答我：西瓜、南瓜、哈密瓜，把你打成大傻瓜！</p>
    <p>你回答我：我心里只有一块地，我的玛莎拉蒂</p>

</body>
</html>

五、复合_交集选择器

相关代码：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复合_交集选择器</title>
    <style>
        .rich{
            color: #d7b655;
        }
        .beauty{
            color: #db1fd8;
        }
        p.beauty{
            color: #227726;
            font-size: 30px;
        }
        /*  #wc{*/
        /*    color: #227726;*/
        /*    font-size: 30px;*/
        /*}*/
        .B-R{
            color:darkred;
        }
        .rich.beauty{
            color: #30bc96;
            font-size: 40px;
        }
    </style>
</head>
<body>
    <h2 class="rich">土豪张三</h2>
    <h2 class="beauty">明星李四</h2>
<!--    <h2 class="B-R">土豪明星王五</h2>-->
<!--    rich和beauty两个标签属性，会选择后者，上方<style>标签中编写的顺序-->
    <h2 class="rich beauty">土豪明星王五</h2>
    <hr>
<!--    <p class="beauty" id="wc">小狗旺财</p>-->
    <p class="beauty" >小狗旺财</p>
    <p class="beauty">小猪佩奇</p>

</body>
</html>

<!--有标签名，标签名必须写在钱买你-->
<!--id选择器、理论上可以作为交集的条件，但是金应用中几乎不用&#45;&#45;因为没有意义-->
<!--交集选择器中不可能出现两个元素选择器，因为一个元素，不可能既是p元素又是span元素-->
<!--用的最多的交集选择器是：元素选择器配合类名选择器，例如p.beauty-->

六、复合_并集选择器

相关代码：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复合_并集选择器</title>
<!--    并集选择器的作用：选中多个选择器对应的元素，又称：分组选择器-->
<!--    语法：.选择器1,.选择器2,.选择器3,.....,选择器n{}-->
<!--    并集选择器，一般竖着写-->
<!--    任何形式的选择器，都作为并集选择器的一部分-->
<!--    并集选择器，通常用于集体声明，可以缩小样式体积-->
    <style>
        .rich{
            color: #d7b655;

        }
        .beauty{
            color: #db1fd8;
        }
        .dog{
            color: #26d920;

        }
        .pig{
            color: #30a6f5;
        }
        /*.good{*/
        /*    font-size: 40px;*/
        /*    background-color: #32740f;*/
        /*    width: 160px;*/
        /*}*/
        #suxi,
        .rich,
        .beauty,
        .dog,
        .pig{
            font-size: 40px;
            background-color: #32740f;
            width: 160px;
        }
    </style>
</head>
<body>
<!--    <h2>块元素独占一行-->
<!--    <h2 class="rich good">土豪张三</h2>-->
<!--    <h2 class="beauty good">明星李四</h2>-->
<!--    <h2>破产王五（不加任何样式）</h2>-->
<!--    <hr>-->
<!--    <p class="dog good" >小狗旺财</p>-->
<!--    <p class="pig good">小猪佩奇</p>-->
    <h2 class="rich">土豪张三</h2>
    <h2 class="beauty">明星李四</h2>
    <h2>破产王五（不加任何样式）</h2>
    <hr>
    <p class="dog" >小狗旺财</p>
    <p class="pig">小猪佩奇</p>
    <p id="suxi">小羊苏西</p>


</body>
</html>

七、后代选择器

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>
    <style>
        ul li{
            color: #f73131;
        }
        ol li{
            color: #31a440;
        }
        ul li a{
            color: #0000d0;
        }
        ol li a{
            color: #8d7d16;
        }
        /*.subject #front-end {*/
        /*    color: #7a0fa8;*/
        /*}*/
        .subject li.front-end {
            color: #7a0fa8;
        }
        .subject div.front-end {
            color: #a82e0f;
        }



    </style>
</head>
<body>
    <ul>
        <li>抽烟</li>
        <li>喝酒</li>
        <li>
            <a href="#">烫头</a>
        </li>
<!--        <div>-->
<!--            <li>踢球</li>-->
<!--        </div>-->
    </ul>
    <hr>
    <ol>
        <li>张三</li>
        <li>李四</li>
        <li>
            <a href="#">王五</a>
        </li>
    </ol>
    <hr>
    <ol class="subject">
<!--        <li id="front-end">前端</li>-->
        <li class="front-end">前端</li>
        <div class="front-end">学科介绍：学好前端，挂帅杨帆！</div>
        <li>Java</li>
        <li>大数据</li>
        <li>UI</li>
    </ol>


</body>
</html>

八、子代选择器

相关代码：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子代选择器</title>
<!--    选中指定元素中，符合条件的子元素（儿子元素）先写父，再写子-->
<!--    语法：选择器1>选择器2>选择器3>.....选择器n{}-->
<!--    选择器之间，用>隔开，>可以理解为：xxx的子代，其实就是儿子的意思，-->
<!--    选择器1234.....n，可以是我们之前学的任何一种选择器-->
    <style>
        div>a{
            color: #928115;
        }
        div>p>a{
            color: #5bd761;
        }
        .foot>a{
            color: #a834b5;
        }
        /*#foot>a{*/
        /*    color: #a834b5;*/
        /*}*/
    </style>
</head>
<body>
    <div>
        <a href="#">张三</a>
        <a href="#">李四</a>
        <a href="#">王五</a>
        <p>
            <a href="#">赵六</a>
            <div class="foot">
<!--            <div id="foot">-->
                <a href="#">孙七</a>

            </div>
        </p>
    </div>

</body>
</html>

九、兄弟选择器

相关代码：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>兄弟选择器</title>
<!--    作用：选中指定元素后，符合条件的相邻兄弟元素-->
<!--    所谓相邻，就是紧挨着他的下一个，简记：睡在我下铺的兄弟-->

</head>
    <style>
    /*div+p往下看，紧紧相邻，第一个<p>标签变色*/

    /*如果<p>标签和<div>之间有<h1>标签,则与<div>标签最近的<p>标签不改变属性*/
        /*div+p{*/
        /*    color:red;*/
        /*}*/
    /*选中div后所有的兄弟p元素（睡在我下铺的所有兄弟） - 相邻兄弟选择器*/
     /*div~p往下看，紧紧相邻，第一个<p>标签变色*/
        div~p{
            color:red;
        }
        li+li{
            /*除了第一个<li>标签，其他全部变色*/
            color:springgreen;
        }
    </style>
<body>
<!--    <p>测试</p>-->
    <div>尚硅谷</div>
<!--    <h1>前端</h1>-->
    <p>前端</p>
    <p>Java</p>
    <p>大数据</p>
    <P>UI</P>
    <ul>
        <li>主页</li>
        <li>秒杀</li>
        <li>订单</li>
        <li>我的</li>
    </ul>

</body>
</html>

十、属类选择器

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        /*第一种写法，选中具有title属性的元素*/
        /*[title]{*/
        /*    color: #f73131;*/
        /*}*/
        /*第二种写法，选中具有title属性，且属性值为atguigu1的元素*/
        /*[title="atguigu1"]{*/
        /*    color: #f73131;*/
        /*}*/

        /*第三种写法:选中具有title属性，且属性值为字母a开头的元素*/
        /*[title^="a"]{*/
        /*    color: #f73131;*/
        /*}*/
        /*第四种写法:选中具有title属性，且属性值为字母u结尾的元素*/
        /*[title$="u"]{*/
        /*    color: #f73131;*/
        /*}*/
        /*第五种写法:选中具有title属性，且属性值含有字母u的元素*/
        [title*="u"]{
            color: #f73131;
        }
    </style>
</head>
<body>
    <div title="atguigu1">尚硅谷1</div>
    <div title="atguigu2">尚硅谷2</div>
    <div title="guigu">尚硅谷3</div>
    <div title="guigu4">尚硅谷4</div>

</body>
</html>

十一、伪类选择器_概念

相关代码：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器_概念</title>
    <style>
        /*什么是伪类？--- 很像类，但不是类，是元素特殊状态的一种描述*/
        /*选中的是没有访问过的元素*/
        /*Ctrl+Shift+Del调出清除数据缓存*/
        a:link {
            color: #eacc35;
        }
        /*选中的是访问过的元素*/
        a:visited{
            color: #5dcd2d;
        }
    </style>
</head>
<body>
    <a href="https://www.baidu.com">去百度</a>
    <a href="https://www.jd.com">去京东</a>

</body>
</html>

十二、伪类选择器_动态选择器

相关代码：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器_动态选择器</title>
    <style>
        /*顺序：l v h a*/
        /*选中的是没有访问过的元素*/
        a:link {
            color: #eacc35;
        }
        /*选中的是访问过的元素*/
        a:visited{
            color: #5dcd2d;
        }
        /*选中的是鼠标悬浮状态的a元素*/
        a:hover{
            color: #8425c8;
        }
        /*选中的是激活状态的元素*/
        a:active{
            color: #3a8c89;
        }
        /*选中的是鼠标悬浮的span元素*/
        span:hover{
            color: #19562f;
        }
        /*选中的是激活的span元素*/
        span:active{
            color: #a51212;
        }
        /*focus只有表单类元素可以使用*/
        input:focus,select:focus {
            color: #d66c6c;
            background-color: #5dc9dd;
        }
        /*select:focus{*/
        /*    color: #d66c6c;*/
        /*    background-color: #5dc9dd;*/
        /*}*/
    </style>
</head>
<body>
    <a href="https://www.baidu.com">去百度</a>
    <a href="https://www.jd.com">去京东</a>
    <span>信阳农林学院</span>
    <br>
    <input type="text">
    <br>
    <input type="text">
    <br>
    <input type="text">
    <br>
    <select>
        <option value="capital">北京</option>
        <option value="shanghai">上海</option>
    </select>

</body>
</html>

十三、伪类选择器_结构伪类1

相关代码：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器_结构伪类1</title>
    <style>
        /*选中的是div的第一个儿子p元素（按照所有兄弟计算的） --- 看结构1*/
        /*div>p:first-child{*/
        /*    color: #863299;*/
        /*}*/
        /*选中的是div的第一个儿子p元素 （按照所有兄弟计算的）--- 看结构2*/
        /*div>p:first-child{*/
        /*    color: #863299;*/
        /*}*/
        /*选中的是div的后代p元素，且p的父级是谁无所谓，但p必须是其父亲的第一个儿子 （按照所有兄弟计算的）--- 看结构3*/
        /*div p:first-child{*/
        /*!*div p可以选中<p>张三:98分</p>    *!*/
        /*    color: #863299;*/
        /*}*/
        /*选中的是p元素，且p的父级是谁无所谓，但p必须是其父亲的第一个儿子 （按照所有兄弟计算的）--- 看结构3*/
        p:first-child{
        /*div p可以选中<p>张三:98分</p>    */
            color: #863299;
        }
    </style>
</head>
<body>
<!--    结构1-->
<!--    <div>-->
<!--        <p>张三:98分</p>-->
<!--        <p>李四:88分</p>-->
<!--        <p>王五:78分</p>-->
<!--        <p>赵六:68分</p>-->
<!--    </div>-->
<!--    结构2-->
<!--    <div>-->
<!--        <span>张三:98分</span>-->
<!--        <p>李四:88分</p>-->
<!--        <p>王五:78分</p>-->
<!--        <p>赵六:68分</p>-->
<!--    </div>-->
<!--    结构3-->
    <p>测试1</p>
    <div>
        <p>测试2</p>
        <marquee>
            <p>测试3</p>
            <p>张三:98分</p>
        </marquee>
        <p>李四:88分</p>
        <p>王五:78分</p>
        <p>赵六:68分</p>
    </div>

</body>
</html>

十四、伪类选择器_结构伪类2

相关代码：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器_结构伪类2</title>
    <style>
        /*选中的是div的第一个儿子p元素（按照所有兄弟计算的） --- 看结构1*/
        /*div>p:first-child{*/
        /*    color: #863299;*/
        /*}*/
        /*选中的是div的最后一个儿子p元素（按照所有兄弟计算的） --- 看结构1*/
        /*div>p:last-child{*/
        /*    color: #863299;*/
        /*}*/

        /*选中的是div的第n个儿子p元素（按照所有兄弟去计算的）---看结构1*/
        /*div>p:nth-child(3){*/
        /*    color: #b7d727;*/
        /*}*/
        /*nth-child(),括号中可以填写数字、公式（2n+1）、英文运算符（even、odd、taxi）结构2*/
        /*形式必须是an+b的形式*/
        /*1. 0或不写，什么都不选中   --- 几乎不用*/
        /*2. n :选中所有子元素   ---  几乎不用*/
        /*3. 1 ~ 正无穷的整数，选中对应符号的子元素*/
        /*4. 2n或even :选中序号为偶数的子元素*/
        /*5. 2n+1 或 odd : 选中序号为奇数的子元素*/
        /*6. -n+3 :选中前三个*/
        /*div>p:nth-child(-n+5){*/
        /*    color: #b7d727;*/
        /*}*/
        /*选中的是div的第一个儿子的p元素（按照所有兄弟计算的）结构3*/
        /*div>p:first-of-type{*/
        /*    color:rosybrown;*/
        /*}*/
        /*选中的是div的第一个儿子p元素，（按照所有同类型兄弟计算的） --结构3*/
        /*div>p:last-of-type{*/
        /*    color: #13d7b1;*/
        /*}*/
        /*选中的是div的第n个儿子p元素，（按照所有同类型兄弟计算的） --结构3*/
        /*div>p:nth-of-type(5){*/
        /*    color:indianred;*/
        /*}*/
    </style>
</head>
<body>
<!--   结构1-->
<!--    <div>-->
<!--        <p>张三:98分</p>-->
<!--        <p>李四:88分</p>-->
<!--        <p>王五:78分</p>-->
<!--        <p>赵六:68分</p>-->
<!--        <p>孙七:58分</p>-->
<!--        <p>老八:48分</p>-->
<!--&lt;!&ndash;        <span>元素选不中&ndash;&gt;-->
<!--&lt;!&ndash;        <span>老八:48分</span>&ndash;&gt;-->
<!--    </div>-->

<!--        结构2-->
<!--    <div>-->
<!--        <p>第1个</p>-->
<!--        <p>第2个</p>-->
<!--        <p>第3个</p>-->
<!--        <p>第4个</p>-->
<!--        <p>第5个</p>-->
<!--        <p>第6个</p>-->
<!--        <p>第7个</p>-->
<!--        <p>第8个</p>-->
<!--        <p>第9个</p>-->
<!--        <p>第10个</p>-->

<!--    </div>-->

<!--    结构3-->
    <div>
        <span>测试1</span>
        <p>张三:98分</p>
        <p>李四:88分</p>
        <p>王五:78分</p>
        <span>测试2</span>
        <p>赵六:68分</p>
        <p>孙七:58分</p>
        <p>老八:48分</p>
        <span>测试3</span>
        <p>哈哈哈</p>
    </div>


</body>
</html>

十五、伪类选择器_结构伪类3

相关代码：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器_结构伪类3</title>
    <style>
        /*div>p:nth-child(6){*/
        /*    color: #0c997f;*/
        /*}*/
        /*选中div中倒数第n个的儿子p元素(按照所有兄弟) 看结构1*/
        /*div>p:nth-last-child(5){*/
        /*    color: #0dcaf0;*/
        /*}*/
        /*选中的是没有兄弟的span元素     --结构2*/
        /*span:only-child{*/
        /*    color:chartreuse;*/

        /*}*/
        /*选中的是没有同类型兄弟的span元素      --看结构2*/
        /*span:only-of-type {*/
        /*    color: greenyellow;*/
        /*}*/
        /*选中的是根元素*/
        /*:root{*/
        /*    background-color: #0d6efd;*/

        /*}*/
        /*html {*/
        /*    background-color: salmon;*/
        /*}*/
        /*选中的是没有内容的div元素*/
        /*div:empty{*/
        /*    width: 100px;*/
        /*    height: 300px;*/
        /*    background-color: greenyellow;*/

        /*}*/
    </style>
</head>
<body>
<!--    结构1-->
<!--    <div>-->
<!--        <span>测试1</span>-->
<!--        <p>张三:98分</p>-->
<!--        <p>李四:88分</p>-->
<!--        <p>王五:78分</p>-->
<!--        <p>赵六:68分</p>-->
<!--        <p>孙七:58分</p>-->
<!--        <p>老八:48分</p>-->
<!--        <span>测试2</span>-->
<!--    </div>-->
<!--    结构2-->
<!--    <div>-->
<!--        <span>测试1</span>-->

<!--    </div>-->
<!--    <div>-->
<!--        <span>测试2</span>-->
<!--        <p>张三:98分</p>-->
<!--        <p>李四:88分</p>-->
<!--        <p>王五:78分</p>-->
<!--        <p>赵六:68分</p>-->
<!--        <p>孙七:58分</p>-->
<!--        <p>老八:48分</p>-->
<!--        <span>测试4</span>-->
<!--    </div>-->
<!--    结构3-->
    <div></div>

</body>
</html>

十六、伪类选择器_否定伪类

相关代码：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器_否定伪类</title>
    <style>
        /*选中的是div的儿子p元素，但是排除类名为fail的元素*/
        /*div>p:not(.fail){*/
        /*    color: #469928;*/
        /*}*/
        /*选中的是div的儿子p元素，但是排除title属性值以"你要加油"开头的*/
        div>p:not([title^="你要加油"]){
            color: rebeccapurple;
        }

    </style>
</head>
<body>
    <div>
        <p>张三:98分</p>
        <p>李四:88分</p>
        <p>王五:78分</p>
        <p>赵六:68分</p>
        <p class="fail" title="你要加油啊！孙七">孙七:58分</p>
        <p class="fail"title="你要加油啊！老八">老八:48分</p>
    </div>

</body>
</html>

十七、伪类选择器_UI伪类

相关代码：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器_UI伪类</title>
    <style>
        /*选中的是勾选的复选框*/
        /*input:focus {*/
        /*    width: 100px;*/
        /*    height: 100px;*/
        /*}*/
       /*选中的是勾选的复选框*/
        input:checked {
            width: 100px;
            height: 100px;
            /*background-color: #0dcaf0;*/
            /*color: red;*/
        }
        /*选中的是被禁用的input元素*/
        input:disabled {
            background-color: #0ca678;

        }
        /*选中的是可用的input元素*/
        input:enabled{
            background-color: #1D4FFF;
        }
    </style>
</head>
<body>
    <input type="checkbox">
    <input type="radio" name="gender">
    <input type="radio" name="gender">
    <input type="text">
    <input type="text" disabled>

</body>
</html>

十八、伪类选择器_目标伪类

相关代码：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器_目标伪类</title>
    <style>
        div{
            background-color: #0dcaf0;
            height: 300px;
        }
        div:target{
            background-color: green;
        }
    </style>
</head>
<body>
    <a href="#one">去看第1个</a>
    <a href="#two">去看第2个</a>
    <a href="#three">去看第3个</a>
    <a href="#four">去看第4个</a>
    <a href="#five">去看第5个</a>
    <a href="#six">去看第6个</a>
    <a href="#seven">去看第7个</a>
    <div id="one">第1个</div>
    <br>
    <div id="two">第2个</div>
    <br>
    <div id="three">第3个</div>
    <br>
    <div id="four">第4个</div>
    <br>
    <div id="five">第5个</div>
    <br>
    <div id="six">第6个</div>
    <br>
    <div id="seven">第7个</div>

</body>
</html>

十九、伪类选择器_语言伪类

相关代码：

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器_语言伪类</title>
    <style>
        div:lang(en){
            color:red;
        }
        /*:long（）根据指定的元素选择元素（本质是看lang属性的值）*/
        :lang(zh-CN){
            color: green;
        }
        /*p:lang(zh-CN){*/
        /*    color: green;*/
        /*}*/
        /*span:lang(zh-CN){*/
        /*    color: green;*/
        /*}*/

    </style>
</head>
<body>
    <div>尚硅谷</div>
    <div lang="en">atguigu</div>
    <P>前端</P>
    <span>你好</span>

</body>
</html>

二十、伪元素选择器

相关代码：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素选择器</title>
    <style>
        /*什么是伪元素，---很像伪元素，但不是元素（element）,是元素中的一些特殊位置 */
        /*选中的是div中的第一个文字*/
        div::first-letter{
            color: red;
            font-size: 40px;
        }
        /*选中的是div中的第一行文字*/
        div::first-line{
            background-color: yellow;
        }
        /*选中的是div中被鼠标选择的文字*/
        div::selection{
            background-color: #f73131;
            color: #0dcaf0;
        }

        /*span {*/
        /*    color: salmon;*/
        /*    font-size: 40px;*/
        /*}*/
        /*选中的是input元素中的提示文字*/
        input::placeholder{
            color: skyblue;
        }
        /*选中的是p元素最开始的位置*/
        p::before{
            content:"￥";
            color: red;
        }
        /*选中的是p元素最后的位置*/
        p::after {
            content:".00";
        }
    </style>
</head>
<body>
<!--    <div><span>L</span>In the heart of a bustling city, nestled amidst the towering skyscrapers, sat a quaint little coffee shop. Its cozy atmosphere was a welcome oasis from the hustle and bustle of the outside world. The aroma of freshly brewed coffee filled the air, mingling with the sweet scent of pastries. Customers chatted away, lost in their own conversations, while the gentle me</div>-->
    <div>In the heart of a bustling city, nestled amidst the towering skyscrapers, sat a quaint little coffee shop. Its cozy atmosphere was a welcome oasis from the hustle and bustle of the outside world. The aroma of freshly brewed coffee filled the air, mingling with the sweet scent of pastries. Customers chatted away, lost in their own conversations, while the gentle me</div>
    <br>
    <input type="text" placeholder="请输入您的用户名">
    <p>199</p>
    <p>299</p>
    <p>399</p>
    <p>499</p>
</body>
</html>

二十一、选择器_优先级

相关代码：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器优先级</title>
<!--    通过不同的选择器，选中相同的元素，并且为不同的样式名设置不同的值时，就发生了样式的冲突-->
<!--    到底选哪个样式，此时就需要看优先级了-->
    <style>
        /*行内 > 类选择器 > 元素选择器  > 通配选择器*/
        /*#atguigu{*/
        /*    color: yellow;*/
        /*}*/
        h2{
            color:indianred;
        }
        /*.slogan{*/
        /*    color:rosybrown;*/
        /*}*/
        *{
            color: #366b23;
        }
        /*h2{*/
        /*    color: red;*/
        /*}*/
        /**{*/
        /*    color:green;*/
        /*}*/

    </style>
</head>
<body>
    <h2 class="slogan" id="atguigu",style="color:blue;">尚硅谷，让天下没有难学的技术！</h2>

</body>
</html>

二十二、选择器_优先级_详细

相关代码：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器优先级_详细</title>
    <style>
        /*.slogan{*/
        /*    color: #f73131;*/
        /*}*/
        /*.container span.slogan {*/
        /*    color: #f73131;*/
        /*}*/
        /*格式：（a,b,c）*/
        /*a:ID选择器的个数*/
        /*b:类、伪类、属性*/
        /*c:元素、伪元素、选择器的个数*/
        #test #atguigu{
            color: #5f1f8c;
        }
        #atguigu{
            color: yellow;
        }
        div>p>span:nth-child(1){
            color:green;
        }
        div>p>span:first-child(1){
            color:green;
        }
        .slogan{
            color: #f09d0d !important;
            /*宇宙最强：!important*/
            font-size: 40px;
        }

    </style>
</head>
<body>
    <div class="container" id="test">
        <p>
            <span class="slogan" id="atguigu" style="color: #0dcaf0">尚硅谷，让天下没有难学的技术</span>
            <span>欢迎同学们来学习！</span>
        </p>
    </div>

</body>
</html>

二十三、CSS三大特征

相关代码：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS_三大特征</title>
    <link rel="stylesheet" href="../2.CSSLearning/index.css">
    <style>
        h2{
            color: #b81690;
        }
        /*#atguigu {*/
        /*    color: #0dcaf0;*/
        /*}*/
        h2{
            color: #0ca678;
        }
        div{
            color: #0dcaf0;
            font-size: 40px;
            background-color: yellow;
        }
        p{
            color: #dbd070;
        }
        *{
            color: #f73131;
        }
        /*div,p,span{*/
        /*    color: #999ff0;*/
        /*}*/
        div{}
        p{}
        span{}
    </style>
</head>
<body>
    <h2 id="atguigu">尚硅谷</h2>
    <hr>
    <div>
        我是div中的文字
        <span>我是span中的文字1</span>
        <span>我是span中的文字2</span>
        <span>我是span中的文字3</span>
        <p>
            <span>我是span中的文字4</span>
        </p>
    </div>

</body>
</html>
相关推荐
sensen_kiss9 分钟前
CAN201 Introduction to Networking（计算机网络）Pt.2 传输层
网络·学习·计算机网络
橘子遇见BUG14 分钟前
Unity Shader学习日记 part 3 线性代数--矩阵变换
学习·线性代数·unity·矩阵·图形渲染
温轻舟1 小时前
前端开发 -- 自定义鼠标指针样式
开发语言·前端·javascript·css·html·温轻舟
m0_693809381 小时前
Python——day09
python·学习
LeonNo111 小时前
golangb并发，Sync包中Mutes,WaitGroup, NewCond的适应
学习
thesky1234562 小时前
活着就好20241226
学习·算法
远离UE42 小时前
UE5 渲染管线 学习笔记
笔记·学习·ue5
LUwantAC3 小时前
CSS（四）display和float
前端·css
cwtlw3 小时前
CSS学习记录20
前端·css·笔记·学习
米奇妙妙wuu4 小时前
react使用sse流实现chat大模型问答，补充css样式
前端·css·react.js
热门推荐
0119个Web前端交互式3D JavaScript框架和库02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04RAG 实践- Ollama+RagFlow 部署本地知识库05【一文读懂】NTN（非地面网络）技术介绍06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07电赛2024年H题智能小车基于MSPM0G3507主控MCU（利用8路灰度加上MPU6050的解决方式）具体项目报告08组基轨迹建模 GBTM的介绍与实现（Stata 或 R）09Docker 夺命连环 15 问10ZZ038 物联网应用与服务赛题第J套