css选择器

css选择器

1.标签选择器

这种选择器影响范围大，尽量应用在层级选择器中。

div{
		color:#2dcfca;
		/*font-size:16px;  字体大小
		font-family:'楷体';	字体
		font-weight: bold;	加粗	
		font-style:italic;	斜体
		line-height: 24px;     行高  */  
		font:italic bold 24px/36px yahei;
		text-indent:48px; 
		text-align: center;  
		text-decoration:underline;  下划线
		/*text-decoration:overline;*/
		/*text-decoration: line-through;*/
		}

直接影响所有的div标签

<div >为了让网页元素的样式更加丰富，也为了让网页的内容和样式能拆分开，CSS由此思想而诞生，CSS是Cascading Style Sheets的首字母缩写，意思是层叠样式表。</div>

2.类选择器

• 指定类选择器

  .jian{
  			font-size:24px;
  			font-weight: bold;
  			color: gold;
  		}
  		.bold{
  			font-weight: bold;
  		}
  		.italic{
  			font-style: italic;
  		}
  

  一个标签选择调用多个类名，一个类可以被多个标签选择。

  <p class="bold italic through">天不生Theshy</p>
  	<p class="jian">LPL万古如长夜</p>
  

3.id选择器

用过选择id名来选择元素，元素的id名称不能重复。

#div1{
			font-size: 48px;
		}

<div id="div1">仙路尽头谁为峰，一见无始道成空</div>

4.通配选择器

匹配所有的元素

*{
			margin: 0;
		}

5.层级选择器

​ 1.包含选择器 空格(可跨层级) >(不可跨层级)

#header p{
			font-size:48px;
		}
#main>p{
			font-size:12px;
		}

<div id="warp">
		<div id="header">
			<p>头部区域</p>
			<p>头部区域</p>
			<p>头部区域</p>
		</div>
		<div id="main">
			<p>尾部区域</p>
			<p>尾部区域</p>
			<p>尾部区域</p>
		</div>
	</div>

​ 2.相邻选择器 +

.test1+div{
			background-color: gold;
		}

表示选择下一个元素

<p class="test1">哈哈哈哈</p>
	<div>所以不推荐使用id作为选择器</div>

​ 3.兄弟选择器 ~

​ 4.组选择器，

		h1,h2,h3,h4,h5,h6{
			font-weight: normal;
			margin: 0;
		}

6.属性选择器

​ 1.E[attr] 含有attr属性的标签

​ 2.E[attr=‘val’] attr属性等于val的标签

​ 3.E[attr~=‘val’] 指定了属性值，属性值是其中的一个或多个，其中一个是val

​ 4.E[attr^=‘val’] 指定了属性值，属性值以val开头

​ 5.E[attr$=‘val’] 指定了属性值，属性值以val结尾

​ 6.E[attr*=‘val’] 指定了属性值，属性值包含有val

​ 7.E[attr=‘val’] 指定了属性值，属性值是val或以val-开头

7.伪选择器（伪类）

​ 1.动态伪类

a:link{  //点击前
			color:gold;
		}
a:visited{	//点击后
			color: green;
		}
a:hover{	//鼠标指向时
			color: red;
		}
a:active{	//鼠标点击时，未松开
			color: yellow;
		}
input:checked{	//选取后
			width: 20px;
			height: 20px;

		}

​ 2.结构伪类

li:first-child{
			background-color: pink;
		}

​ 3.否定伪类

input:not([type="submit"]){
			border:2px solid red;
		}

​ 寻找第一个子标签

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

4.伪元素

.box1:before{
			content:'嘻嘻嘻';
		}
.box2:after{
			content:'哈哈哈';
		}