4.  元素选择器详解

4.1  元素选择器

4.2  选择器分组

　　用英文逗号","相连，使用相同的样式表

　　使用通配符对所有元素进行通用设定。

4.3  类选择器详解

　　4.3.1.  类选择器允许以一种独立于文档元素的方式来指定样式

　　　　.class{}

　　4.3.2.  结合元素选择器

　　　　a.class{}　　(只指定a标签内的class类)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>选择器</title>

    <style>

        a.div{

            color:red;

        }

        /*只改变a标签下类为div的元素样式*/

    </style>

</head>

<body>

<div class="div">

    hello world!

</div>

<a href="#" class="div">

    hello world!

</a>

</body>

</html>

　　4.3.3  多类选择器

　　　　.class.class{}　　(设置两个类的共同的独有的特性)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .p1{

            color:blue;

        }

        .p2{

            font-size:30px;

        }

        .p1.p2{

            font-style:italic;

        }

    </style>

</head>

<body>

    <p class="p1">

        p1p1p1p1p1p1p1

    </p>

    <p class="p2">

        p2p2p22p2p2p2p2

    </p>

    <p class="p1 p2">

        p3p3p33p3p33p3p

    </p>

</body>

</html>

4.4  id选择器详解

　　4.4.1.  ID选择器类似于类选择器，不过也有一些重要差别

　　　　例如：#id{}

　　4.4.2.  ID只能在文档中使用一次，而类可以多次使用

　　           ID选择器不能结合使用

　　　　　当使用js的时候，需要使用到id

　　

4.5  属性选择器详解

　　4.5.1  简单属性选择

　　　　　　[title]{}

　　4.5.2  根据具体属性进行选择

　　4.5.3  属性和属性值必须完全匹配

　　4.5.4  根据部分属性值选择

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        [title]{

            color:aqua;

        }

        /*title不指定具体的值就是默认

        让所有的title元素都是用这个样式表

        */

        [href="http://www.baidu.com"]{

            font-size: 30px;

        }

        [title~="hello"]{

            font-size: 50px;

        }

        /*~=符号是用来进行模糊选择的，只要类名中有提供的字眼就可以。*/

    </style>

</head>

<body>

    <p title="hello">

        hello;

    </p>

    <p title="hel">

        hello;

    </p>

    <p title="world hello">

        hello;

    </p>

    <p title="hello">

        hello;

    </p>

    <a href="http://www.baidu.com">百度</a>

</body>

</html>

4.6  后代选择器

　　后代选择器可以选择作为某元素后代的元素

　　在4.7中查看代码

4.7  子元素选择器

　　与后代选择器相比，子元素选择器只能选择作为某元素子元素的元素。

　　后代选择器不能隔代选择元素，只能一代挨着一代选择

　　　　例如：h1>strong{}

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>选择器</title>

    <style>

        p strong{

            color:red;

        }

        p strong i{

            color:aqua;

        }

        /*后代选择器可以隔代选择元素*/

        p>b{

            color: deepskyblue;

        }

        /*

        p>strong>b{

            color: deepskyblue;

        }

        子元素选择器必须这样写才可以实现效果

        子元素选择器不能隔代选择元素

        */

    </style>

</head>

<body>

<p><strong>

    p strong后代选择器；

</strong></p>

<p>

    <strong>

        <i>

            p，strong，i后代选择器；

        </i>

    </strong>

</p>

<p>

    <strong>

        <b>

            p，strong，i后代选择器设置蓝色不起作用；

        </b>

    </strong>

</p>

</body>

</html>

4.8  相邻兄弟选择器

　　可选择紧接在另一个元素后的元素，且二者有相同的父元素

　　例：h1+p{};

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        li+li{

            font-size: 50px;

            color:blanchedalmond;

        }

        /*让同一父元素之下的第一个li标签下的其他li标签样式更改。

        最终效果是两个列表下的除了第一个的li其他的li样式都会更改。

        */

    </style>

</head>

<body>

    <div>

        <ul>

            <li>item1</li>

            <li>item2</li>

            <li>item3</li>

        </ul>

        <ol>

            <li>item11</li>

            <li>item22</li>

            <li>item33</li>

        </ol>

    </div>

</body>

</html>

web前端学习（三）css学习笔记部分（4）-- CSS选择器详解的更多相关文章

  1. web前端学习（三）css学习笔记部分（6）-- 选择器详解

    9.选择器详解 9.1  属性选择器 CSS3 属性选择器,在 CSS3 中,追加了三个属性选择器分别为:[att*=val].[att^=val]和[att$=val],使得属性选择器有了通配符的概 ...

  2. Web前端与移动开发学习路线图

    文章转载自「开发者圆桌」一个关于开发者入门.进阶.踩坑的微信公众号 这里整理的Web前端与移动开发学习路线图包含初中级两个部分,你可以通过百度云盘下载观看对应的视频 链接: http://pan.ba ...

  3. 想做web前端project师应该学习些什么？

    偶然间看到这篇文章.感觉博主写的挺不错的,假设你想做web前端project师的话,建议您阅读下面这篇文章,事实上web前端project师所做的工作事实上就是站点设计,有些小公司的美工事实上就是做w ...

  4. 最全的WEB前端开发程序员学习清单

    史上最全的WEB前端开发程序员学习清单! 今天为什么要给大家分享这篇文章呢,我发现最近来学前端的特别多,群里面整天都有人问:前端好找工作吗?前端要怎么学啊?前端工资怎么样?前端XX,前端XXX,虽然我 ...

  5. 零拷贝详解 Java NIO学习笔记四（零拷贝详解）

    转 https://blog.csdn.net/u013096088/article/details/79122671 Java NIO学习笔记四(零拷贝详解) 2018年01月21日 20:20:5 ...

  6. IP地址和子网划分学习笔记之《IP地址详解》

    2018-05-03 18:47:37   在学习IP地址和子网划分前,必须对进制计数有一定了解,尤其是二进制和十进制之间的相互转换,对于我们掌握IP地址和子网的划分非常有帮助,可参看如下目录详文. ...

  7. web前端开发常用的10个高端CSS UI开源框架

    web前端开发常用的10个高端CSS UI开源框架   随着人们对体验的极致追求,web页面设计也面临着新的挑战,不仅需要更人性化的设计理念,还需要设计出更酷炫的页面.作为web前端开发人员,运用开源 ...

  8. Web前端开发最佳实践（9）：CSS代码太太乱，重复代码太多？你需要精简CSS代码

    前言 提高网站整体加载速度的一个重要手段就是提高代码文件的网络传输速度.之前提到过,所有的代码文件都应该是经过压缩了的,这可提高网络传输速度,提高性能.除了压缩代码之外,精简代码也是一种减小代码文件大 ...

  9. Quartz学习——SSMM(Spring+SpringMVC+Mybatis+Mysql)和Quartz集成详解（转）

    通过前面的学习,你可能大致了解了Quartz,本篇博文为你打开学习SSMM+Quartz的旅程!欢迎上车,开始美好的旅程! 本篇是在SSM框架基础上进行的. 参考文章: 1.Quartz学习——Qua ...

  10. Git学习系列之Git基本操作提交项目（图文详解）

    前面博客 Git学习系列之Git基本操作克隆项目(图文详解) 然后可以 cd 切换到 LispGentleIntro 目录, 新增或者修改某些文件.这里只是模拟一下操作, 实际情况可能是 使用 Ecl ...

随机推荐

  1. python 第三方库的安装方法

    一.看更大的python世界 python 全球计算生态的主站:python 社区 www.pypi.org 二.安装第三方库 1) pip 命令安装方法 1.1 安装第三方库 命令行输入pip in ...

  2. js 实现横向滚动轮播并中间暂停下

    效果: html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  3. List--列表合成

    1,基本规则是,一对中括号里面包含一个表达式,表达式里可以有for语句,还可以有分支的for或者if语句. 2,例如: 3,列表合成可以快速地合并多个列表. 例如: 当然还可以直接加:[1, 2, 3 ...

  4. 【codeforces 499C】Crazy Town

    [题目链接]:http://codeforces.com/problemset/problem/499/C [题意] 一个平面,被n条直线分成若干个块; 你在其中的某一块,然后你想要要到的终点在另外一 ...

  5. 双系统可以进入Windows但进入Ubuntu时无法进入系统引导，只有左上角光标闪

    双系统可以进入Windows但进入Ubuntu时无法进入系统引导,只有左上角光标闪 这时候可以进入windows下的easyBCD重新创建ubuntu引导项即可

  6. Ionic 左侧菜单(登录主页详情demo)

    1.项目结构 2.截图效果展示        3.主要js 代码 $stateProvider .state('app', { url: "/app", abstract: tru ...

  7. c语言学习笔记 - 顺序查找和哨兵查找比较

    今天学习C时用到了顺序查找和哨兵查找,做了一个比较,主要是学习下哨兵查找法 例如在一个数组里查找一个元素,没找到返回-1,找到了则返回这个数组的下标也就是键值. 用循序查找法: void arr_se ...

  8. 19.10.14-Q

    小$P$的咕事 总结: 还行,就是$T1$写的慢了,$T2,T3$暴力有点锅 T1 小模拟. 打就是了. 可以小小的手玩一下. (考试的时候某同志人肉对拍了$20min$)=.= 418 ms 360 ...

  9. 让pandoc输出pdf时支持中文

    主机环境为:Ubuntu 12.04 LTS.对于RH系列,yum安装包的名称可能会有不同,不过yum联想能力比较强,应该不是问题. 安装pandoc,安装tex-live sudo apt-get ...

  10. Shell 语法之信号与作业

    Linux 使用信号与系统上运行的进程进行通信. Linux 编程中最常见的 Linux 系统信号 信号 值   描述 1  SIGHUP  挂起进程 2  SIGINT  中断进程 3  SIGQU ...