CSS选择器

最新推荐文章于 2024-07-24 22:39:14 发布

左牵黄,右擎苍

最新推荐文章于 2024-07-24 22:39:14 发布

阅读量68

点赞数

文章标签： css

本文链接：https://blog.csdn.net/m0_74854911/article/details/129885478

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

选择器用于选择网页上的元素，以便可以设置样式

一、通用选择器

（用*星号或星号表示）与页面上的每个单个元素匹配

二、元素类型选择器

将文档相应元素匹配

三，ID选择器

为单个或唯一元素，定义：#后加ID值

四，类选择器

具有class属性的任何元素，定义：.后加类值

五，子选择器

作为某些元素的直接子元素的元素。用>隔开

        h3 { color:cadetblue; }
		#idd { color: rosybrown; }
		.cat { color:yellowgreen;}
		ul > li { list-style: square; }
		ul > li ol { list-style: none; }
		.nav>ul>li{width: 100px;height: 65px;float: left;line-height: 65px;}
		.nav>ul>li:hover{background-color: blue; cursor: pointer;}
		a:link{color: royalblue;}
		a:visited{color: aquamarine ;}
		a:hover{color: lightblue;}
		a:active{color: black;}

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<title>选择器</title>
		<!-- 选择器用于选择网页上的元素，以便可以设置样式 -->
	<link rel="stylesheet" type="text/css" href="选择器.css" >
	</head>
	<body>
		<h3>标签选择器：将文档相应元素匹配</h3>
		<h3>ID选择器：为单个或唯一元素</h3>
			<p id="idd">定义：#后加ID值</p>
		<h3>类选择器：具有class属性的任何元素</h3>
			<p class="cat">定义：.后加类值</p>
		<h3>子选择器：作为某些元素的直接子元素的元素。用>隔开</h3>
			<ul>
					<ol>
							<li>ID</li>
							<li>class</li>
							<li>标签</li>
							<li>通配符</li>
						</ol>
					</li>
					<div class="nav">
				<ul>
				    <li><a href="#">推荐</li>
				    <li><a href="#">首页</li>
				    <li><a href="#">关注</li>
					<li><a href="#">我的</a></li>
				</ul>
				</div>
		<h1></h1>
		<h1></h1>
	</body>
</html>

六，分组选择器

选择共享h1，h2和h3。因此，可以将其分为逗号分隔的列表

h1, h2, h3 {font-weight: normal;}
h1 {font-size: 36px;}
h2 {font-size: 28px;}
h3 {font-size: 22px;}

七，伪类选择器

选择器：伪类{ 属性：值 ; }

1，锚伪类

:hover 将光标放在元素上但不选择它时
:active 当元素被激活或单击
:focus 当元素具有键盘焦点时
必须按正确的顺序定义- :link, :visited, :hover, :active, :focuss

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		li{
		        background-color: black);
		    }
		ol {
		        list-style-type: upper-roman;
		    }
		.nav>ol>li{width: 100px;height: 65px;float: left;line-height: 65px;}
		.nav>ol>li:hover{background-color: blue; cursor: pointer;}
		a :link{color: royalblue; font-weight: 200;}
		a:hover{color: lightblue;}
		a:active{color: black;}
		a:visited{color: aquamarine ;}
		</style>
	</head>
	<body>
	<h3>CSS罗马数字....有序列表</h3>
	<div class="nav">
	<ol>
	    <li><a href="#">游戏1</li>
	    <li><a href="#">游戏2</li>
	    <li><a href="#">游戏3</li>
		<li><a href="#">游戏4</a></li>
	</ol>
	</div>
	
	</body>
</html>

2，：nth-child伪类

3，:first-child伪类

:first-child伪类匹配的是一些其他元素的第一个子元素的元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS :first-child 伪类示例</title>
<style>
    ol{
        padding: 0;
        list-style: none;          
    }
    ol li{
        padding: 10px 0;
        border-top: 1px solid #000000;
    }
    li:first-child {
        border-top: none;
    }
</style>
</head>
<body>
    <h1>有序列表</h1>
    <ol>
        <li>重庆</li>
        <li>甘肃</li>
    </ol>
    <p> <strong>注意</strong>：有熊<code> <！DOCTYPE> </code> 文档。</p>
</body>
</html>