HTML知识点——CSS中几种常用的选择器

CSS的基本选择器：


标签选择器：标签{...}

<h1>..,<p>,<img>
语法：

1. p{
2. font-size：16px；
3. }

复制代码

类选择器：.类名{...}

1. <p class="类名">你好</p>
2. <style>
3.   .类名{
4.     font-size="16px";
5.   }
6. </style>
7.   

复制代码

ID选择器：#id{...}

一个id只能利用一次
比方

1. <style type="text/css">
2.       #id{
3.         font-size: 17px;
4.       }
5.     </style>

复制代码

并集选择器：用逗号隔开

1. <style type="text/css">
2.      .yi,#id{
3.         font-size: 17px;
4.       }
5.     </style>

复制代码

基本选择器的优先级：

ID选择器>类选择器>标签选择器


CSS的高级选择器：


1.层次选择器：

1.后代选择器(空格)：作用于全部后代

后代选择之间必须用空格隔开，中间不能有任何其他符号的插入
后代选择器就是全部的后代都改变

1. div p {
2.   color: blue;
3. }

复制代码

这个不管后代在子元素中的深度，全部的后代都会改变

比方：

1. <div>父亲</div>
2.     <div>
3.       <p>儿子</p>
4.     </div>
5.     <div>
6.       <div>
7.         <p>儿子</p>
8.       </div>
9.     </div>
10.     <p>父亲</p>

复制代码

2.子选择器（>）：作用于孩子，嫡子

子选择器只会作用第一层，也就是直接元素

1. body>p{
2.     color: red;
3. }

复制代码

3.相邻兄弟选择器（+）：紧跟着的一个弟弟元素，如果没有就算球

选择紧接在另一个指定元素后的元素，且二者有雷同的父元素。
利用相邻兄弟选择器时，它只会影响紧跟在指定元素后面的元素，而不会影响到前面或后面的其他元素。

1. h1 + h2 {
2.     color: blue;
3.   }
6. <h1>
7.       相邻兄弟选择器1
8.     </h1>
9.     <h2>
10.       相邻兄弟选择器2
11.     </h2>

复制代码

4.通用兄弟选择器（~）：作用于全部的弟弟元素，不包罗哥哥


通用兄弟选择器可以选择某个元素之后的全部兄弟元素，而不限于紧邻的元素。

1. h1 ~ div {
2.     color: blue;
3.   }

复制代码

2.布局伪类选择器：

有type的都是指定类型的
有child的都是第几个子元素

:first-child：选择第一个子元素，不是规定的不显示
:last-child：选择最后一个子元素
eg：
选择第一个值而且是li，不然不显示
选择最后一个值而且是里，不然不显示

1. li:first-child{
2.   color: red;    不显示红色
3.   
4. }
5. li:last-child{
6.   color: red;     不显示红色
7. }

复制代码

1. <tr>
2.         <a>pinxixi</a>
3.         <td>淘宝</td>
4.         <td>京东</td>
5.         <a>pinxixi</a>
6.     </tr>
7. li:first-child不显示
8. li:last-child不显示

复制代码

:first-of-type：指定类型的第一个元素
:last-of-type：指定类型的最后一个元素
eg：
选择第一个是li类型的
选择最后一个是li类型的

1. li:first-of-type{
2. }
3. li:last-of-type{
4. }

复制代码

1. <tr>
2.         <a>pinxixi</a>
3.         <td>淘宝</td>
4.         <td>京东</td>
5.         <a>pinxixi</a>
6.     </tr>
7. li:first-of-type{
8.   color: red;
9.   显示淘宝
10. }
11. li:last-of-type{
12.   color: red;
13.   显示京东
14. }

复制代码

:nth-child(n)：选择某个父元素的第n个子元素。此中n可以是数字、关键词或表达式。
:nth-of-type(n)：选择某个父元素下第n个特定类型的子元素。

1. p:first-child {color: red;}    p元素的首个子元素，设置为红色
3. li:last-child {font-weight: bold;}     li元素中的最后一个子元素，并且加粗
5. tr:nth-child(odd) {background-color: #f2f2f2;}   odd是奇数的意思
6. 会选择表格的每一行，如果行的索引是奇数，则将其背景色设置为灰色。
8. li p:first-of-type {font-size: 14px;color: #640000;}
9. 设置li下的第一个p元素设置字体和颜色
11. div:last-of-type {border-bottom: 1px solid black;}
12. 选择每个父元素下的最后一个<div>元素，并且为其添加一条底框
15. li p:nth-of-type(2) {font-size: 12px; color: blue;}
16. 选择li下的第二个p标签，设置字体和颜色

复制代码

3.属性选择器：

这里的a标签和id属性都是可以替换的

1. a[id]{  background:yellow;  }           含有id属性的a标签，设置背景颜色为黄色
2. a[id=first]{ background:red }               a标签中id值等于first,设置背景颜色为红色
3. a[id^=first]{ background:red }              <a> 标签中，id属性且该属性值以 "first" 开头的
4. a[class$=links]{background:red}             <a> 标签中，id属性且该属性值以 "first" 结尾的
5. a[class*=links]{background:red}              <a> 标签中，id属性且该属性值包含"first"的

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。