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.
随机推荐
- Spring boot 官网学习笔记 - Spring DevTools 介绍
想要使用devtools支持,只需使用dependencies将模块依赖关系添加到你的构建中 运行打包的应用程序时,开发人员工具会自动禁用.如果你通过 java -jar或者其他特殊的类加载器进行启动 ...
- Maven 梳理 -目录结构
Maven项目的目录约定 MavenProjectRoot(项目根目录) |----src | |----main | | |----java ——存放项目的.java文件 | | |----reso ...
- Spring 梳理-webApplicationContext 与servletContext
1.WebApplicationContext的研究 ApplicationContext是spring的核心,Context通常解释为上下文环境,用“容器”来表述更容易理解一些,Applicatio ...
- springboot 2.1.3 + mybatis + druid配置多数据源
在一些大型的项目中,通常会选择多数据库来满足一些业务需求,此处讲解使用springboot.mybatis和druid来配置多数据源 1.依赖配置 pom文件引入相关依赖 <dependency ...
- Java 爬虫遇上数据异步加载，试试这两种办法！
这是 Java 爬虫系列博文的第三篇,在上一篇 Java 爬虫遇到需要登录的网站,该怎么办? 中,我们简单的讲解了爬虫时遇到登录问题的解决办法,在这篇文章中我们一起来聊一聊爬虫时遇到数据异步加载的问题 ...
- 什么是回流(重排 reflow)？什么是重绘(repaint)？如何减少回流、重绘？
什么是回流(重排 reflow)? 回流(重排 reflow):对DOM树进行渲染,只要修改DOM或修改元素的形状大小,就会触发reflow,reflow的时候,浏览器会使已渲染好受到影响的部分失效, ...
- Java8 Period.between方法坑及注意事项
在使用Java8 新特性中关于Period.between的方法时需注意该方法获取日期的区间问题. @Test public void test1(){ LocalDate from = LocalD ...
- Vue核心知识——computed和watch的细节全面分析
computed和watch的区别 computed特性 1.是计算值,2.应用:就是简化tempalte里面{{}}计算和处理props或$emit的传值,computed(数据联动).3.具有缓存 ...
- python+selenium自动化框架
---恢复内容开始--- 主要使用的模块: selenium/webdriver模块(须准备Chrome驱动),主要用于调用浏览器实现自动点击. unittest模块,主要用于整合测试用例. xlrd ...
- 从零学习基于Python的RobotFramework自动化
从零学习基于Python的RobotFramework自动化 一. Python基础 1) 版本差异 版本 编码 语法 其他 2.X ASCII try: raise Type ...