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. Windows 记事本的 ANSI、Unicode、UTF-8 这三种编码模式有什么区别？

    [梁海的回答(99票)]: 简答.一些细节暂无精力查证,如果说错了还请指出. 一句话建议:涉及兼容性考量时,不要用记事本,用专业的文本编辑器保存为不带 BOM 的UTF-8. * * * 如果是为了跨 ...

  2. Tomcat设计模式

    omcat 系统架构与设计模式,第 2 部分 设计模式分析 系列内容: 此内容是该系列 2 部分中的第 2 部分: Tomcat 系统架构与设计模式 门面设计模式 门面设计模式在 Tomcat 中有多 ...

  3. Web_0001：关于阿里云防盗链Referer，CDN加速，OSS自定义域名的操作

    1,防盗链Referer 防止非法域名访问 OSS 数据,设置白名单: 允许为空 : 表示当从浏览器直接打开OSS资源时有效. 示例说明: 我在www.sojson.com里有一个www.baidu. ...

  4. mpvue体验微信小程序开发

    微信小程序 https://developers.weixin.qq.com/miniprogram/introduction/index.html?t=18082114 微信小程序是一种全新的连接用 ...

  5. 使用js代码将html导出为Excel

    js代码将html导出为Excel的方法: 直接上源码: <script type="text/javascript" language="javascript&q ...

  6. 实现线程安全先进先出的dict

    # encoding:utf-8 from collections import OrderedDictfrom collections import MutableMappingfrom threa ...

  7. Contest2161 - 2019-3-21 高一noip基础知识点 测试4 题解版

    传送门 预计得分:100+100+100+10=310 实际得分:100+0+82+10=192 你们基础知识不行啊——by wxg T1 一看数据范围就是搜索 但是不能因为数据范围就断送了dp的心 ...

  8. vscode 正则表达式替换

    比如把1.aa2.bbb替换成 1.aa2.bbb则,查找\d+ 替换成 \n$0 $0为查找的正则匹配项editplus为\0

  9. 第29月第21天 ios android curl

    1.curl https://github.com/gcesarmza/curl-android-ios/ 2.json https://github.com/danielmapar/cpp-scra ...

  10. 002_soa_zk处理经验总结

    一. 遇到这种情况直接把当前目录下的acceptedEpoch和currentEpoch挪走,重启publisher即可. cat /data/zookeeper/data/version-2/acc ...