CSS知识点-选择器-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_70314704/article/details/139330110

CSS

css（层叠样式表）能够改变样式—–让页面更好看！！

基本选择器

通配符选择器

在java中，导入方式可以是import java.util.*，其中 * 就代表全部，在css中则表示通配符

*{
    color:red
        /*
        *所有的标签都会被渲染成红色
        */
}

标签选择器

通过标签名来选择标签

p{
    color:red
        /*
        *所有的p标签都会被渲染成红色
        */
}

类选择器

在css中并没有类的概念，但是可以使用class来表示某一属性，比如，就能够通过input_class标识input标签，但是同一个class属性可以出现在很多标签

.input_class{
    color:red
        /*
        *所有class="input_class"的标签都会被渲染成红色
        */
}

ID选择器

在页面中，可以通过id来唯一标识某个标签，比如

这是一个链接

，则表示该 p标签在html中是唯一的

#only{
    color:red
}

基本选择器的优先级别

ID选择器 > 类选择器 > 标签选择器

群组选择器

在页面中，可能我需要特别选择一些标签进行样式渲染，那么就可以使用群组选择器

p,a,#only,.input_class{
    color:red
        /*p标签、a标签、id="only"、class="input_class"的标签都会变成红色*/
}

派生选择器

派生选择器也称为上下文关系选择器，即父子、后代关系

后代选择器

顾名思义，用于选择后代标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
            /*
            虽然ul标签是a标签的”祖父“，但是仍然是ul的后代标签，所以超链接1、2、3应该变为红色
            */
			ul a{color: red;}
		</style>
	</head>
	<body>
		
		<ul>
			<li>
				<a href="#">超链接1</a>
			</li>
			<li>
				<a href="#">超链接2</a>
			</li>
			<li>
				<a href="#">超链接3</a>
			</li>
		</ul>
		
		<ul>
			<li>
				<a href="#">超链接4</a>
			</li>
			<li>
				<a href="#">超链接5</a>
			</li>
			<li>
				<a href="#">超链接6</a>
			</li>
		</ul>
		
		<a href="#">超链接7</a>
		<a href="#">超链接8</a>
		<a href="#">超链接9</a>
	</body>
</html>

子代选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			/*
			 * 使用 >  来表示直系关系，比如li标签与a标签是”直系父子“，所以超链接1、2、3、4、5、6都会变为红色
			 */
		
			li>a{color: red;}
		
		</style>
	</head>
	<body>
		
		<ul>
			<li>
				<a href="#">超链接1</a>
			</li>
			<li>
				<a href="#">超链接2</a>
			</li>
			<li>
				<a href="#">超链接3</a>
			</li>
		</ul>
		
		<ul>
			<li>
				<a href="#">超链接4</a>
			</li>
			<li>
				<a href="#">超链接5</a>
			</li>
			<li>
				<a href="#">超链接6</a>
			</li>
		</ul>
		
		<a href="#">超链接7</a>
		<a href="#">超链接8</a>
		<a href="#">超链接9</a>
	</body>
</html>

相邻兄弟选择器

顾名思义，只有相邻的兄弟标签才能被选择，这里的兄弟代表标签一致

注意：相邻兄弟选择器样式作用在后者

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			/*
			 * 超链接1、2、3虽然看起来挨在一起，但是并不”亲“，因为他们属于相邻的li标签的子标签
              * 但是超链接4、5、6确实直接相邻在一起的兄弟标签，所以超链接5、6会变为红色
			 */
		
			a+a{color: red;}
		
		</style>
	</head>
	<body>
		
		<ul>
			<li>
				<a href="#">超链接1</a>
			</li>
			<li>
				<a href="#">超链接2</a>
			</li>
			<li>
				<a href="#">超链接3</a>
			</li>
		</ul>
        
		<a href="#">超链接7</a>
		<a href="#">超链接8</a>
		<a href="#">超链接9</a>
	</body>
</html>

属性选择器

属性选择器，即通过标签 + 属性或标签 + 属性 + 值来定位标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			/*
			 * 属性选择器
			 * 
			 * 一个属性的情况
			 * input[placeholder]{color: red;}
			 * 
			 * 一个属性+值的情况
			 * input[placeholder='请输入昵称']{color: red;}
			 * 
			 * 多个属性的情况
			 * input[name][placeholder]{color: red;}
			 * 
			 * 多个属性+值的情况
			 * input[type='password'][name='repassword']{color: red;}
			 */

		</style>
	</head>
	<body>
		<form action="服务器地址" method="get">
			
			账号：<input type="text" name="username" /><br />
			密码：<input type="password" name="password" /><br />
			确认密码：<input type="password" name="repassword" /><br />
			昵称：<input type="text" name="nickName" placeholder="请输入昵称" /><br />
			姓名：<input type="text" name="name" placeholder="请输入姓名" /><br />
			性别：
				<input type="radio" name="sex" value="man" checked="checked"/>男
				<input type="radio" name="sex" value="woman"/>女
				<br />
			爱好：
				<input type="checkbox" name="hobbies" value="football" checked="checked"/>足球
				<input type="checkbox" name="hobbies" value="basketball" />篮球
				<input type="checkbox" name="hobbies" value="shop" />购物
				<br />
			省份：
				<select name="province">
					<option value="hn">湖南</option>
					<option value="hb">湖北</option>
					<option value="sc" selected="selected">四川</option>
					<option value="gd">广东</option>
				</select>
				<br />
			
			<input type="submit" value="提交" />
		</form>
		
		
	</body>
</html>

锚伪类

锚伪类/css伪类是用来添加一些选择器的特殊效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			a:link {color: #66ff99}		/* 未访问的链接 */
			a:visited {color: #660033}	/* 已访问的链接 */
			a:hover {color: #00ccff}	/* 鼠标移动到链接上 */
			a:active {color: #33ffff}	/* 选定的链接 */
		</style>
	</head>
	<body>
		<a href="http://www.jd.com">跳转</a>

	</body>
</html>