博客列表 >css选择器

css选择器

程煜
程煜原创
2019年10月31日 15:25:59921浏览

一.元素显示方式分为哪几种,并举例,正确描述它们?

  1. 块级元素和行内元素

  2. 描述:块级元素:如div、table、p等

          (1)遵循最大化原则(2)总是独占一行,自动充满父元素的内容区 (3)块级元素两边不允许有其他元素(4)块级元素在没有内容的情况下需要设置宽高否则无法感知存在

             行内元素:如span、input、strong、a等

          (1)遵循最小化原则(2)总是在一行文本元素的内部生成,无法设置宽高

二.css是什么?它的主要作用是什么?

是什么:层叠样式表          主要作用:用来设置页面中的元素和布局

三.什么是css选择器,它的样式声明有哪两部分组成?

css选择器:选择器是一种模式,用于选择所需要的样式

样式声明:[code] 选择器{样式}

四.举例演示css简单选择器

总结:当元素选择器、类选择器、Id选择器同时存在时ID选择器的优先级>类选择器>元素选择器

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 通配符选择器 */
			* {
				background-color: burlywood;
			}

			/* 
			元素选择器
			 选择标签ul将字体颜色设为绿色
			*/
			ul {
				color: green;
			}

			/* 属性选择器 */
			/* 选择设有class属性的p标签 */
			p[class] {
				color: blue;
			}

			p[class='book'] {
				color: greenyellow;
			}

			/* 类选择器 优先级大于元素选择器*/
			.book {
				background-color: blue;
			}

			/* id选择器优先级大于类选择器 */
			#game {
				background-color: gray;
			}

			/* 
			群组选择器
			 选择有class=xi的元素 以及 h2 标签
			 但游戏为变色因为他有一个id上面给他设置了css说明id选择器优先级大于群组选择器
			 */
			.xi, h2{
				background-color: red;
			}
		</style>
	</head>
	<body>
		<h2>举例演示css简单选择器</h2>

		<ul>
			<li class="book">
				<h2>图书</h2>
				<ul>
					<li class="xi">西游记</li>
					<li>水浒传</li>
				</ul>
			</li>
		</ul>
		<ul>
			<li>
				<h2 id="game">游戏</h2>
				<ul>
					<li>英雄联盟</li>
					<li>王者荣耀</li>
				</ul>
			</li>
		</ul>
		<ul>
			<li>
				<h2>音乐</h2>
				<ul>
					<li>英雄联盟</li>
					<li>王者荣耀</li>
				</ul>
			</li>
		</ul>

		<p class="">阿斯达所大润肺委托人味儿</p>
		<p>阿斯达所大润肺委托人味儿</p>
	</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

五.举例演示css上下文选择器

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 后代选择器 */
			div h2{
				color: blue;
			}
			/* 父子选择器因为div中的h2与article不是父子关系所以不匹配 */
			article > h2{
				color: green;
			}
			/* 同级相邻选择器 +选择相邻的*/
			.baidu + h2{
				color: black;
			}
			/* 同级所有选择器 ~选择所有同级的*/
			.ali ~ h2{
				color: skyblue;
			}
		</style>
	</head>
	<body>
		<article>
			<h2>举例演示css上下文选择器</h2>
			<div>
				<h2 class="baidu">百度</h2>
				<h2>阿里</h2>
				<h2>腾讯</h2>
			</div>
			<div>
				<h2 class="ali">阿斯顿</h2>
				<h2>阿萨德法</h2>
				<h2>阿萨</h2>
			</div>
			<h2>英雄联盟</h2>
			<h2>QQ飞车</h2>
		</article>
		
	</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

六.举例演示常用伪类选择器

总结:伪类选择器本质上也属于class级别的选择器,优先级小于id选择器大于标签选择器

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 结构伪类选择器 */
			/* 选中所有ul下的第三个子元素也可以写成ul>nth-child()*/
			ul > :nth-child(2){
				color: red;
			}
			/* 匹配第一个ul元素中的第二个子元素 */
			ul:first-child > :nth-child(2){
				color: green;
			}
			/* 匹配第一个ul元素中的最后一个子元素优先级高于上面的 */
			ul:first-child>:last-child{
				color: blue;
			}
			/* 匹配第一个ul元素中的最后一个子元素的所有li子元素 */
			ul:first-child>:last-child li:nth-child(n+1){
				background-color: orange;
			}
			/* 匹配所有ul标签的倒数第二个子元素 */
			ul>:nth-last-child(2){
				background-color: yellow;
			}
			/* 匹配ul元素中的唯一子元素 */
			ul:only-child{
				background-color: greenyellow;
			}
			
		</style>
	</head>
	<body>
		<h2>举例演示常用伪类选择器</h2>
		<div>
			<ul>
				<li>
					<h2>爱好</h2>
					<ul>
						<li>看书</li>
						<li>打游戏</li>
						<li>听音乐</li>
						<li>
							<span>运动</span>
							<ul>
								<li>羽毛球</li>
								<li>乒乓球</li>
								<li>桌球</li>
								<li>篮球</li>
							</ul>
						</li>
					</ul>
				</li>
				<li>
					<h2>电影</h2>
					<ul>
						<li>恶人转</li>
						<li>复仇者联盟</li>
						<li>钢铁侠</li>
						<li>美国队长</li>
					</ul>
				</li>
				<li>
					<h2>动漫</h2>
					<ul>
						<li>死神</li>
						<li>火影</li>
						<li>家庭教师</li>
						<li>海贼王</li>
					</ul>
				</li>
			</ul>
		</div>
	</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

七.举例演示常用表单伪类选择器

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 选择每个启用的input元素 */
			input:enabled{
				background-color: red;
			}
			/* 选择每个被禁用input标签 */
			input:disabled{
				background-color: green;
			}
			input:required{
				background-color: yellow;
			}
		    input:checked{
				background: greenyellow;
			}
			/* 选择不包含required属性的input标签覆盖了disabled和enabled */
			input:optional{
				background: greenyellow;
			}
		</style>
	</head>
	<body>
		<h2>举例演示常用表单伪类选择器</h2>
		<form action="register.php" method="post">
			<p>
				<label for="username">姓名:</label>
				<input type="text" name="username" id="username"  placeholder="请输入姓名" disabled=""/><br />
			</p>
			<p>
				<label for="password">密码:</label>
				<input type="password" name="password" id="password" placeholder="请输入不得少于6位密码" required /><br />
			</p>
			<p>
				<label for="mail">邮箱:</label>
				<input type="email" name="mail" id="mail" placeholder="123456@qq.com"/><br />
			</p>
			<label for="address">住址:</label>
			<select name="address">
				<optgroup label="江苏">
					<option value="南通">南通</option>
					<option value="无锡">无锡</option>
					<option value="南京" selected="">南京</option>
				</optgroup>
				<optgroup label="江西">
					<option value="南昌">南昌</option>
					<option value="景德镇">景德镇</option>
				</optgroup>
			</select><br />
			<label for="man">性别:</label>
			<input type="radio" name="sex" id="man" checked=""/><label for="man">男</label>
			<input type="radio" name="sex" id="woman" /><label for="woman">女</label><br />
			<label for="">爱好:</label>
			<input type="checkbox" name="hoppy" id="book" checked="" /><label for="book">看书</label>
			<input type="checkbox" name="hoppy" id="basketball" /><label for="basketball">篮球</label>
			<input type="checkbox" name="hoppy" id="code" /><label for="code">敲代码</label>
			<input type="checkbox" name="hoppy" id="game" disabled=""/><label for="game">打游戏</label><br />
			<button>提交</button>
		</form>
	</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议