搜索到
98
篇与
的结果
-
CSS选择器 选择页面上的某一个或某一类元素1.1 基本选择器标签选择器：选择一类标签 标签{}<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基本选择器</title> <style> /*标签选择器，会选择到页面上所有的h1标签（以h1标签为例）*/ h1{ color: red; background-color: aquamarine; border-radius: 15px; } </style> </head> <body> <h1>CSS学习</h1> <p>学习CSS</p> <h1>CSS学习</h1> </body> </html>类选择器：选择所有class属性一致的标签，跨标签 .类名{}<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--类选择器 语法： .class的名称{} 可以多个标签归类（同一个class），可以复用 --> <style> .test01{ color: #5f85ff; } .test02{ font-family: '方正舒体'; color: #ff23bd; } </style> </head> <body> <h1 class="test01">类选择器</h1> <h1 class="test02">类选择器</h1> <h1 class="test01">类选择器</h1> <p class="test01">类选择器</p> </body> </html>id选择器：全局唯一 #id名{}<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>id选择器</title> <!--id选择器 语法：#id名称{} 优先级：不遵循就近原则（固定的） id选择器 > class选择器 > 标签选择器 --> <style> #test01{ color: #5f85ff; } .test02{ color: aquamarine; } h1{ color: red; } </style> </head> <body> <h1 id="test01">id选择器</h1> <h1 class="test02">id选择器</h1> <h1 class="test02">id选择器</h1> <h1>id选择器</h1> <h1>id选择器</h1> </body> </html>优先级：id > class > 标签1.2 层次选择器1、后代选择器：在某个元素的后面 祖父--父母--自己/*后代选择器*/ body p{ background-color: #5f85ff; }2、子选择器：一代--儿子/*子选择器*/ body>p{ background-color: red; }3、相邻兄弟选择器：同辈/*相邻兄弟选择器：只有一个，相邻（向下）*/ .active + p{ background-color: aqua; }4、通用选择器/*通用选择器，当前选中元素的向下的所有兄弟元素*/ .active~p{ background-color: azure; }1.3 结构伪类选择器伪类：条件/*ul的第一个子元素*/ ul li:first-child{ background-color: #5f85ff; } /*ul的最后一个子元素*/ ul li:last-child{ background-color: aquamarine; } /* 选中p1：定位到父元素，选择当前的第一个元素 选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效 */ p:nth-child(2){ background-color: bisque; } /*选中父元素，下的p元素的第二个类型*/ p:nth-of-type(1){ background-color: bisque; }<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>结构伪类选择器</title> <style> /*ul的第一个子元素*/ ul li:first-child{ background-color: #5f85ff; } /*ul的最后一个子元素*/ ul li:last-child{ background-color: aquamarine; } /* 选中p1：定位到父元素，选择当前的第一个元素 选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效 */ p:nth-child(1){ background-color: bisque; } /*选中父元素，下的p元素的第一个类型*/ p:nth-of-type(2){ background-color: bisque; } /*a:hover{*/ /* background-color: #5f85ff;*/ /*}*/ </style> </head> <body> <!--<a href="#">123321</a>--> <!--<h1>h1</h1>--> <p>p1</p> <p>p2</p> <p>p3</p> <ul> <li>li1</li> <li>li2</li> <li>li3</li> </ul> </body> </html>1.4 属性选择器id+class结合<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>属性选择器</title> <style> .test a{ float: left; display: block; height: 50px; width: 50px; border-radius: 8px; background-color: #5f85ff; text-align: center; color: black; text-decoration: none; margin-right: 5px; font: bold 20px/50px Arial; } /* 属性名，属性名 = 属性值（正则） = 绝对等于 *= 包含这个元素 ^= 以xxx开头 &= 以xxx结尾 */ /* 有id属性的元素 a[]{} */ /*a[id]{*/ /* background-color: yellow;*/ /*}*/ /* id = test01的元素 */ /*a[id=test01]{*/ /* background-color: yellow;*/ /*}*/ /* class中有links的元素 */ /*a[class *= "links"]{*/ /* background-color: yellow;*/ /*}*/ /* 选中herf中以http开头的元素 */ /*a[href ^= "http"]{*/ /* background-color: yellow;*/ /*}*/ a[href $= "abc"]{ background-color: yellow; } </style> </head> <body> <p class="test"> <a href="http://www.baidu.com" class="links item" id="test01">1</a> <a href="image/123.jpg" class="links image" id="test02">2</a> <a href="image/123.png">3</a> <a href="abc">4</a> <a href="/a.pdf">5</a> <a href="/b.doc">6</a> <a href="abc.abc">7</a> </p> </body> </html>= 绝对等于 *= 包含xxx ^= 以xxx开头 $= 以xxx结尾 -
CSS导入方式 CSS导入方式：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--2、内部样式--> <style> h1{ color: red; } </style> <!--3、外部样式--> <link rel="stylesheet" href="css/style.css"> </head> <body> <!--优先级：就近原则--> <!--1、行内样式，在标签元素中，编写一个style属性，编写样式即可--> <h1 style="color: aqua">标题</h1> </body> </html>行内样式<h1 style="color: aqua">标题</h1>内部样式<style> h1{ color: red; } </style>链接式<link rel="stylesheet" href="css/style.css">导入式@import CSS 2.1特有<style> @import url("css/style.css"); </style>
