基本选择器

首先来说一下，什么是选择器。在一个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. nuclio dokcer 运行测试

    nuclio serverless 平台,可以方便的进行实时事件以及数据处理应用的开发 dcoker 运行 启动 docker run -d -p 8070:8070 -v /var/run/dock ...

  2. JSP指令include和JSP动作元素include的区别

    include指令用于在JSP页面静态的包含一个文件,该文件可以是JSP页面.HTML页面.文本文件或者一段java代码.使用include指令的JSP页面在转换时,JSP容器会在其中插入所包含文件的 ...

  3. task optimization

    Requirements: Tasks have Dependencies Running the task in Multi thread Links http://en.wikipedia.org ...

  4. postman的Testing examples（测试脚本示例）

    测试代码会在发送request并且接收到responses后执行. 1.设置环境变量 postman.setEnvironmentVariable("key", "val ...

  5. POJ2411骨牌覆盖——状压dp

    题目:http://poj.org/problem?id=2411 状压dp.注意一下代码中标记的地方. #include<iostream> #include<cstdio> ...

  6. Microsoft Dynamics CRM 2011 批量添加域用户 然后添加CRM用户

    一.先了解下 DSADD user命令详解 常见的批量创建用户的方法有四种: 一. 帐户模板的方式 二. CSVDE和LDIFDE 三. 脚本的方式 四. DSADD 但是很少有详细的资料使用DSAD ...

  7. 大快DKH大数据智能分析平台监控参数说明

    2018年国内大数据公司50强榜单排名已经公布了出来,大快以黑马之姿闯入50强,并摘得多项桂冠.Hanlp自然语言处理技术也荣膺了“2018中国数据星技术”奖.对这份榜单感兴趣的可以找一下看看.本篇承 ...

  8. centOS 6.5关闭防火墙步骤

    centOS 6.5关闭防火墙步骤 关闭命令:  service iptables stop         永久关闭防火墙:chkconfig iptables off 两个命令同时运行,运行完成后 ...

  9. yum下载文件的存放位置

    yum下载文件的存放位置    默认是: /var/cache/yum 也可以在 /etc/yum.conf 指定 cachedir=/var/cache/yum #存放目录keepcache=1 # ...

  10. Centos 配置ifconfig命令

    刚装完CentOS 后ifconfig命令可能是不可用的,那么需要以下配置 ip addr vi /etc/sysconfig/network-scripts/ifcfg-xx (ONBOOT=yes ...