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. WhaleCTF之web-本地登录

    WhaleCTF之web-本地登录 前往题目 呵呵,基然对ip限制,没事,掏出burp抓包 改包 添加XFF头部 X-Forwarded-For: 127.0.0.1 发一下 不是admin,没有用户 ...

  2. python 中动态类的创建

    参考 collections.namedtuple 的实现 链接: https://www.cnblogs.com/BeautifulWorld/p/11647198.html

  3. 关于vue项目报错：this relative module was not found

    VScode编辑器增加了一行代码import func from './vue-temp/vue-editor-bridge'; 删除即可

  4. Ionic 新闻类别菜单

    1.效果图   2.controller .js .controller("ProductCtrl", function ($scope,$ionicModal,$ionicScr ...

  5. jqurey相册放大浏览效果。

    /*图片弹窗与切换*/ function honorLayer(){ var honorArray = honorArr(); var $msk = $('.js-mask'),$layer = $( ...

  6. PHP--时间搜索插件封装

    /** * 时间搜索插件封装 * anthor qinpeizhou * @param $timeset 时间格式 * @param $time sql语句中所需要搜索的time字段名称 * @par ...

  7. 左神算法书籍《程序员代码面试指南》——1_10最大值减去最小值小于或等于num的子数组数量

    [题目]给定数组arr和整数num,共返回有多少个子数组满足如下情况:max(arr[i.j]) - min(arr[i.j]) <= num max(arfi.j])表示子数组ar[ij]中的 ...

  8. Maven实战03_Maven使用入门

    1:pom.xml Maven项目的核心文件,非常重要.POM(Project Object Model)项目对象模型,其定义了项目的基本信息,用于描述项目如何构建,声明项目依赖等等. 创建一个最简单 ...

  9. Django-rest Framework(四)

    序列化模块时rest-framework的很重要的组成部分 rest-framework序列化模块(核心) 一. 为什么要使用序列化组件? ​ 后台的数据多以后台的对象存在,经过序列化后,就可以格式化 ...

  10. Python爬虫笔记【一】模拟用户访问之提交表单登入—第二次（7）

    在第一次登入时遇到这个问题,页面验证码与下载下来需要识别的验证码不同的问题,从网上查寻说是叫验证码同步问题.发现是用cookie解决的,那次cookie介绍到通过cookie就可以实现时间戳同步问题, ...