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中的this关键字

    ---恢复内容开始--- this是JavaScript中的关键字之一,在编写程序的时候经常会用到,正确的理解和使用关键字this尤为重要.接下来,笔者就从作用域的角度粗谈下自己对this关键字的理解 ...

  2. HTTP和RFC

    RFC: Request For Comments(RFC),是一系列以编号排定的文件.文件收集了有关互联网相关信息,以及UNIX和互联网社区的软件文件.目前RFC文件是由Internet Socie ...

  3. 神经网络6_CNN(卷积神经网络)、RNN(循环神经网络)、DNN(深度神经网络)概念区分理解

    sklearn实战-乳腺癌细胞数据挖掘(博客主亲自录制视频教程,QQ:231469242) https://study.163.com/course/introduction.htm?courseId ...

  4. cacti报警邮件的设置

    众所周知,用Linux系统自带的sendmail发送邮件是有限制的,可能对有些邮箱无法正常发送,导致报警邮件不能够及时发送到,因此就可能会产生不必要的麻烦!对此,我们可以用其他方法来发送邮件,就是在c ...

  5. pymysql常见问题

    1.Python中pymysql出现乱码的解决方法 一般来说,在使用mysql最麻烦的问题在于乱码. 查看mysql的编码: show variables like 'character_set_%' ...

  6. .net实现md5加密 sha1加密 sha256加密 sha384加密 sha512加密 des加密解密

    写项目时,后台一直用md5加密,一天群里人问,除了MD5还有其它的加密方法吗?当时只知道还有个SHA,但怎么实现什么的都不清楚,于是当网上找了下,把几种常见的加密方法都整理了下,用winform写了个 ...

  7. 第29月第14天 evpp

    1.evpp https://github.com/Qihoo360/evpp/tree/master/examples/recipes/self_control_timer https://blog ...

  8. Xpath初了解

    如下一段html: <html> <body> <form id="loginForm"> <input name="usern ...

  9. k64 datasheet学习笔记26--Oscillator (OSC)

    1.前言 OSC模块是一个晶体振荡器. 该模块使用晶体或谐振器与外部连接,为MCU产生一个参考时钟. 主要为下图红色框住的部分 2.特性和模式 Supports 32 kHz crystals (Lo ...

  10. 关于linux中的 秘钥认证 ，最清晰解读

    所谓"公钥登录",原理很简单,就是用户将自己的公钥储存在远程主机上.登录的时候,远程主机会向用户发送一段随机字符串,用户用自己的私钥加密后,再发回来.远程主机用事先储存的公钥进行解 ...