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. Python 文件行数读取的三种方法

    Python三种文件行数读取的方法: #文件比较小 count = len(open(r"d:\lines_test.txt",'rU').readlines()) print c ...

  2. Vim使用技巧：特定文件类型关联缩进

    Vim如何打开特定文件类型关联自动缩进呢?答案:将filetype indent on写入你的.vimrc文件中

  3. [物理学与PDEs]第2章第4节 激波 4.1 间断连接条件

    1.  守恒律方程 $$\bex \cfrac{\p f}{\p t}+\cfrac{\p q}{\p x}=0 \eex$$ 在间断线上应满足 ``间断连接条件'': $$\bex [f]\cfra ...

  4. win10安装VMware v14.1.1.28517

    一.下载 VMware v14.1.1.28517 下载地址(包含安装说明):http://www.downza.cn/soft/74728.html 二.VMware Workstation 14 ...

  5. How to avoid the 0-byte file on Webclient download error

    _client.DownloadDataAsync(new Uri(url)); _client.DownloadDataCompleted += (sender, e) => { try { ...

  6. day 14 - 2 生成器练习

    相关练习 1.处理文件,用户指定要查找的文件和内容,将文件中包含要查找内容的每一行都输出到屏幕 #比较 low 的方法 def check_file(filename,aim): with open( ...

  7. Prisma GraphQL 服务器 生产者 "https://www.prisma.io"

    Prisma   一个 GraphQL  服务器 生产者     "https://www.prisma.io" , 关注一下

  8. 【easy】367. Valid Perfect Square 判断是不是平方数

    class Solution { public: bool isPerfectSquare(int num) { /* //方法一:蜜汁超时…… if (num < 0) return fals ...

  9. SQL Server Change Tracking

    1 概述 “更改跟踪”和“变更数据捕获”捕获和记录用户表的DML更改(插入.更新和删除操作),为某些有特殊需求的应用程序服务. 1.1 更改跟踪 更改跟踪捕获表的数据行更改这一行为,但不会捕获更改的具 ...

  10. WPF中触发器Trigger、MultiTrigger、DataTrigger、MultiDataTrigger、EventTrigger几种

    WPF中有种叫做触发器的东西(记住不是数据库的trigger哦).它的主要作用是根据trigger的不同条件来自动更改外观属性,或者执行动画等操作. WPFtrigger的主要类型有:Trigger. ...