css选择器

---

一、基本选择器

1.id选择器

选择指定id元素

#demo{
	color:red;
}
<h1 id="demo">hello world</h1>

2.类选择器

选择指定class

.demo{
	color:red;
}
<h1 class="demo">hello world</h1>

3.标签选择器

根据标签选择元素

h1{
	color:red;
}
<h1>hello world</h1>

4.通用选择器

通过通配符*选择所有元素，包括html和body

* {
	font-size:16px;
}

5.属性选择器

• 根据元素属性去选择

• 属性选择器有如下几种形式：
  1.[attr] 用来选择带有attr属性的元素；
  2.[attr=xxx] 用来选择attr属性等于xxx的元素,如选择文本输入框；

a[href] {
	color: red;
}
input[type="password"] {
	border: 1px solid red;
}

<a href="javascript:;">链接</a>
<input type="password" value="123">        

二、组合选择器

1.后代选择器

后代选择器是用空格分隔多个选择器组合,它的作用是在A选择器的后代中找到B选择器所指的元素

<div class="demo">
	<h1>
		<span class="title">标题</span>
	</h1>
</div>	
 
.demo h1 span {
     color: red;
}

2.子元素选择器

和后代选择器类似，匹配所有父元素下的子元素，语法：父选择器 > 子选择器

<div class="demo">
	<h1>
		<span class="title">标题</span>
	</h1>
	<h4>
		<span>次标题</span>
	</h4>
</div>	
 
.demo > h1 > span {
     color: red;
}

3.相邻兄弟选择器

相邻兄弟选择器是用来选取某个元素紧邻的兄弟元素，当第二个元素紧跟在第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中。语法：选择器A + 选择器B

<div class="demo">
	<h1>
		<span class="title">标题</span>
	</h1>
	<h4>
		<span>次标题</span>
	</h4>
</div>	
 
h1 + h4 {
     color: red;
}

效果：h4标签的内容会变为红色。

4.交集选择器

相交的部分就是要设置属性值的标签

<p>hello1</p>
<p>hello2</p>
<p class="para">hello3</p>
<p class="para">hello4</p>
<p>hello5</p>
 
p.para {
     color: red;
}

5.并集选择器

用多个逗号分隔多个选择器，将多个选择器进行设置

<div>
	<span>hello1</span>
	<p>hello2</p>
	<div>hello3</div>
	<a href="javascript:;">链接</a>
</div>

span, p, div, a {
     color: red;
}

三、伪类和伪元素选择器

1.标记状态的伪类

• :link 选取未访问过的超链接
• :visited 选取访问过的连接
• :hover 选取鼠标悬浮的元素
• :active 选取点中的元素
• :focus 选取获取焦点的元素

语法：选择器：伪类

<div>
   <a href="javascript:;">链接</a>
</div>

a:hover {
    color: red;
}

2.筛选功能的伪类

• :empty 选取没有子元素的元素
• :checked 选取勾选状态下的input 元素 ，只对 radio 和checkbox 有效
• :disabled 选取禁用的表单元素
• :first-child 选取当前选择器下的第一个元素
• :last-child 选取当前选择器下的最后一个元素
• :nth-child(n) 选取指定位置的元素，参数支持an+b的形势.比如 li:nth(2n+1)，就可以选取li元素序号是2的整数倍+1的所有元素,也就是1,3,5,7,9序号的li元素
• :nth-last-child(n) 和上面一样，不过是从后面选取
• :only-child 选取元素唯一的子元素，如果元素的父元素只有它一个子元素就会生效，如果还有其他的兄弟元素，则不生效
• :only-of-type 选取唯一的某个元素类型，如果元素的父元素只有它一个当前类型的子元素就会生效

<div>
   <p>1</p>
   <p>2</p>
   <p>3</p>
   <p>4</p>
   <p>5</p>
   <p>6</p>
</div>

p:nth-child(2) {
    font-weight:700;
}
p:nth-child(2n+1) {
    color: red;
}

3.伪元素选择器

伪元素选择器是在元素的内容之前或之后插入内容，用来添加特殊样式。伪元素选择器并不是真实的DOM元素，所以称之伪元素。
语法：选择器::伪元素选择器

• ::before 在某个元素之前插入内容
• ::after 在某个元素之后插入内容
• ::first-line 为元素的第一行使用样式
• ::first-letter 为某个元素的首字母或第一个文字使用样式
• ::selection 对光标选中的元素添加样式

<div>
      <h1 class="line">hello world</h1>
      <h4 class="line">welcome to the hello world</h4>
      <p class="line">欢迎来到快乐星球</p>
</div>

.line::before,.line::after {
  content: '--------';
  color:olivedrab;
}

效果：

注意：

• 伪元素构造的元素是虚拟的，所以不能使用js去操作
• first-line和first-letter不使用于内联样式，在内联样式中都会失效
• 在CSS3 中规定，伪类用一个冒号 : 表示, 伪元素用两个冒号 ::来表示，但是在CSS2中伪类和伪元素都是用一个冒号表示，所以在浏览器中用一个冒号或者用两个冒号来表示伪元素，都是可以实现效果的。