版权声明：本文为博主原创文章，欢迎各位转载，但须注明出处 https://blog.csdn.net/qq_34202873/article/details/86150325
CSS的几种核心选择器
核心选择器：
- 标签选择器：针对一类标签
- 类选择器：针对你想要的所有标签使用
- ID选择器：针对某一个特定的标签使用
- 伪类选择器:针对一些标签具体的行为使用
优先级：Id选择器 > class选择器 > 标签选择器
1.标签选择器
标签选择器，选择的是页面上所有这种类型的标签，优先级较低”。
<style type="text/css">
p
{
font-size:14px;
}
</style>
标签选择器调用
<body>
<p>测试</p>
</body>
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>
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;
}