重拾css(6)——选择器

vincent_xyb 发布于2019-08-29 12:45 / 1957人阅读

摘要：选择器的扩展选择器本来是的一种规则，用于为选择节点的。但是聪明的人类还是通过选择器创造出了其他领域非常伟大的作品。被推广流行的根本原因就是它的基于选择器的。

前文示图中展示了浏览器的渲染过程，那么css与html是如何结合的呢？
答案是——选择器！

1.选择器

可分为两大类：

标签选择器（*是特殊的标签），可单标签，也可上下文多标签；

属性选择器（id和class本质上也是属性）。

1.1 标签选择器 1.1.1 通用选择器 *

通用选择器大家应该都比较熟悉了，最常用的就是重置浏览器默认样式。

1.1.2 单标签

文档的标签就是最基本的选择器，例如：

html {color:black;}
p {color:gray;}
h2 {color:silver;}

单标签选择器可以并列使用，即单标签分组，例如：

html, p, h2 {color:black;}    //同时选中了html、p、h2三个标签

1.1.3 多标签

多标签选择器一般和html上下文有关，它有以下几种分类：

后代选择器，选择一个祖先的所有子孙节点，例如 div p{…}

子元素选择器，选择一个父元素的所有直属节点，只包含子代，不包含孙代及更后代，例如 div > p{…}

相邻兄弟选择器，选择某一个元素紧挨着的兄弟节点，例如 li + li{…}

同代选择器，选择某一个元素的所有同胞节点，即有相同祖先节点的同代兄弟（不需要相邻），例如 span ~ a{…}

以上各种情况的组合应用（不要组合过于复杂，编码讲求可读性第一）
典型应用：

样式实现代码：

ul li+li {
    border-top: 1px solid #ccc;
}

1.2 属性选择器 1.2.1 特殊1：id选择器

css选择器是根据html节点的特性来设置的，id也是一个属性，只是它是一个比较特殊的属性，每个html节点的id不能重复。

　　由于特殊，而且比较常用，所以就多带带给id选择器一个“#”，本质上就是一个属性选择器。下面两行代码的执行效果完全相同：

#div1 {border:1px solid #ccc;}
div[id="div1"]{border:1px solid #ccc;}

1.2.2 特殊2：class选择器

class也是一个特殊的属性，之所以把它放在属性选择器下，和上文将的id一样。

1.2.3 属性选择器

属性选择器有两种情况：

只通过属性名选择：img[title]{…} //选中具体title属性的img

通过属性名和属性值选择：input[type=’text’]{…} //选中type属性值为text的input

2.伪类和伪元素

上文提到了若干种选择器类型，伪类和伪元素可针对任何一种选择器使用。

2.1 伪类

伪类分为UI伪类和结构化伪类。

2.1.1 UI伪类

常用的UI伪类实例：

a:link {color: #FF0000}        // 未访问的链接
a:visited {color: #00FF00}    // 已访问的链接 
a:hover {color: #FF00FF}    // 鼠标移动到链接上 
a:active {color: #0000FF}    // 选定的链接 

input[type="text"]:focus {}    //获得鼠标焦点的输入框
#title1:target {}    //突出显示活动的 HTML 锚

2.1.2 结构化伪类（低版本IE不支持）

常用的结构化伪类实例：

table tr:nth-child(even) {}    //even偶数，odd奇数
table tr:nth-child(odd) {}
table tr:nth-child(n) {}    //选中第n个
table tr:first-child {}
table tr:last-child {}

2.2 伪元素

伪元素是非常重要的概念，其中较常用的是:before和:after
基本用法：

            span:before {
                content: "Hello ";    /*或者unicode编码的形式*/
                color: red;    /*还可以定义添加内容的样式*/
            }
            span:after {
                content: " Zhang";
            }

            Jerry

显示结果：

可见:before和:after可以用于为元素前后添加内容。

应用场景：

第一，添加icon小图标。例如添加fontAwesome图标库中的图标

第二，清除浮动。

3.选择器的扩展

选择器本来是css的一种规则，用于为css选择html节点的。但是聪明的人类还是通过选择器创造出了其他领域非常伟大的作品。

jQuery
jQuery被推广流行的根本原因就是它的“Query”——基于css选择器的“Query”。现在的浏览器都支持querySelectAll()方法了，其实这就是W3C“抄袭”的jQuery的设计。

zen-Coding
jquery可以通过一段css选择器表达式从既有的html结构中选择符合表达式的dom组，但是zen-coding反其道而行之——可以根据css选择器表达式创造出html节点。不得不佩服这帮人的创造力。

zen-Coding可以大大提高编码效率，不妨一试。

云服务器 GPU云服务器 css选择器基础选择器css css选择 js css 加载器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112115.html

重拾css(1)——写在前边的话

摘要：本系列文章重拾主要参考王福朋知多少，结合自己的理解和学习需要，修改或添加了一些内容，难免有失偏颇，仅供自我学习参考之用。工作中或多或少的写一些css，但总感觉掌握的不够扎实，时而需要查阅一下知识点。我想，一方面跟缺少科班出身式的系统学习有关，另一方面也苦于一直未寻觅到一套合我胃口教程。直到我读到了王福朋css知多少系列文章，使我有了重新系统学习css的想法。本系列文章（重拾css）...

li21 2019-08-29 12:45 评论0 收藏0
重拾css(7)——选择器的优先级

上一节我们知道，选择器种类较多，同一个元素，可以采用不同的选择器方式选中，此时哪个选择器的样式会被最终显示呢？特指度特指度表示一个css选择器表达式的重要程度，每个选择器表达式都可以通过一个公式计算出一个数值，数越大，越重要。这个公式叫I - C - E计算公式： I —— Id; 100 C —— Class; 10 E —— Element; 1 即，针对一个css选...

Shihira 2019-08-29 12:45 评论0 收藏0
重拾css(3)——学习css的思路

摘要：如果我们以为重点看，从上图中我们可以总结出学习的三个突破点。这次我们向浏览器这位机器人学习一下，看看它写出来的能给我们什么帮助。对选择器来说，有一个很重要的话题级别。布局布局是的重头戏，每个系统的布局都有其各自的特点。众所周知，css的运行环境是浏览器，那么我们有必要先来认识下浏览器。 1.浏览器是怎样工作的有篇文章叫《浏览器的工作原理：新式网络浏览器幕后揭秘》，文中言简意赅的介绍...

Kaede 2019-08-29 12:45 评论0 收藏0
重拾css(8)——盒子模型

摘要：盒子的宽度设置固定宽度的情况在盒子模型中，我们设置的宽度都是内容宽度，不是整个盒子的宽度。这样我们改四个中的其中一个，都会导致盒子宽度的改变。包裹内容的情况这种情况下比较简单，盒子的宽度将随着内容宽度的增加而增加。 1.引言从这一节开始，我们就进入本系列的第三部分——css呈现。本部分将描述css在页面的几种布局和呈现的特性。包括两类：文字、块。第一类——文字。这部分相对比较简单一些...

SnaiLiu 2019-08-29 12:45 评论0 收藏0
重拾css(5)——浏览器默认样式

摘要：而依然有效的原因是浏览器默认样式的优先级低于外联内部样式。例如第二，浏览器默认样式还为设置了，这个值是对英文比较友好，中文状态下就显得有点拥挤。上一节介绍了样式的五种来源，咱们再通过一张图回顾一下。 showImg(https://segmentfault.com/img/bVM2Rk?w=536&h=245); 对于上面的三层，咱们大概都比较熟悉了。下面的两层中，用户自定义样式一般...

guqiu 2019-08-29 12:45 评论0 收藏0