CSS的几种核心选择器

最新推荐文章于 2023-05-19 20:55:42 发布

带你吃饭就好

最新推荐文章于 2023-05-19 20:55:42 发布

阅读量235

点赞数 1

分类专栏：前端文章标签： CSS选择器

原文链接：https://blog.csdn.net/qq_34202873/article/details/86150325

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

核心选择器：

标签选择器：针对一类标签
类选择器：针对你想要的所有标签使用
ID选择器：针对某一个特定的标签使用
伪类选择器:针对一些标签具体的行为使用
后代选择器:可以选择作为某元素后代的元素

优先级：Id选择器 > class选择器 > 标签选择器

1.标签选择器

标签选择器，选择的是页面上所有这种类型的标签，优先级较低”。

type="text/css";
<style>
p{
    font-size:14px;
}
</style>

标签选择器调用

<p>测试</p>

2.类选择器：用圆点`.`定义

类选择器，针对想要的所有标签使用只需要定义class即可。

<style type="text/css">
/*类选择器*/
.testClass
{
	background-color: pink;
	font-weight: bold;
	font-size: 16px;
	color: black;
}
</style>

类选择器调用

<body>
<h1 class="testClass">测试</h1>
</body>

3.ID选择器：用符号`#`定义

针对特定的标签来使用，只能对特定ID使用标签id命名规范说明：

只能有字母、数字、下划线。
必须以字母开头。
不能和标签同名。比如id不能叫做body、img、a。
大小写严格区分，也就是说aa,和AA是两个不同的ID
重要！：id是唯一的，不能出现相同的id

<style type="text/css">
/*id选择器的使用*/
#testID{
	background-color: blue;
	font-size: 40px;
}
</style>

id选择器调用

<body>
<h2 id="testID">测试</h2>
</body>

4.伪类选择器：用标签名：{} 定义

伪类选择器，针对一些标签具体的行为使用。

其中对于<a>标签特有的状态：

link：超链接点击之前
visited：超链接点击之后

而a{}和a:link{}的区别：

a{}定义的样式针对所有的超链接(包括锚点)
a:link{}定义的样式针对所有写了href属性的超链接(不包括锚点)

所有标签共有的状态：

focus：是某个标签获得焦点的时候（比如某个输入框获得焦点）
hover：鼠标放到某个标签上的时候
active：点击某个标签没有松鼠标时

<head>
  <style type="text/css">
    input:focus{
        border:3px solid red;
        color:white;
        background-color:blue;
    }
    label:hover{
        color:red; 
    }
    label:active{
        color:green; 
    }
  </style>
</head>

伪类选择器调用

<body>
<input type="text" name="">
<br>
<br>
<label>lable测试</label>
</body>

ps:鼠标放上去自行查看变化

5.后代选择器：其他选择器叠加中间空格

标签id命名规范说明：

只能有字母、数字、下划线。
必须以字母开头。
不能和标签同名。比如id不能叫做body、img、a。
大小写严格区分，也就是说aa,和AA是两个不同的ID
重要！：id是唯一的，不能出现相同的id

<style type="text/css">
/*id选择器的使用*/
/*父子选择器*/
/*对id选择器为#testID下的span元素定义样式*/
#testID span{
	color: red;
	font-style:italic;
}
/*对标签选择器为h1下的span元素下的a元素定义样式*/
h1 span a{
	color:green;
}
</style>
/*
这两个标签不一定是连续紧挨着的，只要保持一个后代的关联即可。
后代选择器不局限于什么类型选择器
#id span span
s1 #id span
div #id s2
*/

END：CSS共有的可以提取出来：

.ad_stu{
	width:136px;
	height:196px;
	background-color:#FC7E8C;
	margin:5px 0 0 6px;
	float:left;
}
 
.ad_2{
	background:#7CF574;
	height:196px;
	width:457px;
	float:left;
	margin:5px 0 0 6px;
}
 
.ad_house{
	background:#7CF574;
	height:196px;
	width:152px;
	float:left;
	margin:5px 0 0 6px;
}
可以写成：
.ad_stu{
	width:136px;
	background-color:#FC7E8C;
}
 
.ad_2{
	background:#7CF574;
	height:196px;
	width:457px;
}
 
.ad_house{
	background:#7CF574;
	height:196px;
	width:152px;
}
 
.ad_stu, .ad_2, .ad_house{
	height:196px;
	margin:5px 0 0 6px;
	float:left;
}