基本选择器

首先来说一下，什么是选择器。在一个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. PHP 的工作流组件记录

    我目前只知道在有审批流程中会用到工作流. 不过我我还没用过,还不知道怎么使用. 暂且先记录一下,目前我找到的几个 PHP 工作流组件. symfony https://github.com/symfo ...

  2. 特殊字符搜索网站 http://symbolhound.com/

    最近在学习makefile,想搜索一下 $@是啥意思,结果google由于忽略了特殊字符,结果啥也没找到, 后来在stackoverflow上看到了别人同样的问题 http://stackoverfl ...

  3. nginx信号量

    nginx信号说明相关说明 信号名称 作用 TERM,INT 快速关闭 QUIT 从容关闭 HUP 重新加载配置,用新的配置开始新的工作进程,从容关闭旧的工作进程 USR1 重新打开日志文件 USR2 ...

  4. 【python】实例-用户登录系统

    有N,E,Q三个选择,若选择Q或者中断,则系统退出.若其他选项,则持续让用户选择. #!/usr/bin/env python db = {} def newuser(): prompt = 'log ...

  5. [记录]js跨域调用mvc ActionResult扩展

    背景 最近2个项目中都用到了js跨域访问的知识,2个项目都需要主站与各个分站之间进行数据交互.状态同步等相关操作.浏览器本身是不允许进行跨域访问,在MVC中我们可以扩展一个方法来实现这个功能.在此大家 ...

  6. 【Spring学习笔记-MVC-6】SpringMVC 之@RequestBody 接收Json数组对象

    作者:ssslinppp       1. 摘要 程序流程: 前台使用ajax技术,传递json字符串到后台: 后台使用Spring MVC注解@RequestBody 接受前台传递的json字符串, ...

  7. bzoj1825: [JSOI2010]蔬菜庆典

    Description Input Output 对于每组数据,输出一行.若蔬菜的总价能无限制增大,输出"+inf"(不含引号).否则输出一个整数,表示所有蔬菜的最大总价.   首 ...

  8. [转]NSIS：使用SectionSetFlags根据不同环境自动勾选特定区段

    转自: http://www.flighty.cn/html/bushu/20140526_232.html   在微软SQL2000+SP4集成安装版安装包中可以根据目标操作系统自动勾选对应的版本, ...

  9. JAVA URI URL 区别

    String urlString = "http://192.168.21.77:8080/swp/mainPage?aa=11&bb%3D22"; URI uri = U ...

  10. Ubuntu12.10下Vsftpd的安装

    安装Vsftpd sudo apt-get install vsftpd 配置 sudo vim /etc/vsftpd.conf 取消以下两行前面的注释 local_enable=YES write ...