代码:
<!DOCTYPE html> <html> <head> <title>这是网页标题</title> <style type="text/css"> /*<style> 元素里面的是 CSS 代码*/ p{ color: red; } </style> </head> <body> <p>段落是红色的。</p> </body> </html>
运行结果为:
段落是红色的。
注意:
基础选择器分为:
代码:
<!DOCTYPE html> <html> <head> <title>这是网页标题</title> <style type="text/css"> /*<style> 元素里面的是 CSS 代码*/ p{ color: red; } </style> </head> <body> <p>这个段落是红色的。</p> <p>这个段落也是红色的。</p> <p>这个段落还是红色的。</p> </body> </html>
运行结果为:
这个段落是红色的。
这个段落也是红色的。
这个段落还是红色的。
注意:
代码:
<!DOCTYPE html> <html> <head> <title>这是网页标题</title> <style type="text/css"> /*<style> 元素里面的是 CSS 代码*/ .example{ background-color: yellow; } </style> </head> <body> <p class="example">这个段落的背景颜色是黄色的。</p> <p>这个段落没有设置背景颜色。</p> </body> </html>
运行结果为:
这个段落的背景颜色是黄色的。
这个段落没有设置背景颜色。
注意:
代码:
<!DOCTYPE html> <html> <head> <title>这是网页标题</title> <style type="text/css"> /*<style> 元素里面的是 CSS 代码*/ #example{ font-size: 50px; } </style> </head> <body> <!--最好在同一个 HTML 文档中所有的 id 名称都不相同--> <p id="example">这个段落的字体变大了。</p> <p>这个段落没有设置字体的大小。</p> </body> </html>
运行结果为:
这个段落的字体变大了。
这个段落没有设置字体的大小。
注意:
代码:
<!DOCTYPE html> <html> <head> <title>这是网页标题</title> <style type="text/css"> /*<style> 元素里面的是 CSS 代码*/ *{ color: red; } </style> </head> <body> <h1>我是红色的。</h1> <h3>我是红色的。</h3> <p>我也是红色的。</p> <a href="http://www.baidu.com">我还是红色的</a> </body> </html>
运行结果为:
我也是红色的。
注意:
代码1:
<!DOCTYPE html> <html> <head> <title>这是网页标题</title> <style type="text/css"> /*<style> 元素里面的是 CSS 代码*/ [href]{ color: red; } </style> </head> <body> <p>匹配属性为 href 的元素:</p> <a href="http://www.baidu.com">百度</a> </body> </html>
运行结果为:
匹配属性为 href 的元素:
注意:
代码2:
<!DOCTYPE html> <html> <head> <title>这是网页标题</title> <style type="text/css"> /*<style> 元素里面的是 CSS 代码*/ [href="#top"]{ color: red; } [href="#top1"]{ color: gray; } </style> </head> <body> <p>完全匹配,只匹配属性和值都相同的元素:</p> <a href="#top">返回顶部</a> <br /> <a href="#top1">返回 基础选择器目录</a> </body> </html>
运行结果为:
完全匹配,只匹配属性和值都相同的元素:
返回顶部注意:
代码3:
<!DOCTYPE html> <html> <head> <title>这是网页标题</title> <style type="text/css"> /*<style> 元素里面的是 CSS 代码*/ [href*=baidu]{ color: orange; } </style> </head> <body> <p>通过属性和属性值中的字符串进行匹配:</p> <a href="http://www.baidu.com">百度</a> <br /> <a href="https://www.tieba.baidu.com/">百度贴吧</a> </body> </html>
运行结果为:
通过属性和属性值中的字符串进行匹配:
注意:
属性选择器还有很多,这里只列举了其中的三种
其他的属性选择器可以参考 https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
组合选择器:
代码:
<!DOCTYPE html> <html> <head> <title>这是网页标题</title> <style type="text/css"> /*<style> 元素里面的是 CSS 代码*/ p + span{ background-color: orange; } </style> </head> <body> <p>这是一个段落。</p> <span>这是一段测试文字</span> <p>这是另外一个段落。</p> <br /> <span>这是另外一段测试文字</span> </body> </html>
运行结果为:
这是一个段落。
这是一段测试文字这是另外一个段落。
注意:
代码:
<!DOCTYPE html> <html> <head> <title>这是网页标题</title> <style type="text/css"> /*<style> 元素里面的是 CSS 代码*/ p ~ span{ background-color: orange; } </style> </head> <body> <p>这是一个段落。</p> <span>这是一段测试文字</span> <p>这是另外一个段落。</p> <br /> <span>这是另外一段测试文字</span> </body> </html>
运行结果为:
这是一个段落。
这是一段测试文字这是另外一个段落。
注意:
代码:
<!DOCTYPE html> <html> <head> <title>这是网页标题</title> <style type="text/css"> /*<style> 元素里面的是 CSS 代码*/ div > span{ background-color: yellow; } </style> </head> <body> <div> <span>测试文字1</span> <p> <span>测试文字2</span> </p> <span>测试文字3</span> </div> </body> </html>
运行结果为:
测试文字2
测试文字3注意:
代码:
<!DOCTYPE html> <html> <head> <title>这是网页标题</title> <style type="text/css"> /*<style> 元素里面的是 CSS 代码*/ div span{ background-color: yellow; } </style> </head> <body> <div> <span>测试文字1</span> <p> <span>测试文字2</span> </p> <span>测试文字3</span> </div> </body> </html>
运行结果为:
测试文字2
测试文字3注意:
伪选择器:
代码1:
<!DOCTYPE html> <html> <head> <title>这是网页标题</title> <style type="text/css"> /*<style> 元素里面的是 CSS 代码*/ a:hover{ color: red; } </style> </head> <body> <p>鼠标悬浮在下面这个链接上的时候,链接会变成红色:</p> <a href="http://www.baidu.com">百度</a> </body> </html>
运行结果为:
鼠标悬浮在下面这个链接上的时候,链接会变成红色:
注意:
代码2:
<!DOCTYPE html> <html> <head> <title>这是网页标题</title> <style type="text/css"> /*<style> 元素里面的是 CSS 代码*/ p:first-child{ background-color: yellow; } </style> </head> <body> <p>这是 body 的第一个子元素</p> <div id="1"> <p>这是 id="1" 的 div 的第一个子元素</p> <p>这是 id="1" 的 div 的第二个子元素</p> </div id="2"> <div> <span>这是 id="2" 的 div 的第一个子元素</span> <p>这是 id="2" 的 div 的第二个子元素</p> </div> </body> </html>
运行结果为:
这是 body 的第一个子元素
这是 id="1" 的 div 的第一个子元素
这是 id="1" 的 div 的第二个子元素
这是 id="2" 的 div 的第一个子元素这是 id="2" 的 div 的第二个子元素
注意:
代码3:
<!DOCTYPE html> <html> <head> <title>这是网页标题</title> <style type="text/css"> /*<style> 元素里面的是 CSS 代码*/ p:nth-child(1){ background-color: yellow; } p:nth-child(2){ background-color: gray; } </style> </head> <body> <p>这是 body 的第一个子元素</p> <div id="1"> <p>这是 id="1" 的 div 的第一个子元素</p> <p>这是 id="1" 的 div 的第二个子元素</p> </div id="2"> <div> <span>这是 id="2" 的 div 的第一个子元素</span> <p>这是 id="2" 的 div 的第二个子元素</p> </div> </body> </html>
运行结果为:
这是 body 的第一个子元素
这是 id="1" 的 div 的第一个子元素
这是 id="1" 的 div 的第二个子元素
这是 id="2" 的 div 的第一个子元素这是 id="2" 的 div 的第二个子元素
注意:
伪元素选择器是 CSS3 中的用法
例如:/* CSS3 syntax */ ::after /* CSS2 syntax */ :after
具体用法参考 https://developer.mozilla.org/en-US/docs/Web/CSS/::after
返回 伪选择器目录CSS 的选择器大概可以分为三大类:基础选择器、组合选择器、伪选择器
这三大类可以单独使用,也可以混合使用
例如:
<!DOCTYPE html> <html> <head> <title>这是网页标题</title> <style type="text/css"> /*<style> 元素里面的是 CSS 代码*/ p#test{ color: red; } </style> </head> <body> <p id="test">这是一个段落。</p> <p>这也是一个段落。</p> </body> </html>
运行结果为:
这是一个段落。
这也是一个段落。
注意:
CSS 参考文档 https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
返回顶部
如对本文有疑问, 点击进行留言回复!!
css深入剖析transform的translate和perspective
HCIE第四天总结(典型组网之一:CSS+Eth-Trunk+iStack)
了解下Apache Elasticsearch 和 Kibana
网友评论