Dieser Artikel enthält Codebeispiele für CSS-Selektoren und CSS-Prioritätscodebeispiele. Freunde in Not können darauf verweisen.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="./css/index.css"> <title>CSS入门第一节</title> <!-- 嵌入样式 页内样式--> <style> p { color: yellowgreen; } </style> </head> <body> <!-- 内敛样式 --> <div style="color: red; font-size: 24px; border: 1px solid black;"> 我是DIV </div> <p> 我是段落标签 </p> <h1> 我是大标题 </h1> </body> </html>
/*index.css文件*/ p { /* 设置字体大小为:50像素 */ font-size: 50px; /* 设置p标签的背景色为银灰色 */ background-color: silver; } span { font-size: 28px; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>css练习</title> <link rel="stylesheet" href="./css/index.css"> </head> <style> h1 { color: green; } </style> <body> <p style="background-color: red;">设置p标签的背景色为红色</p> <h1>设置H1标签的字体颜色为绿色</h1> <span>设置span标签的文本为14像素</span> </body> </html>
Platzhalterauswahl
<!DOCTYPE html> <!-- 通配符选择器 --> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS选择器</title> </head> <style> * { color: #3cd; } /* 通配符选择器:统统都被匹配上,可以选择到所有的标签 */ </style> <body> <h1>标题</h1> <p> 内容 </p> <ul> <li>北京</li> <li>南京</li> <li>山东</li> </ul> <strong>这是strong标签</strong><br/> <span>demo</span> </body> </html>
CSS-Selektor
<!DOCTYPE html> <!-- 标签选择器 --> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS选择器</title> </head> <style> /* 标签选择器 */ p { color: red; } li { background-color: gold; } span { font-size: 50px; } /* id选择器 */ /* id命名规范:必须以字母开头(不限制大小写),然后可以包含数字/字母/下划线/连接符- */ #li-beijing { background-color: silver; } #li-shanghai { background-color: aquamarine; } </style> <body> <h1>标题</h1> <p> 内容</p> <ul> <li id="li-beijing">北京</li> <li id="li-shanghai">南京</li> <li>山东</li> </ul> <strong>这是strong标签</strong> <br/> <span>demo</span> </body> </html>
Klassenselektor
<!DOCTYPE html> <!-- 类选择器 --> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS的类选择器</title> </head> <style> .lf-p { color: green; } .fl{ background-color: #cdf; } </style> <body> <h1>标题</h1> <p class="p_1"> 段落一</p> <p class="lf-p fl"> 段落二</p> <p class="lf-p"> 段落三</p> </body> </html>
Selector Umfassende Übung
<!DOCTYPE html> <!-- 标签选择器 类选择器 id选择器 --> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>选择器综合练习</title> </head> <style> h1 { color: red; font-size: 30px; } span { font-size: 18px; } #comt { color: yellow; /* font-size: 18px; */ } .date { color: purple; /* font-size: 18px; */ } .articleP{ font-size: 18px; color: blue; } </style> <body> <h1>标题</h1> <p> <span id="comt">段落</span> <span class="date">时间</span> </p> <p class="articleP">正文</p> </body> </html>
Zusammengesetzte Auswahl
<!DOCTYPE html> <!-- 复合选择器:标签指定式选择器,后代选择器,并集选择器 --> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>复合选择器</title> <style> /* 1.请把li中的class等于current的标签的背景设置为高亮(颜色为蓝色) 2.请把class为news的ul标签下面的所有的li标签中的文字设置为黑色(#333) 3.请把体育新闻和财经新闻的文字设置为银灰色 */ /* 标签指定式选择器 */ li.current { background-color: lightblue; } li#home { font-weight: bold; /*字体加粗*/ } /* 后代选择器 */ .news a { /* color:#333; */ color: green; } /* 并集选择器 */ .f-news a, .s-news a { color: silver; } /* 如果两个优先级一致的话,后面的则优先生效 */ .othernews a { color: red; } /* 并集选择器 */ html, body, p, dt, dl, dd, ul, p { padding: 0; /* 内边距 */ margin: 0; /* 外边距 */ } </style> </head> <body> <ul> <li id="home"><a href="#">首页</a></li> <li><a href="#">产品</a></li> <li class="current"><a href="#">新闻</a></li> <li><a href="#">售后</a></li> <li><a href="#">关于</a></li> </ul> <ul class="news"> <li><a href="#">哈哈哈哈哈哈</a></li> <li><a href="#">哈哈哈哈哈哈</a></li> <li><a href="#">哈哈哈哈哈哈</a></li> <li><a href="#">哈哈哈哈哈哈</a></li> </ul> <dl class="f-news othernews"> <dt><a href="#">财经新闻</a></dt> <dd><a href="#">内容</a></dd> <dd><a href="#">内容</a></dd> <dd><a href="#">内容</a></dd> </dl> <dl class="s-news othernews"> <dt><a href="#">体育新闻</a></dt> <dd><a href="#">内容</a></dd> <dd><a href="#">内容</a></dd> <dd><a href="#">内容</a></dd> </dl> </body> </html>
Untergeordnete Elementauswahl
<!DOCTYPE html> <!-- 子选择器 --> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>子元素选择器</title> <style> /* 子选择器 */ p > strong { color: red; } </style> </head> <body> <p> <p> <span>段落1</span> <span> <strong>段落2</strong> </span> <span>段落3</span> <strong>强调标签</strong> </p> </p> </body> </html>
Attributselektor
<!DOCTYPE html> <!-- 属性选择器 --> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>属性选择器</title> <style> span[class] { color: green; } /* 拥有id属性的标签都被选择出来 */ [id] { font-size: 50px; } span[id="4"] { color: yellow; } /* 属性包含选择器 */ span[class~="demo"] { font-size: 100px; } </style> </head> <body> <p> <span class="cur demo">1</span> <span>2</span> <span id="3">3</span> <span id="4">4</span> <span>5</span> </p> </body> </html>
Pseudoklassenselektor
<!DOCTYPE html> <!-- 伪类选择器 --> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>伪类选择器</title> <style> a:link { color: red; } /* 当链接被访问过了之后,就会添加伪类visited */ a:visited { color: lawngreen; } /* 当鼠标悬停于元素上面的时候,会自动添加伪类:hover */ a:hover { color: #fff; background-color: aquamarine } /* 当链接被点击,但是鼠标不要放开的时候, 会自动给连接添加active伪类*/ a:active { color: gold; } /* 遵循LoVe HAte 原则,否则可能无法正常显示*/ /* 获取到焦点的时候,默认给标签添加focus效果 */ input:focus{ color: red; } </style> </head> <body> <a href="#">首页</a> <a href="#">产品</a> <a href="#">新闻</a> <a href="/">娱乐</a> <input type="text" name="" id=""> </body> </html>
Pseudoelementselektor
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>伪元素选择器</title> <style> /* 第一个必须是span标签,第二:是第一个孩子 */ span:first-child { color: red; font-size: 50px; } /* 段落的首个字符 */ p:first-letter { font-size: 50px; color: green; } /* 设置一行 */ p::first-line { color: gold; } /* 在标签前面追加内容 */ #temp::before { content:"================"; } /* 在标签后面追加内容 */ #temp:after { content:"xxxxxxxxxxxxxxx"; } </style> </head> <body> <p id="temp"> <span>一</span> <span>二</span> <span>三</span> </p> <p> <span>1</span> <span>2</span> <span>3</span> </p> <p>张宜成</p> </body> </html>
Eigenschaften von CSS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS的特性:层叠性和继承性</title> <style> p { color: red; font-size: 40px; } p{ color: green; } a{ color:inherit; /*继承父标签的属性*/ } /* 继承性:父容器设置的样式,子容器也可以享受同等待遇 */ /* 所有字相关的都可以继承,比如:color,text-系列/font-系列/line-系列/cursor 并不是所有的CSS属性都可以继承,例如,下面的属性就不具有继承性:边框,外边距,内边距,背景,定位,元素宽高属性. a标签不继承父标签的字体颜色 */ </style> </head> <body> <p> 层叠性和继承性 <span>我是Span标签</span> <a href="#">我是a标签,我特立独行</a> </p> <span>我是Span标签2</span> </body> </html>
Priorität von CSS
<!DOCTYPE html> <!-- 第一原则: CSS优先级从高到低: 内联样式 嵌入样式 外部引入样式 继承样式 默认样式 --> <!-- 第二原则: ID选择器 > 类(伪类) > 标签 > 继承 > 默认--> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- 外部引入样式优先级大于继承样式 --><!-- 优先级别可能与嵌入样式互换,如果将link放到style下面, 则外部引入样式优先于嵌入样式 --> <link rel="stylesheet" href="./css/t.css"> <title>优先级</title> <style> /* 继承样式大于默认样式 */ body{ color: blueviolet; } /* 嵌入样式大于外部引入 */ p { color: green; font-size: 50px; background-color: sienna; } .fs{ font-style: 400px; } #tp #atc{ font-size: 20px; /* !important是重要的意思,优先级最高高于内敛样式 */ color:lightsalmon !important; } </style> </head> <body id="tp"> <!-- 内联样式优先级大于嵌入样式 --> <p id="atc" class="fs" style="color: blue;"> 我是段落 </p> </body> <!-- 综述: --> <!-- 行内样式 > 页内样式 > 外部引用样式 > 浏览器默认样式 --> <!-- important > 内联 > ID > 伪类/类/属性选择 > 标签 > 伪对象 > 通配符 > 继承 --> </html>
Verwandte Empfehlungen:
Wie implementiert man einen benutzerdefinierten Bildlaufleistenstil in CSS3? (Code)
Welche Arten von CSS-Selektoren gibt es? Eine kurze Einführung in häufig verwendete CSS-Selektoren
Das obige ist der detaillierte Inhalt vonCodebeispiele für CSS-Selektoren und Codebeispiele für CSS-Prioritäten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!