基本选择器

首先来说一下，什么是选择器。在一个HTML页面中会有很多很多的元素，不同的元素可能会有不同的样式，

某些元素又需要设置相同的样式，选择器就是用来从HTML页面中查找特定元素的，找到元素之后就可以为

它们设置样式了。 选择器为样式规则指定一个作用范围。

基础选择器包括：

  • 标签选择器
  • 类选择器
  • ID选择器
  • 通用选择器

标签选择器

ID选择器

类选择器

通用选择器

总结：

<!--

        css的选择器：1.基本选择器  2.高级选择器

        1.标签选择器

            标签选择器可以选中所有的标签元素，比如div，ul，li ，p等等

            不管标签藏的多深，都能选中

            选中的是所有的，而不是某一个，所以说 "共性"  而不是 ”特性“

        2.id选择器

            # 选中id

            同一个页面中id不能重复。

            任何的标签都可以设置id

            id命名规范 要以字母 可以有数字 下划线 -  大小写严格区分  aa和AA

        3.类选择器

        1.所谓类 就是class  . class与id非常相似 任何的标签都可以加类

        但是类是可以重复    归类

        2.同一个标签中可以携带多个类 用空格隔开

        类的使用 能够决定前端工程师的css水平到底有多牛逼？

        一定要有”公共类“的概念

        总结：

        1.不要去试图用一个类将我们的页面写完。这个标签要携带多个类，共同设置样式

        2.每个类要尽可能的小，有公共的概念，能够让更多的标签使用

        玩好了类 就等于玩好了css中的1/2

        到底使用id还是用class？

        答案：尽可能的用class。除非一些特殊情况可以用id

        原因：id一般是用在js的。也就是说  js是通过id来获取到标签

     -->

小练习

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>小练习myself</title>

        <style type="text/css">

        /*.lv{*/

            /*color: #4cae4c;font-size: 20px;*/

        /*}*/

        /*.lv2{*/

            /*color: #2aabd2;*/

        /*}*/

        /*.lv3{*/

            /*color: #c7254e;*/

            /*text-decoration: underline;*/

        /*}*/

            /*设置公共的 下面直接调用*/

        .big{

            color: #4cae4c;font-size: 20px;

        }

        .lv{

            color: #2aabd2;

        }

        .line{

            text-decoration: underline;

        }

        </style>

</head>

<body>

    <div>

        <!--<p class="lv">The best revenge is massive success. </p>-->

        <!--<p class="lv2">The best revenge is massive success. </p>-->

        <!--<p class="lv3">The best revenge is massive success. </p>-->

        <!--直接调用上面公共的定义的class接口-->

        <!--2.同一个标签中可以携带多个类 用空格隔开-->

        <p class="lv big">The best revenge is massive success. </p>

        <p class="lv">The best revenge is massive success. </p>

        <p class="lv big line">The best revenge is massive success. </p>

    </div>

    <div></div>

    <div></div>

</body>

</html>

前端-CSS-2-选择器的更多相关文章

  1. 前端 CSS的选择器 基本选择器

    基本选择器包括: 标签选择器 类选择器 ID选择器 通用选择器 标签选择器 就是通过标签名来选择元素: 选中p标签 <!DOCTYPE html> <html lang=" ...

  2. 前端 CSS的选择器 高级选择器

    高级选择器分为: 后代选择器 儿子选择器 并集选择器 交集选择器 后代选择器 使用空格表示后代选择器.父元素的后代(包括儿子,孙子,重孙子) 后代选择器 在CSS中使用非常频繁 因为HTML元素可以嵌 ...

  3. 前端 CSS的选择器 属性选择器

    属性选择器,字面意思就是根据标签中的属性,选中当前的标签. 属性选择器 通常在表单控件中 使用比较多 根据属性查找 /*用于选取带有指定属性的元素.*/ <!DOCTYPE html> & ...

  4. 前端 CSS的选择器 伪类选择器

    伪类选择器 常用的几种伪类选择器. 伪类选择器一般会用在超链接a标签中 没有访问的超链接a标签样式: a:link { color: blue; } <!DOCTYPE html> < ...

  5. 前端 CSS的选择器 伪元素选择器

    介绍常用的伪元素. after用得比较多的 first-letter 用于为文本的第一个首字母设置样式. <!DOCTYPE html> <html lang="en&qu ...

  6. 前端 CSS的选择器 基本选择器 类选择器

    类选择器 符号是.开头 然后类的名字 样式类名不要用数字开头(有的浏览器不认). 所谓类就是class,.class与id非常相似,任何标签都可以加类,但是类可以重复 通过样式类选择元素: 示例: & ...

  7. 前端 CSS的选择器

    什么是选择器.在一个HTML页面中会有很多很多的元素,不同的元素可能会有不同的样式,某些元素又需要设置相同的样式,选择器就是用来从HTML页面中查找特定元素的,找到元素之后就可以为它们设置样式了. 选 ...

  8. 前端 CSS的选择器 伪类选择器 CSS3 nth-child()

    first-child 选中第一个标签 应用CSS样式 <!DOCTYPE html> <html lang="en"> <head> < ...

  9. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性　　定位（position）z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  10. 前端基础：CSS样式选择器

    前端基础:CSS样式选择器 CSS概述 CSS是Cascading Style Sheets的简称,中文意思是:层叠样式表,对html标签的渲染和布局.CSS规则由两个主要的部分组成:1.选择器:2. ...

随机推荐

  1. Kettle入门教程

    最近做的项目用到了ETL工具Kettle,这个工具相当好用,可以将各种类型数据作为数据流,经过处理后再生成各种类型的数据.正如其名“水壶”,将各个地方的水倒进水壶里,再用水壶倒入不同的容器.不过一来初 ...

  2. var_dump() 格式化输出 | 显示不全

    PHP 使用‘var_dump($var)’时 没有格式化输出,显得乱糟糟的.原因是没有启用‘XDebug’扩展 [php.ini] ; XDEBUG Extension zend_extension ...

  3. [CLPR] 定位算法探幽 - 边缘和形态学

    一. 引言 如何从一副图片中找到车牌? 这是机器视觉的一个应用. 理所当然地, 思考的角度是从车牌本身的信息入手, 为了讨论方便, 下面均以长窄型蓝白车牌为例. 下图就是这样一张车牌的基本信息. 一眼 ...

  4. Angular 4 表单校验1

    1.html <form [formGroup]="formModel" (submit)="submit()"> <div> 用户名: ...

  5. kvm 基本运维命令

    Kvm基本命令 一.查询命令 1.列出所有的虚拟机 virsh list –all 2.显示虚拟机信息 virsh dominfo kvm-1 3.显示虚拟机内存和cpu的使用情况 yum insta ...

  6. 如何更改tomcat7及以上版本内存设置

    http://jingyan.baidu.com/article/295430f1c22a940c7e0050fb.html?qq-pf-to=pcqq.c2c 当在tomcat的webapps文件夹 ...

  7. VS2005的depends工具 （分析EXE）

    忙乎了近两个月,程序开始打包供外部调用了,连同其所需的dll文件,这就需要使用VC自带的Depends软件,在VS2005中其路径为:D:\Program Files\Microsoft Visual ...

  8. POSIX 消息队列 之 参数说明

    消息队列 一.函数 mq_open 头文件 mqueue.h: 原型 mqd_t mq_open(const char *name, int oflag, .../*mode_t mode,struc ...

  9. 如何制作Jar包并在android中调用jar包

    android制作jar包: 新建android工程,然后右击,点击导出,选择导出类型为Java下的JAR file,在java file specification 中不要选择androidmani ...

  10. LwIP raw api下使用tcp keep alive

    // The following code is implemented after tcp_new() or in tcp_connected call back... xxx_connected( ...