CSS入门二(CSS的选择器)
2021/10/9 23:02:54
本文主要是介绍CSS入门二(CSS的选择器),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
文章目录
- 1、CSS的属性选择器
- (1)标签名[属性名]
- (2)标签名[属性名=值]
- (3)标签名[属性名^=值]
- (4)标签名[属性名$=值]
- 2、CSS的关系选择器
- (1)子元素选择器
- (2)相邻兄弟选择器
- A:临近兄弟选择器
- B:普通兄弟选择器
- 3、CSS的复合选择器
- 4、CSS的子元素选择器
- 5、CSS的伪类选择器
- (1):hover
- (2)a:visited
- (3)a:link
- (4)a:active
- (5):root
- (6):not()
- (7):only-child
- (8):first-child和:last-child
- (9):nth-child(n)和:nth-last-child(n)
- 6、CSS的伪元素选择器
- (1):before选择器
- (2):after选择器
1、CSS的属性选择器
属性选择器可以根据元素的属性及属性值来选择元素。
(1)标签名[属性名]
........ 标签名[属性名]:选择含有给定属性的标签 ........
举例如下:
<style> li[title]{ color: blue; font-size: 80px; } </style> ....... <ul> <li title="yd">西安邮电大学</li> <li title="xa-jt">西安交通大学</li> <li id="dzkj">西安电子科技大学</li> <li class="lg-dx">西安理工大学</li> <li title="zf-dx">西北政法大学</li> <li title="xa-sf">陕西师范大学</li> </ul>
(2)标签名[属性名=值]
........ 标签名[属性名=值]:选择含有给定属性值的标签 ........
举例如下:
<style> li[title='yd']{ color: blue; font-size: 80px; } </style> ....... <ul> <li title="yd">西安邮电大学</li> <li title="xa-jt">西安交通大学</li> <li id="dzkj">西安电子科技大学</li> <li class="lg-dx">西安理工大学</li> <li title="zf-dx">西北政法大学</li> <li title="xa-sf">陕西师范大学</li> </ul>
(3)标签名[属性名^=值]
........ 标签名[属性名^=值]:选择给定属性值是以某个字符开头的 ........
举例如下:
<style> li[title^='xa']{ color: blue; font-size: 80px; } </style> ....... <ul> <li title="yd">西安邮电大学</li> <li title="xa-jt">西安交通大学</li> <li id="dzkj">西安电子科技大学</li> <li class="lg-dx">西安理工大学</li> <li title="zf-dx">西北政法大学</li> <li title="xa-sf">陕西师范大学</li> </ul>
(4)标签名[属性名$=值]
........ 标签名[属性名$=值]:选择给定属性值是以某个字符结尾的 ........
举例如下:
<style> li[title$='dx']{ color: blue; font-size: 80px; } </style> ....... <ul> <li title="yd">西安邮电大学</li> <li title="xa-jt">西安交通大学</li> <li id="dzkj">西安电子科技大学</li> <li class="lg-dx">西安理工大学</li> <li title="zf-dx">西北政法大学</li> <li title="xa-sf">陕西师范大学</li> </ul>
示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>003</title> </head> <style> li[id] { color: red; font-size: 50px; } li[title^='xa'] { color: blue; font-size: 80px; } li[title='yd'] { color: yellow; font-size: 77px; } li[title$='dx'] { color: #5fd; font-size: 44px; } </style> <body> <ul> <li title="yd">西安邮电大学</li> <li title="xa-jt">西安交通大学</li> <li id="dzkj">西安电子科技大学</li> <li class="lg-dx">西安理工大学</li> <li title="zf-dx">西北政法大学</li> <li title="xa-sf">陕西师范大学</li> </ul> </body> </html>
2、CSS的关系选择器
关系选择器和前面讲的复合选择器类似,但关系选择器可以更精确的控制元素样式。CSS3中的关系选择器主要包括子元素选择器和相邻兄弟选择器,其中子元素择器由符号“>”连接,相邻兄弟选择器由符号“+”和“~”连接。
(1)子元素选择器
子元素择器主要用来选择某个元素的第一级子元素,表示为父标签 > 子标签。
举例如下:
<style> ul>li { color: red; font-size: 80px; } </style>
(2)相邻兄弟选择器
兄弟选择器用来选择与某元素位于同一个父元素之中,且位于该元素之后的兄弟元素。
A:临近兄弟选择器
该选择器使用加号“+”来链接前后两个选择器。选择器中的两个元素有同一个父亲,而且第二个元素必须紧跟第一个元素。
举例如下:
<style> ul>li { color: red; font-size: 80px; } </style>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>003</title> </head> <style> ul+ol { color: #ad6; font-size: 80px; } </style> <body> <ul> <li title="yd">西安邮电大学</li> <li title="xa-jt">西安交通大学</li> <li id="dzkj">西安电子科技大学</li> </ul> <ol> <li>北京邮电大学</li> <li>清华大学</li> <li>北京大学</li> </ol> <ul> <li>王昭君</li> <li>貂蝉</li> <li>杨玉环</li> </ul> </body> </html>
B:普通兄弟选择器
普通兄弟选择器使用 “~”来链接前后两个选择器。选择器中的两个元素有同一个父亲,但第二个元素不必紧跟第一个元素。
举例如下:
<style> ul~ul { color: #ad6; font-size: 80px; } </style>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>003</title> </head> <style> ul~ul { color: #ad6; font-size: 80px; } </style> <body> <ul> <li title="yd">西安邮电大学</li> <li title="xa-jt">西安交通大学</li> <li id="dzkj">西安电子科技大学</li> </ul> <ul> <li>北京邮电大学</li> <li>清华大学</li> <li>北京大学</li> </ul> <ul> <li>王昭君</li> <li>貂蝉</li> <li>杨玉环</li> </ul> </body> </html>
3、CSS的复合选择器
用逗号分隔
<style> #dzkj,.lg-dx { color: #ad6; font-size: 80px; } </style>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>003</title> </head> <style> #dzkj,.lg-dx { color: #ad6; font-size: 80px; } </style> <body> <ul> <li title="yd">西安邮电大学</li> <li title="xa-jt">西安交通大学</li> <li id="dzkj">西安电子科技大学</li> <li class="lg-dx">西安理工大学</li> <li title="zf-dx">西北政法大学</li> <li title="xa-sf">陕西师范大学</li> </ul> </body> </html>
4、CSS的子元素选择器
用空格分隔
#dd li { color: #ad6; font-size: 80px; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>003</title> </head> <style> #dd li { color: #ad6; font-size: 80px; } </style> <body> <ol id="dd"> <li>北京邮电大学</li> <li>清华大学</li> <li>北京大学</li> </ol> <ul> <li>王昭君</li> <li>貂蝉</li> <li>杨玉环</li> </ul> </body> </html>
5、CSS的伪类选择器
(1):hover
当鼠标悬停在目标对象上时,展示的形式。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>003</title> </head> <style> #dd li:hover{ color: #ad6; font-size: 80px; } </style> <body> <ol id="dd"> <li>北京邮电大学</li> <li>清华大学</li> <li>北京大学</li> </ol> <ul> <li>王昭君</li> <li>貂蝉</li> <li>杨玉环</li> </ul> </body> </html>
(2)a:visited
表示已经访问过的超链接的样子
:visited { font-size: 65px; color: blue; }
(3)a:link
超链接未被访问的样式
a:link { color: crimson; }
(4)a:active
激活超链接时
a:active { color: yellow; }
举例如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>超链接a的伪类选择器</title> </head> <style> /* 超链接未被访问时 */ a:link { color: crimson; } /* 当链接已经被访问 */ a:visited { font-size: 65px; color: blue; } /* 当鼠标悬停在超链接上时 */ a:hover { font-size: 15px; color: purple; } /* 激活超链接时 */ a:active { color: yellow; } </style> <body> <a href="#">百度</a> <br><br> <a href="#">搜狐</a> <br><br> <a href="#">360</a> </body> </html>
(5):root
:root选择器用于匹配文档根元素,在HTML中,根元素始终是html元素。也就是说使用“:root选择器”定义的样式,对所有页面元素都生效。对于不需要该样式的元素,可以单独设置样式进行覆盖。
:root{ color: red; font-size: 79px; }
(6):not()
如果对某个结构元素使用样式,但是想排除这个结构元素下面的子结构元素,让它不使用这个样式,可以使用:not选择器。
<style> div :not(#aa){------/注意div与:not之间要加一个空格 color: red; font-size: 79px; } </style>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>003</title> </head> <style> div :not(#aa){ color: red; font-size: 79px; } </style> <body> <div> <p id="aa">四大名著</p> <p id=ss>四大美女</p> <p id="dd">四大金刚</p> </div> </body> </html>
(7):only-child
:only-child 选择器用于匹配属于某父元素的唯一子元素的元素,也就是说,如果某个父元素仅有一个子元素,则使用“:only-child 选择器”可以选择这个子元素。
<style> div :only-child { color: red; font-size: 79px; } </style>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>003</title> </head> <style> div :only-child { color: red; font-size: 79px; } </style> <body> <div> <p id="aa">四大名著</p> <p id=ss>四大美女</p> <p id="dd">四大金刚</p> </div> <div> <p>四大书院</p> </div> </body> </html>
(8):first-child和:last-child
:first-child选择器和:last-child选择器分别用于为父元素中的第一个或者最后一个子元素设置样式。
<style> div :first-child { color: red; font-size: 79px; } div :last-child { color:blue; font-size: 80px; } </style>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>003</title> </head> <style> div :first-child { color: red; font-size: 79px; } div :last-child { color:blue; font-size: 80px; } </style> <body> <div> <p id="aa">四大名著</p> <p id=ss>四大美女</p> <p id="dd">四大金刚</p> </div> </body> </html>
(9):nth-child(n)和:nth-last-child(n)
使用:first-child选择器和:last-child选择器可以选择某个父元素中第一个或最后一个子元素,但是如果用户想要选择第2个或倒数第2个子元素,这两个选择器就不起作用了。为此,CSS3引入了:nth-child(n)和:nth-last-child(n)选择器,它们是:first-child选择器和:last-child选择器的扩展。
:nth-child(n):匹配父元素中正数第n个元素,:nth-last-child(n):匹配父元素中倒数第n个元素,()内填需要改变的数字。
<style> div :nth-child(2) { color: red; font-size: 79px; } div :nth-last-child(1) { color:blue; font-size: 80px; } </style>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>003</title> </head> <style> div :nth-child(2) { color: red; font-size: 79px; } div :nth-last-child(1) { color:blue; font-size: 80px; } </style> <body> <div> <p id="aa">四大名著</p> <p id=ss>四大美女</p> <p id="dd">四大金刚</p> <p>四大神话</p> </div> </body> </html>
6、CSS的伪元素选择器
(1):before选择器
:before伪元素选择器用于在被选元素的内容前面插入内容,必须配合content属性来指定要插入的具体内容。
(2):after选择器
:after伪元素选择器用于在某个元素之后插入一些内容,使用方法与:before选择器相同。
<style> div:before { /* 注意content后加文字时要给文字带引号*/ content: '西安'; } div:after { content: '陕西'; } </style>
这篇关于CSS入门二(CSS的选择器)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-09-07TailwindCSS从入门到实践:全面指南
- 2024-09-05Tailwind.css入门:快速上手指南
- 2024-08-29CSS9资料:入门级CSS教程与实用技巧指南
- 2024-08-29CSS定位资料大全:初学者入门指南
- 2024-08-29CSS 浮动资料:入门级教程与实践
- 2024-08-29CSS样式入门:快速获取与掌握CSS样式资料的指南
- 2024-07-18CSS中的伪类
- 2024-03-06css样式背景图怎么分开(css背景图片样式)-icode9专业技术文章分享
- 2024-03-06css线性样式(css中划线样式)-icode9专业技术文章分享
- 2024-03-06jq点击添加css样式(jq设置css样式)-icode9专业技术文章分享