CSS的几种核心选择器

核心选择器:

  • 标签选择器:针对一类标签
  • 类选择器:针对你想要的所有标签使用
  • 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; }
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值