CSS选择器

最新推荐文章于 2024-10-22 09:22:43 发布
一切会更好
最新推荐文章于 2024-10-22 09:22:43 发布
阅读量138
点赞数
CC 4.0 BY-SA版权
分类专栏： java前端文章标签： CSS选择器
本文链接：https://blog.youkuaiyun.com/weixin_45165848/article/details/97040619
java前端专栏收录该内容
20 篇文章
订阅专栏
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style type="text/css">
			div p{
				color: #f00;
			}
			div>p{
				font-size: 30px;
			}
			h3+section{
				background: #ADD8E6;
			}
			h3~section{
				height: 50px;
			}
			h3~p{
				text-decoration: underline;
			}
			a:link{  /*正常链接 点击前的*/
				color: #FF0000;  
			}
			a:hover{  /*鼠标悬停的*/
				color: #00479D;
			} 
			a:active{  /*触发时候的*/
				color: #8dcd31;
			}
			
			a:visited{   /*访问之后的样式*/
				color: #000;
			}
			
			/*a 链接 它通常有反应态*/
			
			/*:hover  不仅仅限于a元素  div:hover
			如果是一般的标签 比如像 div  span 也需要一个跳转链接的提示*/
			
			div:hover{
				cursor: pointer;   /*可以加该属性*/
			}

			/*表单的伪类*/
			
			
			input:disabled{
				/*background: #666;*/
				background: #fff;
				height: 30px;
				border: 0;
			}
			input:enabled{
				background: #f00;
			}
			input:focus{
				background: #8DCD31;
			}
			
			input:checked{
				width: 30px;
				height: 30px;
			}
			
			
		/*父元素的第几个子元素 必须是元素的名字跟他的在子节点的排序的顺序一致*/	
		.sbox .sbox1:nth-child(2){ 
			color: #8DCD31;
			background: #00479D;
		}
		.sbox div:first-child{ 
			color: #8DCD31;
		}
		.sbox div:last-child{ 
			color: #8DCD31;
		}
		.sbox div:nth-last-child(2){ 
			color: #8DCD31;
			font-size: 50px;
		}
		
		
		
		/*同级兄弟节点中 ,第几个次类型的元素   强调 元素的类型   必须是标签的名字  */
		.tbox div:nth-of-type(2){
			background: #FF0000;
		}
		h2:nth-of-type(1){
			background: #ADD8E6;
		}
		h2:first-of-type{
			
		}
		h2:last-of-type{
			
		}
		h2:nth-last-of-type(){
			
		}
		
		/*html标签的根节点 是html
		选择器:root{
			
		}*/
		
		div:empty{
			height: 10px;
			background: #FF6600;
			width: 100%;
		}
		.o-box:only-child{
			width: 500px;
			height: 300px;
			background: #00479D;
			color: #fff;
		}
		h3:only-of-type{
			text-decoration: underline;
		}
		
		
		/*属性选择器*/
		/*多数用在表单元素中*/
		
		
		/*E[属性名字] 有该属性的元素*/
		input[arr]{
			margin-top: 20px;
		}
		
		/*E[属性名字=""] 是属性值为""的E元素*/
		
		input[type=text],input[type=password]{
			height: 34px;
			width: 240px;
		}
		/*必须会*/
		input[type=submit]{
			width: 100px;
			height: 40px;
			background: #000;
			color: #fff;
		}
		input[value~=aa]{
			border: 5px solid #8DCD31;
		}
		/*^表示以...开头*/
		input[value^=b]{
			border: 5px solid #FF6600;
		}
		/*$ 表示以...结尾*/
		input[value$=b]{
			border: 5px solid #FF6600;
		}
		/**表示包含后面的字符*/
		input[value*=cccc]{
			border: 5px solid #FF6600;
		}
		/*| 以后面的字符开头 并且用"-"作为分隔的字符串*/
		input[value|=s]{
			border: 5px solid #FF6600;
		}
		
		
		/*伪元素 :页面上不存在此标签 但是又有一个内容展示出来*/
		
		
		
		.news-item a:after{
			content: "...";
		}
		.con{
			position: relative;
		}
		.con::before{
			content: "";
			position: absolute;
			width: 3px;
			height: 100%;
			background: #00479D;
		}
		
		div:first-line{
			
		}
		div:first-letter{
			font-size: 40px;
		}
		div::selection{
			background: #8DCD31;
		}
		</style>
	</head>
	<body>
		
	
		
		<div class="box">	
			<section>
				<p>3333</p>
			</section>
			<section>
				<p>3333</p>
			</section>
			<h3 class="box2">
				<p>22222</p>
			</h3>
			<section>
				<p>3333</p>
			</section>
			<section>
				<p>3333</p>
			</section>
			<section>
				<p>3333</p>
			</section>
			<p>111111</p>
			<p>111111</p>
			<p>111111</p>

		</div>
		
		
		<ul>
			<li>
				菜单1
				<ul>
					<li>菜单1-1</li>
					<li>菜单1-2</li>
					<li>菜单1-3</li>
				</ul>
			</li>
			<li>菜单2</li>
			<li>菜单3</li>
		</ul>
		
		
		
		
		<a href="#">百度</a>
		<input type="text" name="" id="" value="" />
		用户名：<input type="text" name="" id="" value="我的名字" disabled />
		<input type="checkbox" name="" id="" value="" />aaaa
		<button type="button">按钮</button>
		
		
		<h1>结构伪类选择器</h1>
		<div class="sbox">
			<div class="sbox1">1</div>
			<div class="sbox1">2</div>
			<h1>1111111</h1>
			
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
			<div>7</div>
		</div>
		
		<div></div>
		
		<div class="tbox">
			<div>1</div>
			<h2 class="til">1111111</h2>
			<div>2</div>
			<h1 class="til">1111111</h1>
			<div>3</div>
			<div>4</div>
			<h1>1111111</h1>
			<div>5</div>
			<h2 class="til">1111111</h2>
			<p>6</p>
			<div>7</div>
		</div>
		<div>
			<div class="o-box">3333333333333333333333</div>
		</div>
		<div>
			<div class="o-box">111111111111111111</div>
			<div class="o-box">111111111111111111</div>
		</div>
		
		<div>
			<div class="o-box">111111111111111111</div>
			<div class="o-box">111111111111111111</div>
			<h1>1111111</h1>
			<p>6</p>
			<h3>33333333</h3>
			<h3>33333333</h3>
			<h3>33333333</h3>
		</div>
		<div>
			<div class="o-box">111111111111111111</div>
			<div class="o-box">111111111111111111</div>
			<h1>1111111</h1>
			<p>6</p>
			<h3>33333333</h3>
		</div>
		
		
		<hr />
		<h1>属性选择器</h1>
		
		<form action="" method="post">
			<div>用户名 ：<input type="text" name="" id="" value="aa bbb cccc" arr="a" /></div>
			<div>密码：<input type="password" name="" id="" value="" arr="a" /></div>
			<div>真实姓名 ：<input type="text" name="" id="" value="" /></div>
			<div>身份证号 ：<input type="text" name="" id="" value="aa ccc" /></div>
			<div>联系地址：<input type="text" name="" id="" value="baaaa" /></div>
			<div><input type="checkbox" name="" id="" value="s-a-b" /></div>
			<div><input type="submit" value="提交"/></div>
		</form>
		
		<hr />
		<h1>伪元素选择器</h1>
		
		<div class="news-item"><a href="#">22222222222222222222<br />222222222222222222222222</a></div>
		<div class="news-item"><a href="#">11111111111111111111111111111111</a></div>
		
		
		<p class="con">文字文字文字文字文字文字文字文字文字</p>
	</body>
</html>