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

CSS的基本选择器：

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

<h1>..,<p>,<img>

语法：

p{
font-size：16px；
}

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

<p class="类名">你好</p>
<style>
  .类名{
    font-size="16px";
  }
</style>
  

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

一个id只能使用一次

例如

<style type="text/css">
      #id{
        font-size: 17px;
      }
    </style>

并集选择器：用逗号隔开

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

基本选择器的优先级：

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

CSS的高级选择器：

1.层次选择器：

1.后代选择器(空格)：作用于所有后代

后代选择之间必须用空格隔开，中间不能有任何其他符号的插入

后代选择器就是所有的后代都改变

div p {
  color: blue;
}

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

例如：

<div>父亲</div>
    <div>
      <p>儿子</p>
    </div>
    <div>
      <div>
        <p>儿子</p>
      </div>
    </div>
    <p>父亲</p>

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

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

body>p{
    color: red;
}

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

选择紧接在另一个指定元素后的元素，且二者有相同的父元素。

使用相邻兄弟选择器时，它只会影响紧跟在指定元素后面的元素，而不会影响到前面或后面的其他元素。

h1 + h2 {
    color: blue;
  }


 <h1>
      相邻兄弟选择器1
    </h1>
    <h2>
      相邻兄弟选择器2
    </h2>

4.通用兄弟选择器（~）：作用于所有的弟弟元素，不包含哥哥

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

h1 ~ div {
    color: blue;
  }

2.结构伪类选择器：

有type的都是指定类型的

有child的都是第几个子元素

:first-child：选择第一个子元素，不是规定的不显示

:last-child：选择最后一个子元素

eg：

选择第一个值而且是li，不然不显示

选择最后一个值而且是里，不然不显示

li:first-child{ 
  color: red;    不显示红色
  
}
li:last-child{
  color: red;     不显示红色
}

 <tr>
        <a>pinxixi</a>
        <td>淘宝</td>
        <td>京东</td>
        <a>pinxixi</a>
    </tr>
li:first-child不显示
li:last-child不显示

:first-of-type：指定类型的第一个元素

:last-of-type：指定类型的最后一个元素

eg：

选择第一个是li类型的

选择最后一个是li类型的

li:first-of-type{
}
li:last-of-type{
}

 <tr>
        <a>pinxixi</a>
        <td>淘宝</td>
        <td>京东</td>
        <a>pinxixi</a>
    </tr>
li:first-of-type{
  color: red;
  显示淘宝
}
li:last-of-type{
  color: red;
  显示京东
}

:nth-child(n)：选择某个父元素的第n个子元素。其中n可以是数字、关键词或表达式。

:nth-of-type(n)：选择某个父元素下第n个特定类型的子元素。

p:first-child {color: red;}    p元素的首个子元素，设置为红色

li:last-child {font-weight: bold;}     li元素中的最后一个子元素，并且加粗

tr:nth-child(odd) {background-color: #f2f2f2;}   odd是奇数的意思
会选择表格的每一行，如果行的索引是奇数，则将其背景色设置为灰色。

li p:first-of-type {font-size: 14px;color: #640000;}
设置li下的第一个p元素设置字体和颜色

div:last-of-type {border-bottom: 1px solid black;}
选择每个父元素下的最后一个<div>元素，并且为其添加一条底框


li p:nth-of-type(2) {font-size: 12px; color: blue;}
选择li下的第二个p标签，设置字体和颜色

3.属性选择器：

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

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