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. eclipse memory analyzer对系统内存溢出堆文件解析（转）

    本文转之:https://blog.csdn.net/rachel_luo/article/details/8992461 前言 性能分析工具之-- Eclipse Memory Analyzer t ...

  2. 【机器学习】机器学习入门01 - kNN算法

    0. 写在前面 近日加入了一个机器学习的学习小组,每周按照学习计划学习一个机器学习的小专题.笔者恰好近来计划深入学习Python,刚刚熟悉了其基本的语法知识(主要是与C系语言的差别),决定以此作为对P ...

  3. 5行代码怎么实现Hadoop的WordCount？

    初学编程的人,都知道hello world的含义,当你第一次从控制台里打印出了hello world,就意味着,你已经开始步入了编程的大千世界,这和第一个吃螃蟹的人的意义有点类似,虽然这样比喻并不恰当 ...

  4. JAVA缓存的实现

    缓存可分为二大类: 一.通过文件缓存,顾名思义文件缓存是指把数据存储在磁盘上,不管你是以XML格式,序列化文件DAT格式还是其它文件格式: 二.内存缓存,也就是实现一个类中静态Map,对这个Map进行 ...

  5. [Bzoj3696]化合物【暴力+树形Dp】

    Online Judge:Bzoj3696 Label:暴力,树形Dp 题目描述 首长NOI惨跪,于是去念文化课了.现在,他面对一道化学题. 这题的来源是因为在一个奇怪的学校两个化竞党在玩一个奇怪的博 ...

  6. List循环添加对象时遇到问题的解决

    var temp=new handleData(); foreach(var t in data) { temp.DataValue = t.DataValue; temp.CreateTime = ...

  7. JAXL连接Openfire发送房间消息

    使用composer形式安装的JAXL <?php require_once "vendor/autoload.php"; $client = new JAXL(array( ...

  8. springcloud-sleuth实现日志的链路追踪

    1.需要将spring-cloud-starter-sleuth的依赖加入即可(注意:最好使用maven或gradle工具) 代码参考:https://github.com/Pinshuducha/s ...

  9. Vue简单评星效果与单张图片上传

    <form class="" id="pj-frm"> <div class="assess-header"> &l ...

  10. Python之通配符--提取文件中的内容并输出

    前言:我的学习进度其实没有那么快的,因为现在是网络工程师实习,只有晚上一点时间和周末有空,所以周一到周天的学习进度很慢,今天之所以突然跳到通配符是因为工作需要,大体讲一下我的工作需求:网络工程师就是写 ...