css基本选择器

1 标签选择器（元素选择器）,标签选择器是指用HTML标签名作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。

h1 {
    color: red;
}

p {
    color: green;
}

2 id选择器,

id选择器使用“#”进行标识，后面紧跟id名，基本语法格式如下：

#id名{属性1：属性值1; 属性2：属性值2; ...}
​
<标签名 id="id值"></标签名>

3 类选择器

类选择器使用“.”（英文点）进行标识，后面紧跟类名，其基本语法格式如下：

定义：
.类名{属性1：属性值1; 属性2：属性值2; ...}
​
调用：
<标签名 class="类名"></标签名>

类选择器最大的优势是可以为元素对象定义单独或相同的样式。

<style>
	.lin {			/*类选择器， 在元素中使用class属性*/
		color: blue;
	}
	#xue {			/*id选择器， 在元素中使用id属性*/
		color: red;
	}
</style>

4 多类名选择器,我们可以给标签指定多个类名，从而达到更多的选择目的。

    <style>
        .font20 {
            font-size: 20px;
        }
        .font14 {
            font-size: 14px;
        }
        .red {
            color: red;
        }
        .fontWeight {
            font-weight: bold;
        }
    </style>

 <div class="font20 red fontWeight">西游记</div> 
    <div class="font14 fontWeight">三国演义</div>

 

5 id选择器和类选择器区别

W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。

类选择器（class）好比人的名字，可以重复使用，如：李伟、张伟

id选择器（id）好比人的身份证号，是唯一的，不允许重复，只能使用一次。

6 通配符选择器

通配符选择器用“*”号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式如下：

* {属性1：属性值1; 属性2：属性值2; ...}

* {
    margin: 0;	/*定义外边距*/
    padding: 0;	/*定义内边距*/
}

7 伪类选择器

(1) 链接伪类选择器, 链接伪类选择器主要针对于a标签

a:link		/*未访问的链接*/
a:visited	/*已访问的链接*/
a:hover		/*鼠标移动到链接上*/
a:active	/*选定的链接*/

例如:

a {		/*a是标签选择器，所有的链接*/
	font-weight: 700;
	font-size: 16px;
	color: grey;
}
a:hover {	/*:hover 是链接伪类选择器 鼠标移动到链接上*/
	color: red;		/*鼠标经过时，文本由原来的灰色变为红色*/
}

 表示a标签里面是灰色,鼠标覆盖变成红色.

(2) 结构（位置）伪类选择器（CSS3）

具体看伪类选择器:first-child与:first-of-type区别_t1220130004的博客-CSDN博客

(3)目标伪类选择器

:target选择器用于选取页面中的某个target元素。那什么是target元素呢？target元素，说白了就是该元素的id被当做页面的超链接来使用。

<a href="#live">个人生活</a>

<h2 id="live">个人生活</h2>
<p>
    家庭 刘德华的父亲刘礼在启德机场做过消防员的工作。20世纪60年代，刘礼开了一间小吃杂货店以赚钱维持家用。刘德华在家中还有三位姐姐，一位妹妹以及一位弟弟（刘德盛）。
</p>

:target {
    color: red;
}

 当点击个人生活链接时，对应的目标就更改样式。点击a,h2改变样式.