HTML_CSS学习：CSS选择器

一、通配选择器

相关代码：

<!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>

二、元素选择器

相关代码：

<!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>

三、类选择器

相关代码：

<!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选择器

相关代码：

<!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>

五、复合_交集选择器

相关代码：

<!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-->

六、复合_并集选择器

相关代码：

<!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>

七、后代选择器

<!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>

八、子代选择器

相关代码：

<!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>

九、兄弟选择器

相关代码：

<!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>

十、属类选择器

<!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>

十一、伪类选择器_概念

相关代码：

<!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>

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

相关代码：

<!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

相关代码：

<!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

相关代码：

<!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

相关代码：

<!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>

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

相关代码：

<!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伪类

相关代码：

<!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>

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

相关代码：

<!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>

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

相关代码：

<!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>

二十、伪元素选择器

相关代码：

<!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>

二十一、选择器_优先级

相关代码：

<!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>

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

相关代码：

<!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三大特征

相关代码：

<!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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/5528.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【C语言】——数据在内存中的存储

【C语言】——数据在内存中的存储

【C语言】——数据在内存中的存储 一、整数在内存中的存储1.1、整数的存储方式1.2、大小端字节序&#xff08;1&#xff09;大小端字节序的定义&#xff08;2&#xff09;判断大小端 1.3、整型练习 二、浮点数在内存中的存储2.1、引言2.2、浮点数的存储规则2.3、浮点数的存储过…
阅读更多...
macbookproM2通过docker安装CDH

macbookproM2通过docker安装CDH

背景&#xff1a;项目中用的CDH大数据集群&#xff0c;但是自己的电脑上是MacM芯片的系统&#xff0c;网上在arm架构上搭建CDH集群的资料太少了&#xff0c;所以自己尝试搭建并且梳理一下文档 一、启动docker 我安装的是桌面版的docker 二、搜索CDH的镜像&#xff0c;然后拉…
阅读更多...
【八大排序（三）】快速排序

【八大排序（三）】快速排序

❣博主主页: 33的博客❣ ▶️文章专栏分类:八大排序◀️ &#x1f69a;我的代码仓库: 33的代码仓库&#x1f69a; &#x1faf5;&#x1faf5;&#x1faf5;关注我带你了解更多排序知识 目录 1.前言2.快速排序2.1概念2.2画图理解2.3递归代码实现2.3.1Hoare法2.3.2挖坑法2.3.3前…
阅读更多...
【介绍下OneFlow概念清单】

【介绍下OneFlow概念清单】

&#x1f308;个人主页: 程序员不想敲代码啊 &#x1f3c6;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f44d;点赞⭐评论⭐收藏 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共…
阅读更多...
智能健康管理系统的一次新体验

智能健康管理系统的一次新体验

智能健康管理系统是一个集成了多方面数据资源&#xff0c;并配合人工智能算法的健康管理系统。该系统的应用涉及多个领域&#xff0c;包括医学、科学、生态和医疗保健等。其服务对象包括健康人群、亚健康人群和疾病人群&#xff0c;旨在通过病因预防、临床前期预防和临床预防三…
阅读更多...
Java设计模式 _结构型模式_组合模式

Java设计模式 _结构型模式_组合模式

一、组合模式 1、组合模式 组合模式&#xff08;Composite Pattern&#xff09;是这一种结构型设计模式。又叫部分整体模式。组合模式依据树形结构来组合对象&#xff0c;用来表示部分以及整体层次关系。即&#xff1a;创建了一个包含自己对象组的类&#xff0c;该类提供了修改…
阅读更多...
代码随想录——双指针与滑动窗口(四)

代码随想录——双指针与滑动窗口(四)

一.1423. 可获得的最大点数 题目详情 解题思路 这里我们每次只能取最左或最右边的卡牌,第一反应其实是使用双指针&#xff0c;通过局部贪心来解决&#xff0c;但是如果两边相等的话用局部贪心无法来判断到底取哪一边&#xff0c;那我们不妨换一个思路&#xff1a; 我们首先任…
阅读更多...
AI项目二十一：视频动态手势识别

AI项目二十一：视频动态手势识别

若该文为原创文章&#xff0c;转载请注明原文出处。 一、简介 人工智能的发展日新月异&#xff0c;也深刻的影响到人机交互领域的发展。手势动作作为一种自然、快捷的交互方式&#xff0c;在智能驾驶、虚拟现实等领域有着广泛的应用。手势识别的任务是&#xff0c;当操作者做出…
阅读更多...
【QT教程】QT6图形渲染与OpenGL编程

【QT教程】QT6图形渲染与OpenGL编程

QT6图形渲染与OpenGL编程 使用AI技术辅助生成 QT界面美化视频课程 QT性能优化视频课程 QT原理与源码分析视频课程 QT QML C扩展开发视频课程 免费QT视频课程 您可以看免费1000个QT技术视频 免费QT视频课程 QT统计图和QT数据可视化视频免费看 免费QT视频课程 QT性能优化视频免…
阅读更多...
写文献综述常用的几种深度神经网络模型！

写文献综述常用的几种深度神经网络模型！

写文献综述常用的几种深度神经网络模型 卷积神经网络&#xff08;CNN&#xff09; 解释说明&#xff1a;专门用于处理图像和图像数据的深度学习模型。它通过卷积层、池化层等操作提取图像特征。应用&#xff1a;图像分类、目标检测、人脸识别等。未来改进&#xff1a;进一步提…
阅读更多...
Linux 文件管理命令sum setfacl getfacl chacl

Linux 文件管理命令sum setfacl getfacl chacl

文章目录 2.Linux 文件管理命令2.58 sum&#xff1a;计算文件的校验和&#xff0c;以及文件占用的块数案例练习 2.59 setfacl&#xff1a;设定文件访问控制列表案例练习 2.60 getfacl&#xff1a;获取文件访问控制列表案例练习 2.61 chacl&#xff1a;更改文件或目录的访问控制…
阅读更多...
Docker使用方法

Docker使用方法

Docker是一种容器化平台&#xff0c;它可以帮助开发人员将应用程序和其依赖项打包成一个独立的、可移植的容器&#xff0c;以便在不同的环境中运行。 以下是使用Docker的基本步骤&#xff1a; 安装Docker&#xff1a;首先&#xff0c;您需要在您的机器上安装Docker。您可以从D…
阅读更多...
Pytorch：神经网络过程代码详解

Pytorch：神经网络过程代码详解

文章目录 一、基本概念1、epoch2、遍历DataLoader 二、神经网络训练过程代码详解步骤一&#xff1a;选择并初始化优化器步骤二&#xff1a;计算损失步骤三&#xff1a;反向传播步骤四&#xff1a;更新模型参数步骤五&#xff1a;清空梯度组合到训练循环中步骤六&#xff1a;保存…
阅读更多...
windows和mac 电脑 部署Ollama

windows和mac 电脑 部署Ollama

官网地址&#xff1a;https://ollama.com/ github地址&#xff1a;https://github.com/ollama/ollama 一、windows下 https://github.com/ollama/ollama 安装大模型 ollama run llama3 下载的大模型地址&#xff1a; C:\Users\dengg\.ollama 4.34G
阅读更多...
二维数组-----刷题2

二维数组-----刷题2

题目不是傻子题目&#xff0c;但很简单&#xff01;定义一个变量k&#xff0c;在嵌套中不断累加输出即可。 #include<cstdio> int k,n; int main(){scanf("%d",&n);for(int i1;i<n;i){for(int j1;j<n;j){k;printf("%d ",k);}printf("…
阅读更多...
Python基础学习之记录中间文件

Python基础学习之记录中间文件

倘若想记录代码运行过程中的结果文件&#xff0c;那么以下函数仅供参考 代码示例&#xff1a; import os import datetime import sys import pandas as pd# 定义总的文件夹路径 base_folder E:\\D\\log\\product_data_compare_log# 定义一个函数来创建带时间戳的文件夹 def…
阅读更多...
LoRa模块在智能灌溉系统中的应用特点介绍

LoRa模块在智能灌溉系统中的应用特点介绍

LoRa模块在智能灌溉系统中的应用特点主要体现在以下几个方面&#xff1a; 低功耗与长寿命&#xff1a; LoRa模块具有极低的功耗&#xff0c;使其在待机状态下耗电量极低&#xff0c;能够支持长时间连续运行&#xff0c;减少了频繁更换电池或充电的需求&#xff0c;确保了智能灌…
阅读更多...
【Godot4.2】有序和无序列表函数库 - myList

【Godot4.2】有序和无序列表函数库 - myList

概述 在打印输出或其他地方可能需要构建有序或无序列表。本质就是构造和维护一个纯文本数组。并用格式化文本形式&#xff0c;输出带序号或前缀字符的多行文本。 为此我专门设计了一个类myList&#xff0c;来完成这项任务。 代码 以下是myList类的完整代码&#xff1a; # …
阅读更多...
SQL Sever无法连接服务器

SQL Sever无法连接服务器

SQL Sever无法连接服务器&#xff0c;报错证书链是由不受信任的颁发机构颁发的 解决方法&#xff1a;不用ssl方式连接 1、点击弹框中按钮“选项” 2、连接安全加密选择可选 3、不勾选“信任服务器证书” 4、点击“连接”&#xff0c;可连接成功
阅读更多...
python安卓自动化pyaibote实践------学习通自动刷课

python安卓自动化pyaibote实践------学习通自动刷课

前言 欢迎来到我的博客 个人主页:北岭敲键盘的荒漠猫-CSDN博客 本文是一个完成一个自动播放课程&#xff0c;避免人为频繁点击脚本的构思与源码。 加油&#xff01;为实现全部电脑自动化办公而奋斗&#xff01; 为实现摆烂躺平的人生而奋斗&#xff01;&#xff01;&#xff…
阅读更多...
最新文章

Copyright @ 2022~2023