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. PAT甲级——A1102 Invert a Binary Tree

    The following is from Max Howell @twitter: Google: 90% of our engineers use the software you wrote ( ...

  2. [转]WPF中的动画

    WPF中的动画                                                                                  周银辉 动画无疑是WP ...

  3. python re.sub详解

    re.sub(pattern, repl, string, count=0, flags=0) re.sub的含义,作用,功能就是: 对于输入的一个字符串,利用正则表达式(的强大的字符串处理功能),去 ...

  4. leetcode 1078 Occurrences After Bigram

    lc1078 Occurrences After Bigram trim().split()将原字符串转换成words数组 依次匹配first和second,若两者都能匹配上,则下一个单词为third ...

  5. 微信小程序之组件的集合（六）

    这个将是最后一篇关于小程序的记录了,课程接近尾声,最后一个是关于用户的page页面,看看这个页面中有哪些值得学习的地方! 一.page中my开发 这个主要是展示用户喜欢的杂志,以及用户的信息,需要创建 ...

  6. 判断django中的orm为空

    result= Booking.objects.filter() #方法一 .exists() if result.exists(): print "QuerySet has Data&qu ...

  7. 微信小程序——tab导航栏

    wxml: <view class="tab">  <view class="tab-left" bindtap="tabFun&q ...

  8. Angular本地数据存储LocalStorage

    //本地存储数据===================================.factory('locals',['$window',function($window){ return{ / ...

  9. MyBatis配置文件(二)－－settings配置

    settings是MyBatis中最复杂的配置,它能影响MyBatis底层的运行,大部分情况下使用默认值,只需要修改一些常用的规则即可.常用规则有自动映射.驼峰命名映射.级联规则.是否启动缓存.执行器 ...

  10. Java程序员面试题收集（4）

    Java面试题和答案JAVA相关基础知识1.面向对象的特征有哪些方面      1.抽象:抽象就是忽略一个主题中与当前目标无关的那些方面,以便更充分地注意与当前目标有关的方面.抽象并不打算了解全部问题 ...