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.
随机推荐
- Dubbo学习系列之十三(Mycat数据库代理)
软件界有只猫,不用我说,各位看官肯定知道是哪只,那就是大名鼎鼎的Tomcat,现在又来了一只猫,据说是位东方萌妹子,暂且认作Tom猫的表妹,本来叫OpencloudDB,后又改名为Mycat,或许Ca ...
- layer.open打开一个新的jsp页面,如何关闭并刷新父页面问题
layer.open打开一个新的jsp页面弹框,如何关闭呢? 在新的页面提交完毕之后,关闭并刷新父页面列表. layer.closeAll(); parent.layer.closeAll(); wi ...
- vue-cli 脚手架安装
1.安装node;选择适合自己系统的文件,下载一路next , a安装成功后,打开运行输入cmd 进入命令行: 在命令行工具中输入 npm -v 检查版本号 如果出现 则安装成功:(npm为node ...
- redis 漏洞造成服务器被入侵-CPU飙升
前言 前几天在自己服务器上搭了redis,准备想着大展身手一番,昨天使用redis-cli命令的时候,10s后,显示进程已杀死.然后又试了几次,都是一样的结果,10s时间,进程被杀死.这个时候我还 ...
- [Note] Visual Studio Team Service 中的项目 转到 Git
Git-tf是微软发布的一个Git工具集的补充,用来让开发人员使用git命令与TFS交互,当然现在VSTS已经直接支持git了,现在讲讲以前用了VSTS的老项目如何转到git,保留所有的change ...
- Apache Kylin 概述
1 Kylin是什么 今天,随着移动互联网.物联网.AI等技术的快速兴起,数据成为了所有这些技术背后最重要,也是最有价值的"资产".如何从数据中获得有价值的信息?这个问题驱动了相关 ...
- JDK-基于Windows环境搭建
JDK安装: 毋庸置疑你要跑java程序,肯定少不了JDK,如jemter还有还有~ 下载jdk地址1:https://pan.baidu.com/s/1FIvGNvZSy0EpCBxHCz07nA ...
- KafkStream架构
Kafka Stream 的整体架构图如下. 目前KafkaStream的数据源智能是如上图所示的Kafka,但是处理结果并不一定是如上图所示的输出到Kafka,实际上KStream和Ktable的实 ...
- Jquery的load加载本地文件出现跨域错误的解决方案
如果用原生的AJAX是加载本地文件就不会出现错误.当然,这个jquery的load放在服务器上通过http加载还是支持的.也有例外比如在firefox和ie浏览器使用$.ajax加载本地html或tx ...
- 【网络安全】CSRF攻击详解
目录 什么是CSRF攻击 CSRF攻击的流程 常见的CSRF攻击类型 CSRF漏洞测试 预防CSRF攻击 参考 什么是CSRF攻击 CSRF(Cross-Site Request Forgery)的全 ...