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. 网页三剑客之JS

    1.javascrapt介绍 js概述 JavaScript是运行在浏览器端的脚步语言,JavaScript主要解决的是前端与用户交互的问题,包括使用交互与数据交互. JavaScript是浏览器解释 ...

  2. Centos 7 最小化kvm部署

    1.检查CPU是否支持虚拟化 sh-4.2# grep -E '(vmx|svm)' /proc/cpuinfo # 若是无任何显示,则表示CPU不支持kvm虚拟化 2.关闭selinux sh-4. ...

  3. mysql My SQL获取某个表的列名

    My SQL获取某个表的列名 DESC TableName SHOW COLUMNS FROM TableName SELECT COLUMN_NAME  FROM information_schem ...

  4. 【转载】c++指针的指针和指针的引用

    https://www.cnblogs.com/li-peng/p/4116349.html

  5. 算法第四版Question

    1.ECLIPES标准输入流 ①Run As-->Run Configurations-->Commom-->Input File在Input File里面输入要读取的文本文件 这对 ...

  6. JQuery对象关系图

    上图转自:http://www.cnblogs.com/haogj/archive/2010/04/19/1715762.html 自定义函数示例: $.fn.jAccordionunfold = f ...

  7. C#使用ServiceStack读写Redis

    通过C#第三方库向Redis存储数据遇到的几个问题 https://github.com/ServiceStack/ServiceStack.Redis 1.将对象转json字符串 JsonObjec ...

  8. django上下文处理器的基本使用

    1.定义一个方法 2.在django里面的settings.py里面修改配置文件 3.最后在模板里面调用 操做步骤如下: 这是在settings.py里面配置的文件   在模板里面调用上下文处理器

  9. Faster R-CNN: Towards Real-Time Object Detection with Region Proposal Networks（理解）

    0 - 背景 R-CNN中检测步骤分成很多步骤,fast-RCNN便基于此进行改进,将region proposals的特征提取融合成共享卷积层问题,但是,fast-RCNN仍然采用了selectiv ...

  10. python 三大框架之一Django入门

    Django 是从真实世界的应用中成长起来的,它是由 堪萨斯(Kansas)州 Lawrence 城中的一个 网络开发小组编写的. 它诞生于 2003 年秋天,那时 Lawrence Journal- ...