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. tomcat配置目录及安装说明

    1.升级jdk版本 java -version 查看当前java版本 上传最新版jdk tar xf jdk-8u191-linux-x64.tar.gz 解压jdk到当前下 mv jdk1.8.0_ ...

  2. C#刷遍Leetcode面试题系列连载（1） - 入门与工具简介

    目录 为什么要刷LeetCode 刷LeetCode有哪些好处? LeetCode vs 传统的 OJ LeetCode刷题时的心态建设 C#如何刷遍LeetCode 选项1: VS本地Debug + ...

  3. mysql 遍历方式

    mysql遍历方式可以使用while,loop和repeat来实现,示例如下: BEGIN ; # WHILE DO ; END WHILE; # SELECT i; # LOOP optLoop:L ...

  4. idea必备快捷键

    ctrl + F: 在当前文件进行文本查找 ctrl + R: 在当前文件进行文本的替换 ctrl + Z: 撤销操作 ctrl + Y:删除光所在的行 或者选中的行 ctrl + D: 复制光标所在 ...

  5. python selenium模拟登陆qq空间

    不多说.直接上代码 from selenium import webdriver driver = webdriver.Chrome() driver.get('http://qzone.qq.com ...

  6. jetbrains全系列可用2018

    转自 https://blog.csdn.net/u014044812/article/details/78727496 仅记录前两种方法 1.授权服务器激活 优点:方便快捷 缺点:激活的人数多了就容 ...

  7. Spring Boot 2.x 基础案例：整合Dubbo 2.7.3+Nacos1.1.3（最新版）

    1.概述 本文将介绍如何基于Spring Boot 2.x的版本,通过Nacos作为配置与注册中心,实现Dubbo服务的注册与消费. 整合组件的版本说明: Spring Boot 2.1.9 Dubb ...

  8. 新建springmvc配置文件

    新建spring或springmvc的配置文件时,需要先加入spring-bean-4.3.18.RELEASE.jar包,当然可以是其他版本,这样就可以在资源目录下,比如resources(Reso ...

  9. OpenGL全流程详细解读

    导语 对于开发者来说,学习OpenGL或者其他图形API都不是一件容易的事情.即使是一些对OpenGL有一些经验的开发者,往往也未必对OpenGL有完整.全面的理解.市面上的OpenGL文章往往零碎不 ...

  10. drf框架中jwt认证,以及自定义jwt认证

    0909自我总结 drf框架中jwt 一.模块的安装 官方:http://getblimp.github.io/django-rest-framework-jwt/ 他是个第三方的开源项目 安装:pi ...