css能够获取到HTML结构上的元素，这个是怎么实现的了？

在我们看来这是个很神奇的事情，css可以写在页面之外，也可以写在页面内，而都不会影响到它去

获取这个元素，还有无论这个HTML结构多么复杂，这个css也能准确获取你所要的HTML元素，既然

那么强大，那么是不是实现过程也是很困难呢?

只能绝对说这个很很很很简单的。

这只要记住以下的选择符即可，噢，还有上一篇还介绍了些选择符。

子选择符

选择所有作为E元素的子元素F。 E>F

例子：

<style>

    p>a{

        color: black;

    }

</style>

<p>火狐是个<a href="#">浏览器</a></p>

相邻选择符

选择紧贴在E元素之后F元素。E+F

<style>

    p+p{

    font-weight: bold;

    }

</style>

<p>火狐是个<a href="#">浏览器</a></p>

<p>IE是个坑爹的浏览器</p>

兄弟选择符

选择E元素所有兄弟元素F。E~F

        <style>

        li~li{

            color: red;

        }

    </style>

    <ul>

        <li>大明的子女1</li>

        <li>大明的子女2</li>

        <li>大明的子女3</li>

        <li>大明的子女4</li>

        <li>大明的子女5</li>

        <li>大明的子女6</li>

        <li>大明的子女7</li>

        <li>大明的子女8</li>

        <li>大明的子女9</li>

        <li>大明的子女10</li>

    </ul>

这个选择符选择不包括自己之外所有F选择符。

id 及 class 选择符

<p id="p1"> 这是一个段落 </p>

        #p1 {

          font-size:12px;

          font-weight:bold;

        }
<p class="p1"> 这是一个段落 </p>

        .p1 {

          font-size:12px;

          font-weight:bold;

        }

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

在网页中，每个id名称中只能使用一次，不得重复。

与id 不同，class 允许重复使用。比如页面中的多个元素，都可以使用同一个样式定义。

伪类选择符

E:link 设置超链接a在未被访问前的样式。

E:visited 设置超链接a在其链接地址已被访问过时的样式。

E:hover 设置元素在其鼠标悬停时的样式。

E:active 设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>伪类</title>

    <style>

        a:link{

            color: #00ffff;

        }

        a:visited{

            color: #000;

        }

        a:hover{

            color: #ff7600;

        }

        a:active{

            color: #eee;

        }

    </style>

</head>

<body>

    <a href="#">click into</a>

</body>

</html>

注意：这个4个伪类选择符的顺序按照    link-visited-hover-active

顺序乱来会出现问题，这个问题请移步到上篇扩展内容

E:focus     设置元素在成为输入焦点(该元素的onfocus事件发生)时的样式。

使用在表单中或能获取光标的元素上。

    input:focus{

        outline: 2px solid #ff7600;

    }

    <input type="text">

E:lang(fr)     匹配使用特殊语言的E元素。很少用

匹配中英双版，可能要使用到。

p:lang(en){

        font-size: 14px;

    }

<p>IE是个坑爹的浏览器</p>

E:not(s)     匹配不含有s选择符的元素E。

ul li:not(.li3){

        color: #fff;

    }

    <ul>

        <li>大明的子女1</li>

        <li>大明的子女2</li>

        <li class="li3">大明的子女3</li>

        <li>大明的子女4</li>

        <li>大明的子女5</li>

        <li>大明的子女6</li>

        <li>大明的子女7</li>

        <li>大明的子女8</li>

        <li>大明的子女9</li>

        <li>大明的子女10</li>

    </ul>

E:root      匹配E元素在文档的根元素。常指html元素

p:root{

        background: blue;

    }

E:first-child     匹配父元素的第一个子元素E。

   ul:first-child{

        font-size: 15px;

    }

    <ul>

        <li>大明的子女1</li>

        <li>大明的子女2</li>

        <li>大明的子女3</li>

        <li>大明的子女4</li>

        <li>大明的子女5</li>

        <li>大明的子女6</li>

        <li>大明的子女7</li>

        <li>大明的子女8</li>

        <li>大明的子女9</li>

        <li>大明的子女10</li>

    </ul>

第一个li被匹配；

E:last-child   匹配父元素的最后一个子元素E。

ul:last-child{

        color: blue;

    }

最后一个li被匹配；

E:only-child

    body:only-child{

        color: blue;

    }

<p>火狐是个<a href="#">浏览器</a></p>

<p>IE是个坑爹的浏览器</p>

<input type="text">

input被匹配；

E:nth-child(n)    匹配父元素的第n个子元素E。

    ul:nth-child(1){

        color: blue;

    }

ul下的第一个li被匹配；

E:nth-last-child(n)     匹配父元素的倒数第n个子元素E。

ul:nth-last-child(1){

        color: blue;

    }

ul的子元素li的倒数第一个被匹配到。

E:first-of-type    匹配同类型中的第一个同级兄弟元素E。

    li:first-of-type{

        font-weight: bold;

    }

同类型li的第一个被选中；

E:last-of-type    匹配同类型中的最后一个同级兄弟元素E。

    li:last-of-type{

        border: 1px solid #ddd;

    }

同类型li的最后一个被选中；

E:only-of-type   匹配同类型中的唯一的一个同级兄弟元素E。

    li:only-of-type{

        font-weight: bold;

    }

E:nth-of-type(n)  匹配同类型中的第n个同级兄弟元素E。

    li:nth-of-type(3){

        font-weight: bold;

    }

第三li被匹配；

E:nth-last-of-type(n)   匹配同类型中的倒数第n个同级兄弟元素E。

    li:nth-last-of-type(3){

        background: green;

    }

倒数第三个被匹配；

E:empty    匹配没有任何子元素（包括text节点）的元素E。

E:checked  匹配用户界面上处于选中状态的元素E。 (用于input type为radio与checkbox时)

    input:checked{

            width: 100px;

        }

    <input type="checkbox" name="name" id="1">

    <input type="checkbox" name="name" id="2">

    <input type="checkbox" name="name" id="3">

    <input type="checkbox" name="name" id="4">

E:enabled    匹配用户界面上处于可用状态的元素E。

E:disabled    匹配用户界面上处于禁用状态的元素E。

E:target     匹配相关URL指向的E元素。

ul li a:target{

    color: red;

    }

<ul>

    <li><a href="#nav1" id="nav1">导航一</a></li>

    <li><a href="#nav2" id="nav2">导航二</a></li>

    <li><a href="#nav3" id="nav3">导航三</a></li>

</ul>

这个一定要设置路径URL，不是不行。只能使用与锚点，就是本页跳转。

不过可以使用来代表激活状态，以前是需要js实现的。

ok~

扩展小知识：

接上一篇又补充一些，让我们对css的理解更加深刻。

层叠样式表

层叠是什么意思？为什么这个词如此重要，以至于要出现在它的名称里。

层叠可以简单地理解为冲突的解决方案。

优先级规则可以表述为

行内样式>ID样式>类别样式>标记样式

在复杂的页面中，某一个元素有可能会从很多地方获取样式，例如一个网站的某一级标题整体设置为使用绿色，而对某个特殊栏目

需要使用蓝色，这样在栏目中就需要覆盖通用的样式设置。在很简单的页面中，这样的特殊需求实现起来不会很难，但是如果网站

的结构很复杂，就完全有可能代码变得非常混乱，可能出现无法找到某个元素的样式来自于哪条规则的情况。因此，必须要充分理

解css中“层叠”的原理。

计算冲突样式的优先级是一个比较复杂的过程，并不仅仅是上面这个简单的优先级规则可以完全描述的。但是使用者可以把把握 一个大的

原则，就是“越特殊的样式，优先级越高”行内样式对指定的一个元素产生影响，非常特殊，ID是针对某个元素的，因此它一定比应用于多个

元素的类别样式特殊。特殊性越高的元素，优先级越高。

css之选择器篇的更多相关文章

  1. css中选择器的使用

    css是英文Cascading Style Sheets的缩写.它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.我们再将html比喻 ...

  2. CSS类选择器和ID选择器

    CSS类选择器和ID选择器皆允许以一种独立于文档元素的方式来指定样式,同时二者皆区分大小写. 区别如下: 第一:在同一个页面内,不允许有相同名字的id对象出现,但是允许相同名字的class 第二:当页 ...

  3. 2天驾驭DIV+CSS （技巧篇）（转）

     这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们.本文是技巧篇. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” ...

  4. 2天驾驭DIV+CSS （实战篇）（转）

     这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们.本文是实战篇. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” ...

  5. 2天驾驭DIV+CSS （基础篇）（转）

    这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” 将你引入两大误区 ...

  6. 小tip: CSS后代选择器可能的错误认识——张鑫旭

    一.关于类选择器的一个问题 假设有下面一个面试题,CSS代码如下: .red { color: red; } .green { color: green; } HTML如下: <div clas ...

  7. CSS 从入门到放弃系列：CSS的选择器和优先级

    CSS的选择器和优先级 CSS的N种选择器 !important 其实这个玩意不算什么选择器,放在这只是为了突出这个选择器优先级或者说权重的从高到低而已.. 内联方式(行间样式) <div st ...

  8. CSS系列（7）CSS类选择器Class详解

    这一篇文章,以笔记形式写. 1,  CSS 类选择器详解 http://www.w3school.com.cn/css/css_selector_class.asp 知识点: (1)    使用类选择 ...

  9. CSS 属性选择器的深入挖掘

    CSS 属性选择器,可以通过已经存在的属性名或属性值匹配元素. 属性选择器是在 CSS2 中引入的并且在 CSS3 中得到了很好拓展.本文将会比较全面的介绍属性选择器,尽可能的去挖掘这个选择器在不同场 ...

随机推荐

  1. Java Web的开始学习

    今天开始学习Web了,需要的前提技能是  XML ,我还不太熟悉,今天的任务需要熟悉一下 XML-- 输入输出流  I/O     序列化反序列化,也需要看一下,我看这两块会有用到. 任务: ---- ...

  2. JS 菜单栏一直悬浮在顶部代码

    只需要把下面代码放到js中: $(function(){                //获取要定位元素距离浏览器顶部的距离         var navH = $(".menu&quo ...

  3. Samba服务器搭建配置

    本次环境: 服务端-centos6.8-192.168.2.200 客户端1-centos6.8-192.168.2.201 客户端2-Windows7-192.168.2.104 假设条件如下: 使 ...

  4. [转载] 散列表(Hash Table)从理论到实用（上）

    转载自:白话算法(6) 散列表(Hash Table)从理论到实用(上) 处理实际问题的一般数学方法是,首先提炼出问题的本质元素,然后把它看作一个比现实无限宽广的可能性系统,这个系统中的实质关系可以通 ...

  5. 6本Android开发必备图书

    学习一样新事物或许有多种方式,报培训班,看视频,向高手请教等等,但一本好书往往可以让你少走很多弯路,事半功倍.今天与大家分享一些Android开发值得一读的书籍,希望对新手安卓开发者们有所帮助. 1. ...

  6. c# 框架学习（nop ）总结-------删除功能

    删除直接使用(框架中以封装好的) 控制中写就可以啦 public ActionResult Delete(int id) { //权限位置(若需要的话)var individual = _indivi ...

  7. public <T> void show(T t),void前面的泛型T是什么作用

    public <T>这个T是个修饰符的功能,表示是个泛型方法,就像有static修饰的方法是个静态方法一样. <T> 不是返回值,表示传入参数有泛型 public static ...

  8. [转]MySQL主从复制原理介绍

    MySQL主从复制原理介绍 一.复制的原理 MySQL 复制基于主服务器在二进制日志中跟踪所有对数据库的更改(更新.删除等等).每个从服务器从主服务器接收主服务器已经记录到其二进制日志的保存的更新,以 ...

  9. 【模板】【转载】区间dp

    区间动态规划问题一般都是考虑,对于每段区间,他们的最优值都是由几段更小区间的最优值得到,是分治思想的一种应用,将一个区间问题不断划分为更小的区间直至一个元素组成的区间,枚举他们的组合 ,求合并后的最优 ...

  10. H3C ipsec ike 协商配置

    1. 分几步设置 (1)定义ACL (2)创建 ipsec 安全建议 1.选择认证方式 ah 选择 ah头认证方式 不配置 ipsec不能建立成功 (3)创建IKE keychain 可以写多条key ...