css知识点选择器

一、css的样式方式

**1、内联样式：**在标签内使用style属性指定css代码

<div style="color:red;">这是一个div标签</div>

**2、内部样式：**在head标签内，定义style标签，style标签的标签体内容就是css代码

div{
		color: aqua;
	}
<div>hello css</div>

**3、外部样式：**1. 定义css资源文件。
2. 在head标签内，定义link标签，引入外部的资源文件

<link rel="stylesheet" type="text/css" href="css/d1.css"/>
<style type="text/css">
				@import url("css/d1.css");
			</style>

二、简单选择器(区分大小写)

1、标签选择器/元素选择器：选择具有相同标签名称的元素

• 语法： 标签名称{}

div{
		color: aqua;
	}
<div>hello css</div>

**2、类选择器：**选择具有相同的class属性值的元素。

• 语法：.class属性值{}

.divid{
		color: #5F9EA0;
		}
<div id="divid" class="divid">
	这是id选择器的div标签
</div>

3、id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一
* 语法：#id属性值{}

#divid{
		color: #5F9EA0;
		}
<div id="divid">
	这是id选择器的div标签
</div>

优先级: id > class > 元素选择器

三、扩展选择器

4、选择所有：优先级最低

*{
	color: #7CFC00;
} 

5、并集选择器

span,p{
		color: red;
	} 
<span>span标签</span>
		<div>
			<p>这是一个段落二</p>
		</div>

6、子选择器：选择子元素

div p{
	color: #000080;
	} 
<div>
	div标签
	<p>这是第一个段落</p>
	<p>这是第二个段落</p>
</div>

7、父选择器

div>p{
	color:red;
	} 
<span>span标签</span>
		<div>
			<p>这是一个段落二</p>
		</div>

8、相邻选择器

p+p{
	color: gold;
	}
<p>这是第一个段落</p>
<p>这是第二个段落</p>

9、兄弟选择器：同一个标签

.span~span{
		color: #ff557f;
			}
 <span class="span"> Hello World1</span>
 <span> Hello World2 </span>

10、属性选择器

input[type="button"]{
			color: red;
			}
<input type="image" src="img/1.jpg" height="150px"/>
<input type="button" value="确定" />