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四种基本选择器的更多相关文章

  1. css样式表中四种属性选择器

    学习此连接的总结http://developer.51cto.com/art/201009/226158.htmcss样式表中四种属性选择器1> 简易属性 tag[class]{ font-we ...

  2. 前端基础----CSS语法、CSS四种引入方式、CSS选择器、CSS属性操作

    一.CSS语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如: h1 {color:red; font-size:14px;} 二.CSS四种引入方式 1,行内式 行内式是在标 ...

  3. CSS 四种引入样式表优缺点分析

    CSS 四种引入样式表 CSS 有四种方式引入样式表,如下: 外部样式表 内部样式表 行内样式表 导入样式表 外部样式表优缺点 优点 实现了结构与表现的代码完全分离 方便复用及维护 因为分离到各自独立 ...

  4. css四种选择器总结

    css 在网页开发中扮演着重要的角色,被誉为网页开发的三剑客,如果说html是人的外在器官部分,那css无疑是各个器官组成在一起然后表现出来,css又称样式重叠在网页排版布局中的地位举足轻重.   做 ...

  5. CSS 四种样式表 六种规则选择器 五种常用样式属性

    新的html程序要在VS中编写了,在vs中安装ASP.NET和Web开发,并用ASP.NET Web 应用程序(.NETFramework)创建一个网页程序.添加一个html页 后面的代码都是在htm ...

  6. CSS四种定位及应用

    定位(position) 如果,说浮动, 关键在一个 “浮” 字上面, 那么 我们的定位,关键在于一个 “位” 上. PS: 定位是我们CSS算是数一数二难点的了,但是,你务必要学好它,我们CSS离不 ...

  7. CSS的四种基本选择器和四种高级选择器

    做个快乐的搬运工:https://blog.csdn.net/DYD850804/article/details/80997251

  8. css四种定位

    概述:元素定位属性主要包括的模式和边偏移两部分,也就是说以后定位要和边偏移量搭配使用.边偏移加定位定位模式才能构成一个完整的定义方式. 偏移量说明: 边偏移属性 描述 top: 顶端偏移,定义元素相对 ...

  9. Css四种样式

    1. 2 3 4 5 6.

随机推荐

  1. Flask基础(08)-->错误捕获(异常捕获)

    错误捕获(异常捕获) from flask import Flask from flask import abort app = Flask(__name__) @app.route('/demo1' ...

  2. JS 时间格式 相互转化

    1. 时间字符串格式 var dateString1 = '2016-06-15 10:22:00'; var dateString2 = '2016/06/15 10:22:00'; var dat ...

  3. VR应用评测 - Luna

    Luna http://store.steampowered.com/app/605770/Luna/ Steam VR 2017年10月发布 | 开发者:Funomena | 好评率92% 一款制作 ...

  4. JavaScript设计模式——原型模式

    原型模式: 原型模式是指原型实例指向创建对象的种类,并通过拷贝这些原型创建新的对象,是一种用来创建对象的模式,也就是创建一个对象作为另一个对象的prototype属性: prototype警告:学习了 ...

  5. CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？

    CSS 选择符有哪些? 1.id选择器(#id) 2.类选择器(.class) 3.标签选择器(div,h1,p) 4.相邻选择器(h1 + p) 5.子选择器(ul > li) 6.后代选择器 ...

  6. SpringBoot源码分析之---SpringBoot项目启动类SpringApplication浅析

    源码版本说明 本文源码采用版本为SpringBoot 2.1.0BUILD,对应的SpringFramework 5.1.0.RC1 注意:本文只是从整体上梳理流程,不做具体深入分析 SpringBo ...

  7. .Net下MoongoDB的简单调用

    1.安装.Net 驱动:Install-Package MongoDB.Driver 2.数据插入 //新建Person测试类 public class Person { public long Id ...

  8. 面试官，不要再问我“Java GC垃圾回收机制”了

    Java GC垃圾回收几乎是面试必问的JVM问题之一,本篇文章带领大家了解Java GC的底层原理,图文并茂,突破学习及面试瓶颈. 楔子-JVM内存结构补充 在上篇<JVM之内存结构详解> ...

  9. Django-admin站点管理的详细使用

    使用Django的管理模块,需要按照如下步骤操作: 管理界面本地化 创建管理员 注册模型类 自定义管理页面 1 管理界面本地化 在settings.py中设置语言和时区 LANGUAGE_CODE = ...

  10. StringBuffer的一些小整理

    大家好,欢迎大家在百忙当中来到我的博客文,也许是因为各种需要到此一游,哈哈.不过来到这里不会让您失望的,此段博文是这段时间不忙的时候整理出来的,对于刚学java基础的同学非常适合.下面言归正传: 首先 ...