css选择器

什么是选择器？

　　选择器是你构造好网页的结构，需要给这些结构赋予样式，这时候就需要用到选择器，利用选择器将元素与样式一一对应；两者的对应关系可以是一对一，一对多，多对一。

选择器的分类：

　　这里我只展示几种比较常见的类型，

　　1. 标签选择器

　　　　给同一种标签添加样式，例如：

　　　　标签名{

　　　　　　属性名:属性值；

　　　　}

        <style type="text/css">

            p{

                color: turquoise;

            }

            div{

                width: 50px;

                height: 50px;

                background-color: #CCCCCC;

            }

        </style>

    </head>

    <body>

        <p>段落1</p>

        <div>文本1</div>

        <p>段落2</p>

        <div>文本2</div>

        <p>段落3</p>

    </body>

效果图如下：

　　2. 通用选择器(通配符)

　　　　给所有的标签添加样式。

　　　　*{

　　　　　　属性名:属性值；

　　　　}

　　　　注意：通用选择器是先遍历网页中的所有标签，然后再给这些标签添加样式，因此这个选择器的性能十分的低，不推荐使用，一般只会在测试的时候，用于css的初始化。

　　3. 类选择器(class)

　　　　 给同一个类(同一个群体)的标签添加样式，前提是这些标签的类名是一样的。

　　　　.类名{

　　　　　　属性名:属性值；

　　　　}

        <style type="text/css">

            .aa{

                color: red;

            }

        </style>

    </head>

    <body>

        <p class="aa">段落1</p>

        <div class="aa">文本1</div>

        <p>段落2</p>

        <div>文本2</div>

        <p class="aa">段落3</p>

    </body>

效果图如下：

　　　　值得注意的是:一个类名可以给多个标签，一个标签也可以拥有多个类名，多个类名之间用空格( )隔开。

　　4. ID选择器

　　　　给ID名相同的标签添加样式

　　　　#ID名{

　　　　　　属性名:属性值；

　　　　}

　　　　关于id，在写代码的时候尽量少用id，因为id占两个字符，而class只占一个字符。

　　　　注意：一个标签最好只用一个ID名，一个ID只能给一个标签。

　　5. 后代选择器

　　　　选择的是某一个元素的后代元素，父级与子级之间用空格( )隔开

　　　　父级 子级{

　　　　　　属性名:属性值；

　　　　}

        <style type="text/css">

            .ab p{

                color: red;

            }

        </style>

    </head>

    <body>

        <p class="aa">段落1</p>

        <div class="ab">

            <p>段落2</p>

            <div>文本2</div>

            <p class="aa">段落3</p>

        </div>

    </body>

效果图如下：

　　6. 子代选择器

　　　　选择的是某一个元素的直接后代元素，父级与子级之间用">"隔开

　　　　父级>子级{

　　　　　　属性名:属性值；

　　　　}

        <style type="text/css">

            .ab>div{

                color: red;

            }

            .ab>p{

                color: blue;

            }

        </style>

    </head>

    <body>

        <p class="aa">段落1</p>

        <div class="ab">

            <p>段落2</p>

            <div>文本2</div>

            <p class="aa">段落3</p>

        </div>

    </body>

效果图如下：

　　7. 相邻兄弟选择器

　　　　选择的是紧挨着该元素后面的一个元素。

　　　　元素名+兄弟名{

　　　　　　属性名:属性值；

　　　　}

        <style type="text/css">

            .aa+div{

                color: red;

            }

            .aa~span{

                color: blue;

            }

        </style>

    </head>

    <body>

        <p class="aa">段落1</p>

        <div class="bb">文本1</div>

        <span>段落2</span>

        <div>文本2</div>

        <span class="cc">段落3</span>

    </body>

　　8. 通用兄弟选择器

　　　　选择的是该元素后面的所有的某一类兄弟。

　　　　元素名~兄弟名{

　　　　　　属性名:属性值；

　　　　}

        <style type="text/css">

            .aa+div{

                color: red;

            }

            .aa~span{

                color: blue;

            }

        </style>

    </head>

    <body>

        <p class="aa">段落1</p>

        <div class="bb">文本1</div>

        <span>段落2</span>

        <div>文本2</div>

        <span class="cc">段落3</span>

    </body>

　　相邻兄弟选择器与通用兄弟选择器的效果图如下：

CSS入门介绍（二）CSS选择器的更多相关文章

  1. H5教程（二），CSS入门（一）选择器

    这是我的第二篇博客,H5教程CSS入门,适合刚开始学习H5的新手,让我们共同进步. 1.  CSS简介 1.1  CSS是什么? CSS称为样式层叠表,是用于增强或控制网页样式,并允许将样式信息与网页 ...

  2. CSS入门介绍

    一.背景 这里将陆续介绍前端CSS中相关知识,先介绍CSS2.1,后续会介绍CSS3的相关属性,通过该系列的文章,希望能给准备转战前端的人员一些帮助,同时也帮助自己梳理知识,文章中如有错误,欢迎指出. ...

  3. html和css入门 （二）

    CSS基础 什么是CSS 简单来说,层叠样式表(Cascading Style Sheet)是一种专门用来控制界面外观风格的文档. CSS发展历史 1996年 CSS 1.0 规范面世,其中加入了字体 ...

  4. JavaScript入门介绍(二)

    JavaScript入门介绍 [函数] 函数function 是Javascript的基础模块单元,用于代码的复用.信息影藏和组合调用. function a(){} 函数对象Function Lit ...

  5. mybatis入门介绍二

    相信看过我的上一篇博客的同学都已经对mybatis有一个初步的认识了.这篇博客主要是对mybatis的mapper代理做一下简单的介绍,希望能够帮助大家共同学习. 我的上一篇博客:mybatis入门介 ...

  6. CSS入门介绍（一）

    css 层叠样式表(英文名:Cascading Style Sheets),主要用于美化网页 1.css的表现形式 1.1 行内样式(内嵌样式) 写在标签内的样式,写在标签的开始部分的内部,style ...

  7. HTML与CSS入门——第二章 发布Web内容

    知识点: 1.使用文本编辑器创建一个基本的HTML文件的方法 2.使用FTP将文件传送到你的Web服务器的方法 3.文件在Web服务器上应该存储的位置 4.在没有Web服务器的情况下分发Web内容的方 ...

  8. CSS基础语法(二) CSS的9种选择器

    样式表的选择器 1.类选择器 根据HTML标签的class属性选择样式应用的属性 .类值{ … } 2.ID选择器 根据HTML标签的ID属性选择样式应用的元素 #id值{ … }  3.标签选择器 ...

  9. web前端知识大纲：系列二 css篇

    web前端庞大而复杂的知识体系的组成:html.css和 javascript 二.css 1.CSS选择器 CSS选择器即通过某种规则来匹配相应的标签,并为其设置CSS样式,常用的有类选择器.标签选 ...

随机推荐

  1. Docker：容器的四种网络类型 [十三]

    一.None类型 简介:不为容器配置任何网络功能,--net=none 1.创建容器 docker run -it --network none busubox:latest 2.功能测试 [root ...

  2. IaaS，PaaS，SaaS 的区别(转)

    越来越多的软件,开始采用云服务. 云服务只是一个统称,可以分成三大类. IaaS:基础设施服务,Infrastructure-as-a-service PaaS:平台服务,Platform-as-a- ...

  3. NOI-OJ 1.7 ID:21 单词替换

    整体思路 本题如果使用scanf每次读入一个单词.比对替换后再进行输出的话就十分简单,使用这种方法必须要用数组把读入的所有单词存起来,读入的count个单词的前n-2个是原文,第n-1个是查找的单词, ...

  4. 第九节：从源码的角度分析MVC中的一些特性及其用法

    一. 前世今生 乍眼一看,该标题写的有点煽情,最近也是在不断反思,怎么能把博客写好,让人能读下去,通俗易懂,深入浅出. 接下来几个章节都是围绕框架本身提供特性展开,有MVC程序集提供的,也有其它程序集 ...

  5. 第四节：框架前期准备篇之进程外Session的两种配置方式

    一. 基本介绍 1. 背景:Asp.Net默认的Session机制是进程内,存储在服务器端内存中,有这么几个缺点: ①:既然存在内存中,空间有限,不能存储大数据量信息,数据量多的话Session会被挤 ...

  6. 同步Name到Comment 及 同步 Comment 到Name

    在 PowerDesigner执行命令  Tools->Execute Commands->Edit/Run Scripts 代码一:将Name中的字符COPY至Comment中 Opti ...

  7. Java8从对象列表中取出某个属性的列表

    List<属性值类型> 属性List = 对象List.stream().map(对象::get方法()).collect(Collectors.toList()); 例如: List&l ...

  8. cpp智能指针

    weak_ptr<Cls1> wp1; { shared_ptr<Cls1> ptr1(new Cls1);//共享指针 wp1 = ptr1;//临时共享指针 std::co ...

  9. laravel5.4 导出 Excel 表格

    1.执行 composer require maatwebsite/excel 2. composer.json 文件出现(或者手动添加) 3.在config目录下 app.php 添加参数 4.导出 ...

  10. mac上安装webpack报错解决方法Hit error EACCES: permission denied, mkdir '/usr/local/lib/node_modules/webpack

    node-pre-gyp WARN Using needle for node-pre-gyp https download node-pre-gyp WARN Pre-built binaries ...