CSS_样式选择器

一、网页分成三个部分

结构HTML
表现css
行为javascript

二、css层叠样式表

内联样式表
内部样式表
外部样式表

<!--内联样式表-->
<p style="color:blue;font-size:14px">hello<p>

<!--内部样式表-->
<style>
	.box{
		wigth:80px;
		height:90px;
	}
<style>

<!--引入外部样式表-->
<link rel="stylesheet" href="url"/>

三、css基本语法

css注释

/*这里是css注释的内容*/

选择器+声明块

p{
	color:red;
	font-size:40px
]

四、常用选择器

元素选择器，p
id选择器#byid
class(类)选择器.byclass
*通用选择器

五、复合选择器

交集选择器div.red
	-交集选择器
		-作用:选中同时复合多个条件的元素
		-语法:选择器1选择器2选择器3选择器n
		-注意点:交集选择器中如果有元素选择器，必须使用元素选择器开头

<div class="red"><div>

六、选择器分组(并集选择器)

	作用:同时选择多个选择器对应的元素
	话法：选择器1，选择器2，选择器3，...,选择器n

h1,p{
	color:red;
}
<h1>选择器分组</h1>
<p>选择器分组</p>

七、子元素选择器

作用:选中指定父元素的指定子元素
语法:父元素 > 子元素

div.box > span{
	color: orange;
}

<div class="box" >
	我是一个div
	<span>我是div中的子元素span</spang>
	<p>我是div中的子元素p</p>
</div>

八、后代选择器

作用:选中指定元素内的指定后代元素
语法:祖先  后代

div span{
	color: skyblue
} 
<div class="box" >
	<p>我是div中的后代元素p
		<span>我是div中的后代元素span</span>
	</p>
</div>

（附加）兄弟元素

1、选择下一个兄弟
–语法:前一个+下一个
2、选择下边所有的兄弟
–语法:兄~弟

p + span{
	color:red;
}
p ~ span{
	color: red ;
}

<div class="box" >
	我是一个div
	<span>我是div中的span元素</span>
	<p>
		<span>我是p元素中的span</span>
	</p> 
	<span>我是div中的span元素</span>
	<span>我是div中的span元素</span> 
	<span>我是div中的span元素</span>
</div>

九、属性选择器

属性名：选择含有指定属性的元素
[属性名|=属性值] : 例如[attr|=val] 选择attr属性的值以val（包括val）或val-开头的元素（-用来处理语言编码）
属性名=属性值：选择含有指定属性和属性值的元素
属性名^=属性值：选择属性值以指定值开头的元素
属性名$=属性值：选择属性值以指定值结尾的元素
属性名*=属性值：选择属性值中含有某值的元素

p[title]{
	color:orange
}
p[title=abc]{
	color:orange
}
p[title^=ab]{
	color:orange
}
p[title$=c]{
	color:orange
}
p[title*=abc]{
	color:orange
}
<p title="abc">hello<>
<p title="abcdef">hello<>

十、伪类选择器，前缀是一个冒号 (:)

ul >li:first-child		<!--选择第一个,即选择了<li>1</li>-->
ul >li:last-child		<!--选择最后一个，即选择了<li>5</li>-->
ul >li:nth-child(数字n)	<!--
						n选中第n个
						2n或even选中偶数位的元素
						2n+1或odd选中奇数位的元素-->
						
ul >li:first-of-type		<!--选择同类型第一个-->
ul >li:last-of-type			<!--选择同类型最后一个-->
ul >li:nth-of-type(数字n)	<!--选择同类型第n个-->

ul >li:not(:nth-child(数字n))	<!--选择除了-->
ul li:only-child 	<!--当ul中只有一个li标签的时候起作用-->

<ul>
	<span>span</span>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <p>p</p>
</ul>

十一、超链接选择器

/* 表示没有被访问过的连接(正常的链接) */
a:link{
	color:blue
}
/* 表示被访问过的连接，visited只能修改链接的颜色 */
a:visited{
	color:orange
}
/* 表示鼠标移入的状态 */
a:hover{
	color:aqua
	font-size:50px
}
/* 鼠标点击的状态 */
a:active{
	color:red
	font-size:50px
}

十二、伪元素选择器，前缀是两个冒号 (::)

/* 开头第一个字母 */
<style>
   p::first-letter {
        font-size: 50px;
    }
</style>
 <p>
    时间好比一把锋利的小刀若用得不恰当,会在美丽的面孔上刻下深深的纹 路,使旺盛的青春月复一月,年复一年地消磨掉;但是,使用恰当的话,它却能 将一块普通的石头琢刻成宏伟的雕像。
</p>

/* 第一行 */
p::first-line{
	background-color: #00FFFF;
}

/* 选择，例如：鼠标选择复制 */
p::selection{
	background-color: #00FFFF;
}

/*元素的开始位置，必须结合content属性使用*/
div::before{
	content: abc;
	color: red;
}

/*元素的结束位置，必须结合content属性使用*/
div::after{
	content: abc;
	color: red;
}

十三、样式的继承

后代元素继承祖先元素

<style type="text/css">
	p{
		color: #0000FF;
	}
</style>
<p>
样式都一样
	<span>
	样式都一样
		<q>样式都一样</q>
	</span>
</p>

并不是所有的样式都会继承
比如：背景相关的，布局等相关的不会继承

十四、选择器的权重

样式优先级
内联样式 1,0,0,0
id选择器 0,1,0,0
类和伪类选择器 0,0,1,0
元素选择器 0,0,0,1
通配选择器 0,0,0,0
继承的样式 没有优先级

比较优先级时，需要将所有选择器相加计算（分组选择器单独计算）
优先级选择器相同时，使用后写的

可以在样式的后面添加!important后，优先使用该样式

p{
	color:red !important
}