基本选择器

首先来说一下，什么是选择器。在一个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. 使用C＃和MSMQ开发消息处理程序

    简介 MSMQ(微软消息队列)是Windows操作系统中消息应用程序的基础,是用于创建分布式.松散连接的消息通讯应用程序的开发工具.消息队列和电子邮件有着很多相似处,他们都包含多个属性,用于保存消息, ...

  2. python安装途中遇到的问题和解决方法

    一.setuptools安装错误:RuntimeError: Compression requires the (missing) zlib module 1. 描述 搞了个腾讯云的服务器,闲在手上没 ...

  3. maven 指定 jdk 版本

    方法1:直接修改 本地  settings.xml 文件 <profiles>  </profiles> 之间加入 下面的 <profile> <id> ...

  4. POJ3254Corn Fields——状态压缩dp

    题目:http://poj.org/problem?id=3254 1.枚举行: 2.把有影响的“放不放牛”加入参数中,用二进制数表示该位置放不放牛,再用十进制数表示二进制数: 3.优美的预处理lis ...

  5. golang fmt用法举例

    下标与参数的对应 例子如下: package main import ( "fmt" ) func main() { num := 10 fmt.Printf("num: ...

  6. win xp firefox,chrome 在浏览网页时字体发虚，可以设置为新宋体

    firefox,chrome 在浏览网页时字体发虚,比如:驱动之家.可以设置为新宋体.

  7. QCheckBox控件

    一个QCheckBox会有2种状态:选中和为选中.它由一个选择框和一个label组成,常常用来表示应用的某些特性是启用或不启用. 在下面的例子中,我们创建了一个选择框,它的状态变化会引起窗口标题的变化 ...

  8. 学习笔记之Cloud computing

    Cloud computing - Wikipedia https://en.wikipedia.org/wiki/Cloud_computing

  9. chronyd时间服务器同步时间配置

    chrony是两个用来维持计算机系统时钟准确性的程序,这两个程序命名为chronyd和chronyc. chronyd是一个在系统后台运行的守护进程.他根据网络上其他时间服务器时间来测量本机时间的偏移 ...

  10. Mysql 於lampp xampp LinuxUbuntu下的配置

    默认执行Lampp/Xampp 於Ubuntu下完成后,需要对mysql进行一系列的配置,方可进行更好的操作 lampp下的mysql配置文件路径: /opt/lampp/etc/my.cnf 1 配 ...