4.2-CSS选择器

（1）标签选择器

作用: 根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然后设置属性

格式：

标签名称{
属性:值;
}

/* 使用标签选择器给页面中的某一种标签设置样式 */
div{
	color: red;
	font-size: 40px;
}

（2）id选择器

作用: 根据指定的id名称找到对应的标签, 然后设置属性

格式：

#设置的id值{

​ 属性：属性值

}

id的命名规范：

• 只能由字母、数字、下划线，a-z 0-9 _
• 不能以数字开头
• 不能是HTML标签的名称，不能是a h1 img input …

#div1{
	color: red;
}
<div id="div1">我是div1</div>

注意：

• id的名称不能重复
• 一般设置样式不使用id选择器，id留给js使用

（3）类选择器

作用: 根据指定的类名称找到对应的标签, 然后设置属性
格式:
.类名{
属性:值;
}

.div4{
	color: tomato;
}
<div class="div4">我是div5</div>
<div class="div4 div5">我是div5</div>

注意：

• class的命名规范和id一样
• class的名称可以重复
• class的取值可以有多个

id和class的区别：

• id的名称不可重复，class的名称可以重复

• 一个标签只能绑定一个id,但可以绑定多个class

id选择器和class选择器的区别：

• id选择器是以#开头
• class选择器是以.开头

（4）

<!-- 后代选择器、子元素选择器 -->
<div1 class="div1">
    <p>苹果</p>
    <p>香蕉</p>
    <p>橘子</p>
    <div class="div2">
        <p>篮球</p>
        <p>足球</p>
        <p>乒乓球</p>
    </div>
</div1>  

后代选择器

作用: 找到指定标签的所有特定的后代标签（后代不仅仅是儿子, 也包括孙子/重孙子）

格式:
选择器1 选择器2{
属性:值;
}

/* 后代选择器 空格隔开*/
.div1 p{
   color: blue;
}             

子元素选择器

作用: 找到指定标签中所有特定的直接子元素, 然后设置属性（子元素只包括它的儿子）
格式:
选择器1>选择器2{
属性:值;
}

.div1>p{
   color: yellow;
}

后代选择器和子元素选择器之间的

不同点：

• 后代选择器使用空格作为连接符号，子元素选择器使用>作为连接符号
• 后代选择器会选中指定标签中, 所有的特定后代标签（儿子/孙子标签…）
  ​ 子元素选择器只会选中指定标签中, 所有的特定的直接标签,（儿子标签）

共同点：

• 他们都可以使用标签名称/id名称/class名称来作为选择器
• 他们 都可以通过各自的连接符号一直延续下去
  （选择器1>选择器2>选择器3>选择器4{}）

（5）

交集选择器

作用: 给所有选择器选中的标签中, 相交的那部分标签设置属性（了解即可）
格式:
选择器1选择器2{
属性: 值;
}

并集选择器

作用: 给所有选择器选中的标签设置属性
格式:
选择器1,选择器2{
属性:值;
}

/* 交集选择器 */
/* 标签选择器+类选择器（中间没有分隔） */
p.div1{
	color: blue;
}
/* 并集选择器(中间用逗号分隔) */
.div1,.p1{
	background-color: burlywood;
}

<div class="div1">我是一个div</div>
<p class="div1">我是p标签</p>
<p class="p1">我是p标签</p>
<p class="p2">我是p标签</p>

（6）兄弟选择器

1. 相邻兄弟选择器 (CSS2)

​ 作用: 给指定选择器后面紧跟的那个选择器选中的标签设置属性
​ 格式:
​ 选择器1+选择器2{
​ 属性:值;
​ }

2. 通用兄弟选择器(CSS3)

​ 作用: 给指定选择器后面的所有选择器选中的所有标签设置属性
​ 格式:
​ 选择器1~选择器2{
​ 属性:值;
​ }

/*相邻兄弟选择器 CSS2*/
/* 选中紧跟p1后的p标签 */
.p1+p{
	background-color: red;
} 
/* 通用兄弟选择器 CSS3*/
.p1~p{
	font-size:25px;
}

<p class="p1">我是第一个段落标签</p>
<p>我是第二个段落标签</p>
<p>我是第三个段落标签</p>
<p>我是第四个段落标签</p>
<p>我是第五个段落标签</p>

（7）伪类选择器

伪类以":"开头，用在选择器后，用于指明元素在某种特殊的状态下才能被选中

（8）序选择器（结构选择器）

1.同级别（不区分类型）

​ :first-child 选中同级别中的第一个标签
​ :last-child 选中同级别中的最后一个标签
​ :nth-child(n) 选中同级别中的第n个标签
​ :nth-child(odd) 选中同级别中的所有奇数
​ :nth-child(even) 选中同级别中的所有偶数
​ :nth-child(xn+y) x和y是用户自定义的, 而n是一个计数器, 从0开始递增，例如(3n+1)分别对应1,4,7…
​ :nth-last-child(n) 选中同级别中的倒数第n个标签
​ :only-child 选中父元素仅有的一个子元素E。仅有一个子元素时生效
​

选择前几个元素
/*【负方向范围】选择第1个到第6个 */
:nth-child(-n+6){}

从第几个开始选择
/*【正方向范围】选择从第6个开始的 */
:nth-child(n+6){}
 
两者结合使用，可以限制选择某一个范围
/*【限制范围】选择第6个到第9个，取两者的交集 */
:nth-child(-n+9):nth-child(n+6){}

/* 序选择器 */
/* 容易受同级别其他元素的影响 */
/* 选中第一个 */
p:first-child{
	background-color: red;
}
/* 选中最后一个 */
p:last-child{
	background-color: rosybrown;
}
/* 选中奇数或偶数个 隔行变色 */
p:nth-child(odd){
	font-size: 22px;
}
/* x和y是用户自定义的，从0开始递增 */
/* 1 2 3...n */
/* 1 4 7..3n+1 */
p:nth-child(3n+1){
	color: yellow;
}
/*  选中同级别中同类型的最后一个p标签 */
p:last-of-type{
	color: violet;
}
        
  <p>我是第1个段落标签</p>
  <p>我是第2个段落标签</p>
  <p>我是第3个段落标签</p>
  <p>我是第4个段落标签</p>
  <p>我是第5个段落标签</p>
  <p>我是第6个段落标签</p>
  <p>我是第7个段落标签</p>
  <p>我是第8个段落标签</p>
  <div>我是一个div</div>      

​

2.同级别同类型（对类型受限制）

​ :first-of-type 选中同级别中同类型的第一个标签
​ :last-of-type 选中同级别中同类型的最后一个标签
​ :nth-of-type(n) 选中同级别中同类型的第n个标签
​ :nth-last-of-type(n) 选中同级别中同类型的倒数第n个标签
​ :only-of-type 选中父元素的特定类型的唯一子元素

（9）动态伪类选择器

E:link（链接伪类选择器）：选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接 描点上
E:visited（链接伪类选择器 ）：选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于 链接描点上
E:active（用户行为选择器）：选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上
E:hover （用户行为选择器）： 选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支持 a:hover

a标签的伪类选择器

按标签存在的状态：

• 默认状态, 从未被访问过（:link）
• 被访问过的状态（:visited）
• 鼠标长按状态（:active）
• 鼠标悬停在a标签上状态（:hover）

/* 给a标签从未访问过的时候设置样式 */
a:link{
	color: brown;
}
/* 访问过时 */
a:visited{
	color: green;
}
/* 鼠标悬停 */
a:hover{
	color: yellow;
}
/* 长按状态 */
a:active{
	color: pink;
}
/*缩写格式*/
a{
	color:red;
}

注意：

• a标签的伪类选择器可以单独出现，也可多个出现
• 多个出现时有顺序要求，依照默认状态:link->被访问状态:visited->鼠标悬停状态:hover->鼠标长按状态:active
• 当默认状态的样式和被访问过状态的样式一样, 那么可以缩写

否定伪类

作用: 可以从已选中的元素中剔除出某些元素
格式：
:not(选择器)

p:not(.p1){
	background-color: plum;
}

<p>我是第1个段落标签</p>
<p class="p1">我是第2个段落标签</p>
<p>我是第3个段落标签</p>
<p>我是第4个段落标签</p>

(10) 伪元素选择器

使用伪元素来表示元素中的一些特殊的位置
::after
表示元素的最后边的部分
一般需要结合content这个样式一起使用，
通过content可以向after的位置添加一些内容
::before
表示元素最前边的部分
一般需要结合content这个样式一起使用，
通过content可以向before的位置添加一些内容
::first-letter
为第一个字符来设置一个样式
::first-line
为第一行设置一个样式

/* ...之后 */
p::after{
	content: "，我是一个::after";
}
/* ...之前 */
p::before{
	content: "我是一个::before，";
}
/* 首字母选中 */
p::first-letter{
	font-size: 30px;
	color: red;
}
/* 首行选择 */
p::first-line{
	font-size: 30px;
	color: yellowgreen;
}
<p>
       使用伪元素来表示元素中的一些特殊的位置
       表示元素的最后边的部分
       一般需要结合content这个样式一起使用，
       通过content可以向after的位置添加一些内容
 </p>

(11) 属性选择器

作用: 根据指定的属性名称找到对应的标签, 然后设置属性
格式:
[attribute]

• 属性的取值是以什么开头
  [attribute**|=value] CSS2
  [attribute^**=value] CSS3

  区别:

  ​ CSS2中的只能找到value开头,并且value是被-和其它内容隔开的
  ​ CSS3中的只要是以value开头的都可以找到, 无论有没有被-隔开

• ​ 属性的取值是以什么结尾
  ​ [attribute$=value] CSS3

• ​ 属性的取值是否包含某个特定的值
  ​ [attribute~=value] CSS2
  ​ [attribute=value] CSS3
  ​ 区别:
  ​ CSS2中的只能找到独立的单词, 也就是包含value,并且value是被空格隔开的
  ​ CSS3中的只要包含value就可以找到

/* 通过特定的属性和属性值进行标签的选中 */
input[type=text]{
	background-color: red;
}
/* 获取属性开头曲选择特定的标签 */
/* CSS2 */
/* 找到短横线分隔的 */
input[name|=user]{
	color: wheat;
}
/* CSS3 */
input[name^=user]{
	color: pink;
}

<input type="text" name="user-name" id="">
<input type="text" name="" id="">
<input type="password" name="username" id="">

(12) 通配符选择器

作用: 给当前界面上所有的标签设置属性
格式:
*{
属性:值;
}

*{
	margin: 0;
	padding: 0;
}

(13) 组合选择器

多个选择器组合使用。例如 “div.one” 表示class为one的div元素