CSS——基础选择器

最新推荐文章于 2024-07-06 20:00:00 发布

mintsolace

最新推荐文章于 2024-07-06 20:00:00 发布

阅读量354

点赞数

分类专栏：学习笔记 css 文章标签： css

本文链接：https://blog.csdn.net/mintsolace/article/details/77926285

版权

学习笔记同时被 2 个专栏收录

128 篇文章 2 订阅

订阅专栏

css

32 篇文章 1 订阅

订阅专栏

CSS：cascading style sheet，层叠式样式表，即一个标签可以同时被多种选择器选择，标签选择器、id选择器、类选择器。这些选择器都可以选择上同一个标签，从而影响样式。

基础选择器：

1.标签选择器，就是标签的名字。

……
<title>追光者</title>
	<style type="text/css">
		span{
			color: red;
		}
	</style>
</head>
<body>
	<p>如果说你是遥远的星河/耀眼得让人想哭<span>我是追逐着你的眼眸</span>总在孤单时候眺望夜空</p>
</body>
</html>

所有的标签都可以是选择器，比如ul、li、label、dt、dl、input，无论这个标签藏的多深，都一定能够被选择：

	<style type="text/css">
		p{
			color: skyblue;
		}
	</style>
</head>
<body>
	<ul>
		<li>
			<ul>
				<li>
					<ul>
						<li>
							<ul>
								<li>
									<p>我是五月天阿信</p>
								</li>
							</ul>
						</li>
					</ul>
				</li>
			</ul>
		</li>
	</ul>
</body>

标签选择器选择的是页面上所有这种类型的标签，经常描述共性，无法描述某一个元素的“个性”。比如希望页面上所有超链接都没有下划线：

a{
	/*去掉下划线：*/
	text-decoration: none; 
}

2.id选择器：选择符是"#"
任何html标签都可以有id属性，表示这个标签的名字。名字可以任取，但是①只能由字母、数字、下划线；②必须以字母开头；大小写严格区别，aa和AA是两个不同的id；③不能和标签同名，id不能叫做img或者body。④一个html页面，不能出现相同id，即使不是同一类型，比如页面上不能同时出现一个id为pp的p和一个id为pp的div。

		<style type="text/css">
			#page1{
					color:red;
			}
		</style>
</head>
<body>
	<p>后青春期的诗</p>
	<p id="page1">第二人生</p>
	<p>自传</p>
</body>

标签选择器+id选择器：

	<style type="text/css">
		p{
			width: 180px;
			height: 20px;
			background-color: pink;
		}
		#p2{
			border: 2px dotted mediumpurple;
			width: 200px;
		}
	</style>
</head>
<body>
	<h3 id="p2">如果说你是遥远的星河</h3>
	<h3>耀眼得让人想哭</h3>
	<p>我是追逐着你的眼眸</p>
</body>

3.类选择器：符号：.
类就是class属性，class属性和id非常相似，任何标签都可以携带class属性。class属性可以重复，如页面上很多标签都有"teshu"这个类：

		<style type="text/css">
		.teshu{
			color:lightpink;
		}
		</style>
</head>
<body>
	<h3 class="teshu">如果说你是遥远的星河</h3>  
	<h3>耀眼得让人想哭</h3>
	<p class="teshu">我是追逐着你的眼眸</p>
	<p>总在孤单时刻眺望夜空</p>
</body>

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span{
            font-size: 150px;
        }
        .g{
            color: deepskyblue;
        }
        .o{
            color: red;
        }
        .oo{
            color: orange;
        }
        .l{
            color:green;
        }
    </style>
</head>
<body>
    <span class="g">G</span>
    <span class="o">o</span>
    <span class="oo">o</span>
    <span class="g">g</span>
    <span class="l">l</span>
    <span class="o">e</span>
</body>

同一个标签，可能同时属于多个类，用空格隔开：
< h3 class=“teshu guanjian”>如果说你是遥远的星河< /h3>
此时的h3同时属于teshu类和guanjian类。
初学者很容易写成两个class：
< h3 class=“teshu” class=“zhongyao”>如果说你是遥远的星河< /h3>

多类名选择器在后期布局比较复杂的情况下还是较多使用的：

<div class="pink fontWeight font20">蔡文姬</div>
<div class="font20">妲己</div>
<div class="font14 pink">安琪拉</div>
<div class=“font14”>貂蝉</div>

总结：①class可以重复，即同一个页面上可能有多个标签同时属于某一个类；②同一个标签可以同时携带多个类。（类的使用能够决定一个人的CSS水平）

正确的CSS思路是“公共类”思路，类提供“公共服务”，比如大号字体，蓝色字体，下划线等类名，其相应的样式变化：

		<style type="text/css">
		.yanse{
			color:skyblue;
		}
		.xiahuaxian{
			text-decoration:underline;
		}
		.ziti{
			font-size:60px;
		}
		</style>
</head>
<body>
	<h3 class="yanse xiahuaxian">如果说你是遥远的星河</h3>
	<h3 class="yanse ziti">耀眼得让人想哭</h3>
	<p class="ziti xiahuaxian">我是追逐着你的眼眸</p>
	<p class="ziti">总在孤单时刻眺望夜空</p>
</body>

通过以上代码，可以总结：
①不要试图用一个类名把某个标签的所有样式写完。这个标签要多携带几个类，共同造成这个标签的样式；
②每个类要尽可能小，有“公共”的概念，能够让更多的标签使用。

id or class？
尽可能用class，极特殊情况可以用id。因为id是js用的，js要通过id属性得到标签，所以在CSS层面尽量不用id。另一方面，我们默认一个有id的元素会有动态效果。