前端css常用的选择小汇

简介: 前端css常用的选择小汇

要使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器。选择器就是选择器用来指定样式的作用范围。

类选择器:

类选择器在css中比较常见,首先要在普通标签中设置一个类,类名不可为中文,然后在 style 标签中添加该类名的样式。类选择器在选择器前要加一个点”.”

例子:

<head>
<style type="text/css">
.shasha{
    color:red;
    font-size:20px;    
}
<style>
</head>
<body>
    <h1 class="shasha">标题</h1>
    <p class="shasha">第一段</p>
    <p> 第二段</p>
</body>

样式会作用于class类型为shasha的标签内容上,类名可以随便取,别用中文。

ID选择器

ID选择器与类选择器大致相同,不同的是:

  • ID选择起标签内部指定ID;
  • ID选择器前面不用点”.”,而用井号”#”
  • ID选择器只能起一个ID名;类选择器可以起多个类名。

例子:

<head>
<style type="text/css">
#shasha2{
    color:red;
    font-size:20px;    
}
<style>
</head>
<body>
    <h1 id="shasha2">标题</h1>
    <p id="shasha2">第一段</p>
    <p> 第二段</p>
</body>
子选择器:

小于这个类的子标签

例子:

.shasha>li{
    border:1px solid red;
}
所有后代标签选择器

小于号代表第一个后代,空格可以指定其所有后代标签

例子:

.shasha li{
    border:1px solid red;
}
通用选择器

通用选择器,选择html文档中的所有标签。

*{
    border:1px solid red;
    font-size:20px;
}
伪类选择符

给标签的某一个状态设定一个类,例如超链接标签可以设置为鼠标停留后显示别的颜色。

最常用的也就是a:hover

a:hover{
    color:red;
    font-size:20px;    
}
分组选择符

选择符中间以逗号隔开,等于同时给多个选择符添加样式

1. .shasha,#shasha2 span{
2. color:red;
3. }

标签选择器:

直接以html中的标签作为选择器:如果设置 HTML 的样式,选择器通常将是某个 HTML 元素,比如 p、h1、em、a,甚至可以是 html 本身,也称元素选择器

<style tye="text/css">
p{
    font-size:12px;
    line-height:1.6em;
}
html {color:black;}
h1 {color:blue;}
h2 {color:silver;}
</style>

总结:

  1. 普通标签选择:以html中的标签选择
  2. 类选择器:给标签添加一个类属性,根据类属性添加样式,可以使用多个类名,多次使用
  3. ID选择器:给标签添加一个ID属性,ID必须是要唯一的,一个文档只能使用一次ID选择器。
  4. 子选择器:用小于号分隔,指其选择器中的子标签
  5. 包含选择器:用空格分隔,指其选择器中的所有后代标签
  6. 通用选择器:对html中所有的标签有效
  7. 伪类选择器:给标签的一个动作添加一个选择器
  8. 分组选择器:逗号分隔,同时作用给多个标签


相关文章
|
11天前
|
Web App开发 前端开发 JavaScript
揭秘!前端大牛们如何巧妙利用CSS3,打造炫酷视觉效果!
【10月更文挑战第31天】前端开发面临复杂布局的挑战,本文介绍了几种提升开发效率和代码质量的工具和技术。基础的HTML和CSS可以应对大部分布局需求,而Firefox开发者工具、VS Code、Vue、React等则能应对更复杂的布局,帮助开发者构建高性能、用户友好的网页应用。
22 4
|
1月前
|
前端开发 JavaScript
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
157 1
|
2月前
|
前端开发
前端基础(五)_CSS文本文字属性、背景颜色属性
本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性,以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。
33 3
前端基础(五)_CSS文本文字属性、背景颜色属性
|
2月前
|
前端开发
前端基础(九)_CSS的三大特征
本文详细解释了CSS的三大特性:层叠性、继承性和优先级,并通过实例演示了样式冲突、叠加和选择器优先级的应用。
27 2
前端基础(九)_CSS的三大特征
|
1月前
|
前端开发 容器
前端技术分享:利用CSS Grid布局实现响应式设计
【10月更文挑战第1天】前端技术分享:利用CSS Grid布局实现响应式设计
|
1月前
|
前端开发 UED 容器
前端技术分享:利用 CSS Grid 实现响应式布局
【10月更文挑战第1天】前端技术分享:利用 CSS Grid 实现响应式布局
53 2
|
1月前
|
Web App开发 前端开发
【前端基础篇】CSS基础速通万字介绍(上篇)3
【前端基础篇】CSS基础速通万字介绍(上篇)
16 1
|
1月前
|
Web App开发 前端开发
【前端基础篇】CSS基础速通万字介绍(上篇)2
【前端基础篇】CSS基础速通万字介绍(上篇)
23 1
|
1月前
|
缓存 前端开发 JavaScript
【前端基础篇】CSS基础速通万字介绍(上篇)1
【前端基础篇】CSS基础速通万字介绍(上篇)
18 1
|
2月前
|
编解码 前端开发
前端基础(六)_CSS单位
本文介绍了CSS中常用的单位,包括像素(px)、相对长度单位(em、rem)、百分比(%)、视窗宽度(vw)和视窗高度(vh)。文章通过示例代码展示了这些单位在实际布局中的应用,解释了它们各自的特点和使用场景。例如,em和rem单位与字体大小相关,百分比单位与父元素的尺寸相关,而vw和vh单位则与浏览器视窗的宽度和高度相关。
25 1