本篇主要是记录常用的CSS选择器和一些需要注意的细节,提升熟练度的同时方便查阅。
标签选择器
标签选择器(元素选择器)是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
| <head> <title>基础选择器之标签选择器</title> <style> /* 标签选择器 : 写上标签名 */ p { color: green; } div { color: pink; } </style> </head> <body> <p>男生</p> <p>男生</p> <p>男生</p> <div>女生</div> <div>女生</div> <div>女生</div> </body>
|
类选择器
如果想要差异化选择不同的标签,单独选一个或者几个标签,可以使用类选择器。
类选择器在HTML中以class属性表示,在CSS中,类选择器以一个点 .
号来显示。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
| </head> <title>基础选择器之类选择器</title> <style> /* 类选择器口诀: 样式点定义 结构类(class)调用 一个或多个 开发最常用*/ .red { color: red; } .star-sing { color: green; } .memeda { color: pink; } </style> </head> <body> <ul> <li class="red">冰雨</li> <li class="red">来生缘</li> <li>李香兰</li> <li class="memeda">生僻字</li> <li class="star-sing">江南style</li> </ul> <div class="red">我也想变红色</div> </body>
|
实际开发中,类选择器是应用最广泛的。同时,类选择器的 多类名
也会频繁使用。
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| <head> <title>多类名的使用方式</title> <style> .red { color: red; } .font35 { font-size: 35px; } </style> </head> <body> <div class="red font35">刘德华</div> </body>
|
如果一个标签拥有多个类名,表明这个标签分别拥有这多个类的特性。
各个类名中间用空格隔开。在布局复杂的情况下,还是比较常用的。
id选择器
id选择器可以为标有特定id的HTML元素指定特定的样式。
HTML元素以 id属性
来设置id选择器,CSS中id选择器以 #
来定义。
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| <head> <title>基础选择器之id选择器</title> <style> /* id选择器的口诀: 样式#定义, 结构id调用, 只能调用一次, 别人切勿使用 */ #pink { color: pink; } </style> </head> <body> <div id="pink">迈克尔·杰克逊</div> <div>pink++</div> </body>
|
id选择器和类选择器的区别
- 类选择器(class)好比人的名字,一个人(标签)可以有多个名字,同时一个名字也可以被多个人使用。
- id 选择器好比人的身份证号码,全中国唯一的,不得重复。也就是说,一个标签使用了id为
pink
的选择器,那么其它标签不能再使用名为pink
的id选择器了。
- 两者最大的不同在于使用次数上。
- 类选择器在修改样式中用的最多,id选择器一般用于页面唯一性的元素上,经常和javaScript搭配使用。
通配符选择器
在CSS中,通配符选择器使用 *
定义,它表示选择页面中所有元素(标签)。通配符选择器不需要调用,自动就给所有元素使用样式。
1 2 3 4
| * { margin: 0; padding: 0; }
|
—————————————-上面的是基础选择器,下面的为复合选择器 —————————————-
后代选择器
后代选择器又称为包含选择器,可以选择父元素里面的子元素,其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。
语法:
例如:
1
| ul li {样式声明} // 选择ul里面所有的li标签元素。
|
- 元素1是父级,元素2是子级,最终选择的是元素2。
- 元素1和元素2可以是任意的基础选择器。
- 后代选择器的意思是选中ul后代中所有的li,不管是孩子还是孙子还是孙孙子。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
| <title>复合选择器之后代选择器</title> <style> /* 我想要把ol里面的小li选出来改为pink */ ol li { color: pink; } ol li a { color: red; }
.nav li a { color: yellow; } </style> <body> <ol> 变态写法 <li>我是ol 的孩子</li> <li>我是ol 的孩子</li> <li>我是ol 的孩子</li> <li><a href="#">我是孙子</a></li> </ol> <ul> <li>我是ul 的孩子</li> <li>我是ul 的孩子</li> <li>我是ul 的孩子</li> <li><a href="#">不会变化的</a></li> </ul> <ul class="nav"> <li>我是ul 的孩子</li> <li>我是ul 的孩子</li> <li>我是ul 的孩子</li> <li><a href="#">不会变化的</a></li> <li><a href="#">不会变化的</a></li> <li><a href="#">不会变化的</a></li> <li><a href="#">不会变化的</a></li> </ul> </body>
|
上面的例子中 .nav li a
表示选中的为:类选择器为nav的后代li的后代a。
1 2 3 4 5 6 7 8 9 10 11 12 13
| <style> .nav a { color: red; } </style> <body> <div class="nav"> <a href="#">我是儿子</a> <p> <a href="#">我是孙子</a> </p> </div> </body>
|
这个例子中所有的 a标签
的color都会变成red,因为一个a是儿子,一个a是孙子,都是 .nav
的后代。
子元素选择器(亲儿子选择器)
子元素选择器(子选择器)只能选择作为某元素的最近一级子元素,也就是选亲儿子元素。
语法:
上面语法表示选择元素1里面的所有直接后代元素2。
元素2必须是亲儿子,其孙子、重孙子都不包括在内。
1 2 3 4 5 6 7 8 9 10 11 12 13
| <style> .nav>a { color: red; } </style> <body> <div class="nav"> <a href="#">我是儿子</a> <p> <a href="#">我是孙子</a> </p> </div> </body>
|
同样是上面后代选择器的例子,这里只有儿子a
会被选择,孙子a
不会被选择。
并集选择器
并集选择器可以选择多组标签,同时为他们定义相同的样式。通常用于集体声明。
语法:
注意是用英文逗号
连接。上述语法表示选择元素1和元素2。逗号表示和
的意思。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
| <style> /* 要求1: 请把熊大和熊二改为粉色 */ /* div, p { color: pink; } */
/* 要求2: 请把熊大和熊二改为粉色 还有 小猪一家改为粉色 */ div, p, .pig li { color: pink; }
/* 约定的语法规范,我们并集选择器喜欢竖着写 */ /* 一定要注意,最后一个选择器 不需要加逗号 */ </style> <body> <div>熊大</div> <p>熊二</p> <span>光头强</span> <ul class="pig"> <li>小猪佩奇</li> <li>猪爸爸</li> <li>猪妈妈</li> </ul> </body>
|
例子中 div,p,.pig li
表示 div 和 p 和 pig的后代li
被选择。.pig li
就是上面讲过的后代选择器。
伪类选择器
伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第1个,第n个元素。
伪类选择器书写最大的特点是用冒号(:)
表示,比如 :hover 、 :first-child 。
冒号前后不要空格。
链接伪类选择器
1 2 3 4
| a:link // 选择所有未被访问过的链接 a:visited // 选择所有已被访问过的链接 a:hover // 选择鼠标指针位于其上的链接 a:active // 选择活动链接(鼠标按下未弹起的链接)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
| <head> <title>复合选择器之链接伪类选择器</title> <style> /* 1.未访问的链接 a:link 把没有点击过的(访问过的)链接选出来 */ a:link { color: #333; text-decoration: none; }
/*2. a:visited 选择点击过的(访问过的)链接 */ a:visited { color: orange; }
/*3. a:hover 选择鼠标经过的那个链接 */ a:hover { color: skyblue; }
/* 4. a:active 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接 */ a:active { color: green; } </style> </head> <body> <a href="#">小猪佩奇</a> <a href="http://www.xxxxxxxx.com">未知的网站</a> </body>
|
链接伪类选择器注意事项:
- 为了确保生效,请按照LVHA的顺序声明。即 :link :visited :hover :active 。
链接伪类在实际开发中经常的写法:
1 2 3 4 5 6 7 8
| // a标签选择器 所有标签 a { color: gray; } // :hover 鼠标经过时的状态设置 a:hover { color: red; }
|
focus伪类选择器
:focus 伪类选择器用于选取获得焦点(光标)的表单元素。
焦点就是光标,一般情况下<input>
类表单元素才能获取,因此这个选择器也主要针对表单元素来说。
1 2 3 4 5 6 7 8 9 10
| // 当input获取到光标的时候就改变背景色。 input:focus { background-color: yellow; }
<body> <input type="text"> <input type="text"> <input type="text"> </body>
|
—————————————-下面的为CSS3新增的选择器 —————————————-
属性选择器
属性选择器可以根据元素特定属性来选择元素,这样就可以不用借助于类或者id选择器了。
可以看看w3cschool总结的参考手册 。
主要通过例子来理解:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
| <style> /* 必须是input 但是同时具有 value这个属性 选择这个元素 [] */ /* input[value] { color:pink; } */ /* 只选择 type =text 文本框的input 选取出来 */ input[type=text] { color: pink; } /* 选择首先是div 然后 具有class属性 并且属性值 必须是 icon开头的这些元素 */ div[class^=icon] { color: red; } section[class$=data] { color: blue; } div.icon1 { color: skyblue; } /* 类选择器和属性选择器 伪类选择器 权重都是 10 */ </style> <body> <!-- 1. 利用属性选择器就可以不用借助于类或者id选择器 --> <!-- <input type="text" value="请输入用户名"> <input type="text"> --> <!-- 2. 属性选择器还可以选择属性=值的某些元素 重点务必掌握的 --> <input type="text" name="" id=""> <input type="password" name="" id=""> <!-- 3. 属性选择器可以选择属性值开头的某些元素 --> <div class="icon1">小图标1</div> <div class="icon2">小图标2</div> <div class="icon3">小图标3</div> <div class="icon4">小图标4</div> <div>我是打酱油的</div> <!-- 4. 属性选择器可以选择属性值结尾的某些元素 --> <section class="icon1-data">我是安其拉</section> <section class="icon2-data">我是哥斯拉</section> <section class="icon3-ico">哪我是谁</section>
</body>
|
结构伪类选择器 E:nth-child(n)
选择符 |
简介 |
E:first-child |
匹配父元素中的第一个子元素E |
E:last-child |
匹配父元素中最后一个E元素 |
E:nth-child(n) |
匹配父元素中第n个子元素E |
E:first-of-type |
指定类型E的第一个 |
E:last-of-type |
指定类型E的最后一个 |
E:nth-of-type(n) |
指定类型E的第n个 |
通过例子来理解:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53
| <style> /* 1.把所有的偶数 even的孩子选出来 */ ul li:nth-child(even) { background-color: #ccc; }
/* 2.把所有的奇数 odd的孩子选出来 */ ul li:nth-child(odd) { background-color: gray; } /* 3.nth-child(n) 从0开始 每次加1 往后面计算 这里面必须是n 不能是其他的字母 选择了所有的孩子*/ /* ol li:nth-child(n) { background-color: pink; } */ /* 4.nth-child(2n) 选择了所有的偶数孩子 等价于 even*/ /* ol li:nth-child(2n) { background-color: pink; } // 选择了所有的基数孩子 ol li:nth-child(2n+1) { background-color: skyblue; } */ // 选择了从第三个开始(包含第三个)(这里是从1开始的) 的孩子 /* ol li:nth-child(n+3) { background-color: pink; } */ // 选择了前三个孩子 ol li:nth-child(-n+3) { background-color: pink; } </style> <body> <ul> <li>我是第1个孩子</li> <li>我是第2个孩子</li> <li>我是第3个孩子</li> <li>我是第4个孩子</li> <li>我是第5个孩子</li> <li>我是第6个孩子</li> <li>我是第7个孩子</li> <li>我是第8个孩子</li> </ul> <ol> <li>我是第1个孩子</li> <li>我是第2个孩子</li> <li>我是第3个孩子</li> <li>我是第4个孩子</li> <li>我是第5个孩子</li> <li>我是第6个孩子</li> <li>我是第7个孩子</li> <li>我是第8个孩子</li> </ol> </body>
|
nth-child 和 nth-of-type 的区别
nth-child 对父元素里面所有孩子排序选择(序号是固定的),先找到第n个孩子,然后看看是否和E匹配。
nth-of-type 对父元素里面指定的子元素进行排序选择。先去匹配E,然后再根据E 找到第n个孩子。
来看例子:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
| <style> ul li:first-of-type { background-color: pink; } ul li:last-of-type { background-color: pink; } ul li:nth-of-type(even) { background-color: skyblue; } /* nth-child 会把所有的盒子都排列序号 */ /* 执行的时候首先看 :nth-child(1) 之后回去看 前面 div */
section div:nth-child(1) { background-color: red; } /* nth-of-type 会把指定元素的盒子排列序号 */ /* 执行的时候首先看 div指定的元素 之后回去看 :nth-of-type(1) 第几个孩子 */ section div:nth-of-type(1) { background-color: blue; } </style> <body> <ul> <li>我是第1个孩子</li> <li>我是第2个孩子</li> <li>我是第3个孩子</li> <li>我是第4个孩子</li> <li>我是第5个孩子</li> <li>我是第6个孩子</li> <li>我是第7个孩子</li> <li>我是第8个孩子</li> </ul> <section> <p>光头强</p> <div>熊大</div> <div>熊二</div> </section> </body>
|
类选择器、属性选择器、伪类选择器 权重都为10 。
伪元素选择器
伪元素选择器可以帮助我们利用CSS创建新标签元素,而不需要HTML标签,从而简化HTML结构。
新创建的这个元素,在文档树中是找不到的,所以我们称为伪元素。
语法:
选择符 |
简介 |
::before |
在元素内部的前面插入内容 |
::after |
在元素内部的后面插入内容 |
- before 和 after 创建一个元素,但是属于行内元素。
看例子:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
| <style> div { width: 200px; height: 200px; background-color: pink; } /* div::before 权重是2 */ div::before { /* 这个content是必须要写的 */ /* display: inline-block; */ content: '我'; /* width: 30px; height: 40px; background-color: purple; */ } div::after { content: '小猪佩奇'; } </style> <body> <div> 是 </div> </body>
|
该选择器在实际开发中主要是用来创建一些小图标元素。content的内容是图标对应的编码即可。
总结
本来以为很快就会总结完这些常用选择器,没想到花费了多半天的时间。工欲善其事必先利其器,学习路上切记走马观花,要一步一个脚印才能有所收获和积累。