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. RQNOJ--160 竞赛真理（01背包）

    题目http://www.rqnoj.cn/problem/160 分析:这是一个01背包问题,对于每一道题目,都有两个选择"做"或者"不做". 但是唯一不同的 ...

  2. Windows API 第20篇 GetVolumeNameForVolumeMountPoint

    函数原型: BOOL GetVolumeNameForVolumeMountPoint(                                                        ...

  3. 再不懂时序就 OUT 啦！，DBengine 排名第一时序数据库，阿里云数据库 InfluxDB 正式商业化！

    云数据库 InfluxDB® 版介绍 阿里云数据库 InfluxDB® 版已于近日正式启动商业化 . 云数据库 InfluxDB® 是基于当前最流行的开源数据库 InfluxDB 提供的在线数据库服务 ...

  4. 【codeforces 500D】New Year Santa Network

    [题目链接]:http://codeforces.com/problemset/problem/500/D [题意] 有n个节点构成一棵树; 让你随机地选取3个不同的点a,b,c; 然后计算dis(a ...

  5. pyinstaller 打包python3.6文件成exe 运行

    1.安装pyinstaller  切换到安装目录下script 运行  如我的目录:F:\Program Files\Python36\Scripts pip  install pyinstaller ...

  6. 如何用js造轮子

    写了一个非常通俗易懂的造轮子的方法 <div class="wrap"></div> <div class="wrap">& ...

  7. POSIX基本正则表达式和扩展正则表达式的比较

    转自:http://book.51cto.com/art/201303/385961.htm 在读者正觉得正则表达式已经复杂得不能再复杂时,又会发现POSIX规范将正则表达式的实现方法分为了两种:基本 ...

  8. Java虚拟机系列（四）---查看GC日志

    这一节穿插一点如何在eclipse中配置并查看某个Java应用GC日志的知识点,我也是通过调研知道的,因为书中写的不是很详细,主要是为下一节做准备. 一.eclipse中配置GC 在eclipse中如 ...

  9. netbeans 8.2 系统找不到指定的文件。

    系统找不到指定的文件.Using CATALINA_BASE: "C:\Users\wishr\AppData\Roaming\NetBeans\8.2\apache-tomcat-8.0. ...

  10. webService cxf学习

    1.首先去官网下载cxf包 http://archive.apache.org/dist/cxf/ 记住要选.zip结尾 大概40兆的样子 2.把上边的包都放项目里.如果你用的jeecg框架,那它自带 ...