CSS 笔记之 CSS 选择器
2018-06-24 02:19:17来源:未知 阅读 ()
阅读目录
- 介绍 CSS 的基本语法格式
- 介绍 基础选择器
- 介绍 组合选择器
- 介绍 伪选择器
- 介绍 其他
一、CSS 的基本语法格式
代码:
<!DOCTYPE html> <html> <head> <title>这是网页标题</title> <style type="text/css"> /*<style> 元素里面的是 CSS 代码*/ p{ color: red; } </style> </head> <body> <p>段落是红色的。</p> </body> </html>
运行结果为:
段落是红色的。
注意:
- 上面是一个简单的演示示例
- 重点看 <style> 元素
- CSS 语法的一般形式是 selector{ property: value };
- 这篇文章主要讲解的是 selector(选择器),下面会为每种选择器举一个例子
二、基础选择器
基础选择器分为:
- 类型选择器
- 类选择器
- id选择器
- 通用选择器
- 属性选择器
1、类型选择器
代码:
<!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>
运行结果为:
这个段落是红色的。
这个段落也是红色的。
这个段落还是红色的。
注意:
- 上面的重点代码是 p{ color: red; }
- 是 <p> 元素作为选择器
- 效果是当指定 <p> 元素的字体颜色为红色时,所有段落的字体都会变成红色
- 绝大多数的元素都可以作为选择器,例如: <h1> 、<h2> 、<a> 、<div> 等等
2、类选择器
代码:
<!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>
运行结果为:
这个段落的背景颜色是黄色的。
这个段落没有设置背景颜色。
注意:
- 上面的重点代码是 .example{ background-color: yellow; } 和包含了 class 属性那一行的代码,注意这里的 example 只是一个名称,可以用其他词来代替
- 设置了 class 属性的段落,显示的效果为背景颜色变成黄色
3、id 选择器
代码:
<!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>
运行结果为:
这个段落的字体变大了。
这个段落没有设置字体的大小。
注意:
- 上面的重点代码是 #example{ font-size: 50px; } 和包含了 id 属性那一行的代码,注意这里的 example 也只是一个名称,可以用其他词来代替
- 设置了 id 属性的段落,显示效果为字体变大了
- id 选择器和类选择器很相似,但是应用场景不太一样
- id 选择器匹配的 id 名称最好是唯一的,即在同一个 HTML 文档中最好每个 id 的名称都不相同,例如上面的代码中有一个段落的 id 名称已经是 example 了,那么其他段落就不要再用同一个 id 名称来设置字体大小了
- class 名称在同一个 HTML 文档中可以相同,所以说通常设置段落的格式时,用类选择器比用 id 选择器更加合适一点
4、通用选择器
代码:
<!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>
运行结果为:
我是红色的。
我是红色的。
我也是红色的。
我还是红色的注意:
- 上面的重点代码是 *{ color: red; }
- * 是通用选择器,显示的效果为所有元素的字体都变成了红色
5、属性选择器
代码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 的元素:
百度注意:
- 上面的重点代码是 [href]{ color: red; } 和含有 href 属性的那一行代码
- <a> 元素里面设置了 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>
运行结果为:
完全匹配,只匹配属性和值都相同的元素:
返回顶部返回 基础选择器目录
注意:
- 上面代码是完全匹配的示例
- [href="#top"]{ color: red; } 匹配属性和属性值为 href="#top" 的 <a> 元素,显示效果为红色字体
- [href="#top1"]{ color: gray; } 匹配属性和属性值为 href="#top1" 的 <a> 元素,显示效果为灰色字体
代码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>
运行结果为:
通过属性和属性值中的字符串进行匹配:
百度百度贴吧
注意:
- 上面的代码通过字符串进行匹配,属性为 href 以及属性值中有 baidu 这个字符串的元素都能匹配上
- 上面例子中,两个链接里面都含有 baidu 这个字符串,所以显示效果为字体是橘色的
- 当然,你将代码改成 [href*=w]{ color: orange; } 时,它们也能匹配上,因为它们的链接里面都含有 w 字符
属性选择器还有很多,这里只列举了其中的三种
其他的属性选择器可以参考 https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
返回 基础选择器目录
返回顶部
三、组合选择器
组合选择器:
- A + B{ property: value; }
- A ~ B{ property: value; }
- A > B{ property: value; }
- A B{ property: value; }
1、A + B{ property: value; }
代码:
<!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>
运行结果为:
这是一个段落。
这是一段测试文字这是另外一个段落。
这是另外一段测试文字
注意:
- 上面最重要的代码是 p + span{ background-color: orange; } ,表示 <p> 元素后面的 <span> 元素的背景颜色设置成橘色
- 这里要注意一个很重要的前提条件:<span> 元素必须直接跟在 <p> 元素的后面
- 上面的例子中,我在它们两个之间插入了一个换行元素 <br /> 之后,<p> 元素后面的 <span> 元素就不能被匹配到了
2、A ~ B{ property: value; }
代码:
<!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>
运行结果为:
这是一个段落。
这是一段测试文字这是另外一个段落。
这是另外一段测试文字
注意:
- 这个选择器与上面的那个选择器很相似
- 这个选择器也是可以匹配 <p> 元素后面的 <span> 元素,只是这两个元素之间就算插入了其他元素,它也能够匹配
- 所以显示的结果才会是两段文字的背景颜色都是橘色
3、A > B{ property: value; }
代码:
<!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>
运行结果为:
测试文字1
测试文字2
测试文字3注意:
- 上面最重要的代码是 div > span{ background-color: yellow; } ,表示将 <div> 元素的直接子元素 <span> 的背景颜色设置为黄色
- 要注意的一个很重要的点是:直接子元素
- 上面例子中 <span>测试文字2</span> 是 <p> 的直接子元素,不是 <div> 的直接子元素,所以它无法被匹配
4、A B{ property: value; }
代码:
<!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>
运行结果为:
测试文字1
测试文字2
测试文字3注意:
- 这个选择器与上一个选择器很相似
- 这个选择器是匹配 <div> 元素下的所有 <span> 元素
- 注意是所有,而不是子元素
返回顶部
四、伪选择器
伪选择器:
- 伪类选择器
- 伪元素选择器
1、伪类选择器
代码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>
运行结果为:
鼠标悬浮在下面这个链接上的时候,链接会变成红色:
百度注意:
- 上面最重要的代码是 a:hover{ color: red; }
- 显示的效果为:当你将鼠标放置在上面的连接上时,链接变成红色
代码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 的第二个子元素
注意:
- 上面最重要的代码是 p:first-child{ background-color: yellow; }
- 表示某个父元素的第一个子元素如果是 <p> ,那么该 <p> 元素的背景颜色将被设置为黄色
- 例如上面的例子,<body> 的第一个子元素是 <p> ,所以该 <p> 元素的背景颜色被设置为黄色
- 同样,id="1" 的 <div> 元素的第一个子元素是 <p> ,所以该 <p> 元素的背景颜色也被设置成黄色
- 但是,id="2" 的 <div> 元素的第一个元素是 <span> ,<p> 元素是第二个子元素,所以它不能被匹配
代码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 的第二个子元素
注意:
- p:nth-child(1){ background-color: yellow; } 与 p:first-child{ background-color: yellow; } 的效果一模一样
- 上面还有一段这样的代码 p:nth-child(2){ background-color: gray; } ,表示如果某个父元素的第二个子元素为 <p> ,那么将该 <p> 元素的背景设置为灰色
- 当然,该选择器的用法不止这些,具体参考 https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
2、伪元素选择器
伪元素选择器是 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>
运行结果为:
这是一个段落。
这也是一个段落。
注意:
- 上面是类型选择器和 id 选择器的组合
- 只有当同时满足两种选择器才能够匹配
CSS 参考文档 https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
返回顶部标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:几种常用的清除浮动影响的方法
下一篇:html中常见的小问题(1)
- DIV居中的经典方法 2020-06-13
- CSS中的float和margin的混合使用 2020-06-11
- Html/css 列表项 区分列表首尾 2020-06-11
- css与javascript重难点,学前端,基础不好一切白费! 2020-06-11
- ie8下透明度处理 2020-06-11
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash