css四种基本选择器
css选择器是什么?
要使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器。
HTML页面中的元素就是通过CSS选择器进行控制的。
CSS选择器:就是指定CSS要作用的标签,那个标签的名称就是选择器。意为:选择哪个容器。
CSS的选择器分为两大类:基本选择题和扩展选择器。
基本选择器:
1.标签选择器:针对一类标签
2.ID选择器:针对某一个特定的标签使用
3.类选择器:针对你想要的所有标签使用
4.通用选择器(通配符):针对所有的标签都适用(不建议使用)
1.标签选择器:一个完整的HTML页面是有很多不同的标签组成,而标签选择器,则是决定哪些标签采用相应的CSS样式,(在大环境中你可能出于不同的位置,但是不管怎么样,你总是穿着同一套衣服,这件衣服就是由标签选择器事先给你限定好的,不管走到哪里都是这身衣服)
如下所示:
style type="text/css">
p{
font-size:40px;
}</style>
<body>
<p>标签选择器</p>
</body>
2.id选择器:根据元素ID来选择元素,具有唯一性。前面以”#”号来标志。
<head>
<title>Document</title>
<style type="text/css">
#good
{
border:3px dashed green;
}
</style>
</head>
<body>
<h2 id="good">id选择器</h2>
</body>
3.类别选择器:类选择器根据类名来选择。和id非常相似,任何的标签都可以携带id属性和class属性。但是id属性只能被某一特定标签引用一次。
如下所示:
<style type="text/css">
.xl{
color: green;
}
.xd{
font-size: 40px;
}
</style>
<p class="xl xd">段落</p>
<p class="xl">段落</p>
<p class="xd">段落</p>
4.通配符*:匹配所有标签不建议使用。
<style type="text/css">
/*定义通用选择器*,希望所有标签的颜色是绿色字符大小40磅*/{
color: green;
font-size: 40px;
}
</style>
css四种基本选择器的更多相关文章
- css样式表中四种属性选择器
学习此连接的总结http://developer.51cto.com/art/201009/226158.htmcss样式表中四种属性选择器1> 简易属性 tag[class]{ font-we ...
- 前端基础----CSS语法、CSS四种引入方式、CSS选择器、CSS属性操作
一.CSS语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如: h1 {color:red; font-size:14px;} 二.CSS四种引入方式 1,行内式 行内式是在标 ...
- CSS 四种引入样式表优缺点分析
CSS 四种引入样式表 CSS 有四种方式引入样式表,如下: 外部样式表 内部样式表 行内样式表 导入样式表 外部样式表优缺点 优点 实现了结构与表现的代码完全分离 方便复用及维护 因为分离到各自独立 ...
- css四种选择器总结
css 在网页开发中扮演着重要的角色,被誉为网页开发的三剑客,如果说html是人的外在器官部分,那css无疑是各个器官组成在一起然后表现出来,css又称样式重叠在网页排版布局中的地位举足轻重. 做 ...
- CSS 四种样式表 六种规则选择器 五种常用样式属性
新的html程序要在VS中编写了,在vs中安装ASP.NET和Web开发,并用ASP.NET Web 应用程序(.NETFramework)创建一个网页程序.添加一个html页 后面的代码都是在htm ...
- CSS四种定位及应用
定位(position) 如果,说浮动, 关键在一个 “浮” 字上面, 那么 我们的定位,关键在于一个 “位” 上. PS: 定位是我们CSS算是数一数二难点的了,但是,你务必要学好它,我们CSS离不 ...
- CSS的四种基本选择器和四种高级选择器
做个快乐的搬运工:https://blog.csdn.net/DYD850804/article/details/80997251
- css四种定位
概述:元素定位属性主要包括的模式和边偏移两部分,也就是说以后定位要和边偏移量搭配使用.边偏移加定位定位模式才能构成一个完整的定义方式. 偏移量说明: 边偏移属性 描述 top: 顶端偏移,定义元素相对 ...
- Css四种样式
1. 2 3 4 5 6.
随机推荐
- xampp修改mysql 启动脚本
打开xmapp,点击mysql对应的config按钮进入my.ini文件,如图所示: 修改mysqld服务的port参数3306为你想要设置的port,如图2所示: 重新启动mysql服务即可用客户端 ...
- Python简单的抓取静态网页内容
import requests from bs4 import BeautifulSoup res = requests.get('http://news.sina.com.cn/china/')#获 ...
- .Net Core 商城微服务项目系列(一):使用IdentityServer4构建基础登录验证
这里第一次搭建,所以IdentityServer端比较简单,后期再进行完善. 1.新建API项目MI.Service.Identity,NuGet引用IdentityServer4,添加类InMemo ...
- IDEA 学习笔记之 Console显示日志大小
Console显示日志大小: IntelliJ IDEA默认的Output输出缓存区大小只有1024KB,超过大小限制的就会被清除,而且还会显示[too much output to process] ...
- scalikejdbc 学习笔记(5)
常用增删改查操作: import scalikejdbc._ import scalikejdbc.config._ object CommonOperation { def main(args: A ...
- Drill 学习笔记之 入门体验
简介: Apache Drill是一个低延迟的分布式海量数据(涵盖结构化.半结构化以及嵌套数据)交互式查询引擎.分布式.无模式(schema-free) 是Google Dremel的开源实现,本质是 ...
- 03-Django基础概念和MVT架构
一.Django基础 掌握Django的 MVT 架构的使用 掌握Git管理源代码 主要内容 了解Django的 MVT 架构的使用流程 使用Django完成案例 : 书籍信息管理 MVC介绍 MVC ...
- hihocoder 数论二·Eular质数筛法
数论二·Eular质数筛法 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Ho:小Hi,上次我学会了如何检测一个数是否是质数.于是我又有了一个新的问题,我如何去快速得 ...
- centos7 安装 mysql5.7 版本(全)
centos 安装 版本说明 :centos7,mysql5.7 ,不是 centos7 可能有些命令不兼容 安装 mysql-server # 下载并安装 mysql yum wget -i -c ...
- [WPF自定义控件库] 模仿UWP的ProgressRing
1. 为什么需要ProgressRing 虽然我认为这个控件库的控件需要模仿Aero2的外观,但总有例外,其中一个就是ProgressRing.ProgressRing是来自UWP的控件,部分代码参考 ...