CSS中的重要选择器

最新推荐文章于 2021-12-21 22:45:41 发布

是萝卜啊丶

最新推荐文章于 2021-12-21 22:45:41 发布

阅读量237

点赞数 1

本文链接：https://blog.csdn.net/qq_43303896/article/details/98263805

版权

引入外部样式文件(link)：

href路径写你需要的链接地址，与图片插入路径类似

选择器：

元素选择器（直接对标签进行设置)：

eg:

*{
    border:1px black soild;
    padding:4px;
}

这是通配符，此代码能设置html中所有能设置的标签border和padding

div
{
background:grey;
font-size:30px;


}

这个是设置了html的所有div标签为这个样式

常用的属性选择器

E{...}:指定该CSS样式对所有的E元素起作用

E[attr]{...}:指定该CSS样式对具有attr属性的E元素起作用

E[attr=value]{...}:指定该CSS样式对所有包含attr属性，且属性值为value的字符串，E起作用。

E[attr^=value]{...}:指定该CSS样式对所有包含attr属性，且属性值为value开头的字符串，E起作用。

E[attr*=value]{...}:指定该CSS样式对所有包含attr属性，且属性值为包含value的字符串，E起作用。

下面写几个简单的样式个大家看看：

<head>
   <style> 
	div{
		width:300px;
		height:30px;
		background:red;
		border:1px solid black;
		padding:10px;
	}
	/* 对有id属性的div元素起作用的CSS样式*/
	div[id]{
			background-color:green;
		}
		
	/* 对id属性以xx开头的div元素起作用的css样式*/
	div#zzxx{
	background:orange;
	color：#fff;
	}
	/*对id值包含xx的div元素起作用的CSS样式*/
	div[id*=xx]{
		background:blue;
	}

	/*对id属性值等于xx的div元素起作用的css样式*/
	div[id=xx]{
	background:#111;
	color:#fff;
	}
	</style>
</head>


<body>
    <div > 没有任何属性的div元素</div>
	<div id="a">带id属性的div元素</div>
	<div id="zzxx">id属性值包含xx字符串的div元素</div>
	<div id="xxyy">id属性值以xx开头的div元素</div>
	<div id="xx">id属性值为xx的div元素</div>
</body>

效果图片：

id选择器，class选择器。

选择器		style中写法	权重
class	.	.long{...}	10
id	#	#long{...}	100

这俩个选择器是很使用也是使用次数最多的选择器

兄弟选择器：

Selector1~Selector2{...}/Selector1、Selector2都是有效的选择器/

eg:

/*匹配id为android*的元素后面、class属性为long的兄弟节点*/
#android~.long
{
    background:red;
}

选择的是#android后面class="long"的所有标签，如果#android后面有多个class="long"的标签，那是选定多个，但是不能选中前面class="long"的标签。

选择器的组合：

如果想让一份CSS样式对多个选择器起作用。那就可以利用选择器组合来实现。选择器组合的语法如下：

Selector1，Selector2，Selector3{...} /*Selector1、Selector2、Selector3都是有效的选择器*/

对于这个组合而言，{...}定义的样式会对前面列出的所有选择器匹配的元素起作用。

伪类选择器：

：first-letter:该选择器对应的CSS样式对指定对象内的第一个字符起作用。

：first-line:该选择器对应的CSS样式对指定对象内的第一行内容起作用。

：before:该选择器与内容相关的属性结合使用，用于在指定对象内部的前端插入内容。

:after:该选择器与内容相关的属性结合使用，用于在指定对象内部的尾端插入内容。

接下来给大家演示一下代码：

<head>
 <style>
	   /*定义对作为其父元素的第一个子节点的li元素起作用的css样式*/
	li:first-child{
	border:1px solid black;
	}
	
	/*定义对作为其父元素的最后一个子节点的li元素起作用的css样式*/
	li:last-child{
	background:#aaa;
	}
	
	/*定义对作为其父元素的第2个子节点的li元素起作用的css样式*/
	li:nth-child(2){
	color:#888;
	}
	
	/*定义对作为其父元素的倒数第2个子节点的li元素起作用的css样式*/
	li:nth-last-child(2){
	font-weight:bold;
	}
	/*定义对作为其父元素的唯一的子节点的li元素起作用的css样式*/
	span:only-child{
	font-size:80pt;
	font-family:"隶书";
	}
	</style>
</head>



<body>
	<ol>
		<li>1111111</li>
		<li>2222222</li>
		<li>3333333</li>
		<li>4444444</li>
		<li>5555555</li>
	</ol>
	
	<ul>
		<li>6666666</li>
		<li>7777777</li>
		<li>8888888</li>
		<li>9999999</li>
		<li>
			<span>aaaaaaa</span>
		</li>
	</ul>
	<span>疯狂java联盟</span>

效果图：

常见的UI元素状态选择器：

：link ：匹配Selector选择器且未被访问（点击)前的元素。（通常只能是超链接)

:visited ：匹配Selector选择器且访问过的元素。（通常只能是超链接)。

:active ：匹配Selector选择器且处于被用户激活。（通常在被点击与释放之间)

:hover :悬停状态。

:focus ：已得到焦点元素。

:disable：当前不可用状态。

:default：页面打开时处于打开状态。

以hover为例子：

<head>	 
   <style>
	td{
	border:1px solid black;
	padding:4px;
	}
	tr:hover{
	background-color:#aaa;
	}
	</style>
</head>
<body>
	<table style="width:400px; border-collapse:collapse">
	<tr>
		<td>111111</td>
	</tr>
	
	<tr>
		<td>222222</td>
	</tr>
	
	<tr contenteditable="true">
		<td>333333</td>
	</tr>
	
	
	
	
	</table>

代码中的；

tr:hover{
background-color:#aaa;
}

就设置了<td>标签鼠标悬浮的状态：(background:#aaa）

如图：

这是将鼠标悬浮在上面发生的属性改变。

脚本中修改显示样式：

一、获取到需要设置CSS样式的目标元素，例如可以使用getElementById()方法。

二、修改目标元素CSS样式，常用方法有俩种。

修改行内CSS属性值：例如使用： “obj.style.属性名=属性值"的js代码即可。

修改HTML元素的class属性值：使用如：“obj.className=class选择器”的js脚本即可

（第一行修改的是单个属性。第二行修改的是一套属性)

下面给大家代码举例一下：

eg:动态增加立体效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
	<style type="text/css">
	.solid{
	
	width:160px;
	padding:5px;
	text-align:center;
	border-right:#222 4px solid;
	border-top:#ddd 4px solid;
	border-left:#ddd 4px solid;
	border-bottom:#222 4px solid;
	background:#ccc;
	}
	</style>
</head>
<body>
    <script >
	function chg()
	{
		document.getElementById('up').className="solid";
	}
	
	</script>
	
	<input type="button " onclick="chg()"  value="增加立体效果">
	<div id="up"> 有立体效果的层</div>
	
	
	
</body>
</html>

代码中将id="up"的div改成了class="solid"属性的div.所以div样式也发生改变

效果图：

随机改变背景颜色：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
	function change()
	{
		var bgColor="" ;
		
		for(var i=0;i<6;i++)
		{
			bgColor += Math.round(Math.random()*16);
		}
		document.body.style.backgroundColor="#"+bgColor;
	}
	document.onclick=change;
	</script>
</body>
</html>

循环6次；每次随机设置一个0~16的16进制数字；前面加“#‘.把bgColor等于它。形成了一个生成#000000~#FFFFFF之间的背景颜色，用点击事件触发。

效果图：

是萝卜啊丶

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS中的重要选择器

引入外部样式文件(link)：<link type="text/css"rel="stylesheet" href=" ">href路径写你需要的链接地址，与图片插入路径类似选择器：元素选择器（直接对标签进行设置)：eg:*{ border:1px black soild; padding:4px;}这是通配符，...
复制链接

扫一扫