Selectors (选择器)


---------------参考MDN中css学习。

首先css选择器有很多,但总体概括起来的话有两种:

  1. 标签选择器(*是特殊情况),可但标签,也可上下文多标签;
  2. 属性选择器(id和class都是属性,特殊的属性);

标签选择器~单标签

指此单个的标签名字,使用时可直接用该标签进行样式操作,例如操作这段html中<strong>标签里的值。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>
<strong>C</strong>ascading
<strong>S</strong>tyle
<strong>S</strong>heets
</p>
</body>
</html>

在css文件中使用它的标签就能对标签里的属性进行样式操作,比如让字母变成红色。

strong {
color: red;
}

标签选择器~多标签

 官方版

选择器 选择的元素
A E 任何是元素A的后代元素E (后代节点指A的子节点,子节点的子节点,以此类推)
A > E 任何元素A的子元素
E:first-child 任何元素的第一个子元素E
B + E 任何元素B的下一个兄弟元素E
B ~ E B元素后面的拥有共同父元素的兄弟元素E

通俗解释版

  1. 选择一个祖先的所有子孙节点,例如 div p{…}
  2. 选择一个父元素的所有直属节点,例如 div > p{…}
  3. 选择某一个元素紧挨着的兄弟节点,例如 li + li{…}
  4. 选择某一个元素的所有同胞节点,例如 span ~ a{…}
  5. 以上各种情况的组合应用(不要组合过于复杂,编码讲求可读性第一)

 给大家列举一个比较典型的应用,如下图

  

  上图中的效果应该比较常见,在各个菜单之间加下划线。我之前的实现是:每个li都加一个border-bottom,在把最后一个li的border-bottom去掉。

  其实完全没必要这样麻烦,下面一个样式设置即可解决:

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

栗子引用:http://www.cnblogs.com/wangfupeng1988/p/4282954.html


属性选择器~

最首先当然是要拿出两位重量级选手了:class 和 id 

(Class selectors)

通过设置元素的 class 属性,可以为元素指定类名。类名由开发者自己指定。 文档中的多个元素可以拥有同一个类名。

在写样式表时,类选择器是以英文句号(.)开头的。

(ID selectors)

通过设置元素的 id 属性为该元素制定ID。ID名由开发者指定。每个ID在文档中必须是唯一的。

在写样式表时,ID选择器是以#开头的。

我们来看一个栗子:

<p class="key" id="principal">
.key {
color: green;
} #principal {
font-weight: bolder;
}

上面的p标签同时具有 class 属性和id 属性,

css中id选择器principal必须是唯一的,而class选择器却是可以和其他标签中的key相同,从而达到多个标签同时操作。

你也可以将多个选择器组合起来构成更确定的选择器。

比如,选择器.key 选中所有class属性为 key的元素. 选择器 p.key 选中所有class属性为key的<p> 元素。

除了class 和 id,你还可以用方括号的形式指定其他属性。比如,选择器 [type='button'] 选中所有 type 属性为 button 的元素

实例: 使用类选择器和ID选择器

  1. 创建一个HTML文件
  2. 创建style1.css
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample document</title>
<link rel="stylesheet" href="style1.css">
</head>
<body>
<p id="first">
<strong class="carrot">C</strong>ascading
<strong class="spinach">S</strong>tyle
<strong class="spinach">S</strong>heets
</p>
<p id="second">
<strong>C</strong>ascading
<strong>S</strong>tyle
<strong>S</strong>heets
</p>
</body>
</html>
strong { color: red; }
.carrot { color: orange; }
.spinach { color: green; }
#first { font-style: italic; }

3.保存文件使用浏览器执行

重新组织样式中规则的顺序,你会发现改变这几条规则的顺序不会影响最终效果。

类选择器 .carrot 和.spinach 比标签选择器 strong 拥有更高优先级。

ID 选择器 #first 比类选择器和标签选择器更优先。


结尾:

第一篇先记录这些吧,后面还有伪类和伪元素,个人还不是很懂,所以先学习学习在进行总结。

刚开始写博客,还有很多的不足个人感觉节奏还是有点问题,希望各位海涵。我会慢慢优化,如有遗漏希望各位前辈指教,一定虚心学习 谢谢~

Css攻克Selectors 一的更多相关文章

  1. HTMLElement.hidden; CSS Attr Selectors的用处; DOM的className方法; ::before和::after伪元素

    https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/hidden https://codepen.io/pen/ <elem ...

  2. [CSS] Targeting Elements with CSS Attribute Selectors

    Beyond classes and IDs CSS also provides selectors to target element based on their attributes. In t ...

  3. CSS Pseudo-Element Selectors伪对象选择符

    一: CSS3将伪对象选择符(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符(Pseudo-Classes Selectors),但以前的 ...

  4. CSS 笔记六(Image/Attribute Selectors)

    Image Opacity / Transparency The CSS opacity property is a part of the CSS3 recommendation. Example ...

  5. 【CSS】Beginner2:Selectors, Properties, and Values

    1.Whereas HTML has tags,CSS has selectors.   2.Selector{ properties:value; properties2:value2; }   3 ...

  6. CSS伪类与CSS伪元素的区别及由来

    关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因 ...

  7. CSS 选择器及其优先级

    CSS 的选择器有很多类型,我们将常用的这些列表如下: 一.CSS 选择器的类别 1. 基本选择器 基本选择器 解释 备注 * 通用选择器,匹配所有元素 CSS2 E 元素选择器,匹配类型为 E 的所 ...

  8. CSS Core Technology

    1. Selector Different types of selectors: Selectors can be divided into the following categories: Si ...

  9. css中attribute selector及pseudo class

    https://developer.mozilla.org/en-US/docs/Web/CSS/Reference#Selectors 在css3规范中,定义了以下几种类型的selector: Ba ...

随机推荐

  1. docker 运行挂载磁盘

    docker:/data# mkdir /awp docker:/data# docker ps CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAM ...

  2. git push报错

    git: No refs in common and none specified; doing no (2012-10-28 11:43:10) 转载▼ 标签: 杂谈 分类: 项目管理 用gitol ...

  3. skiing(搜索+记忆化搜索)

    skiing 时间限制:3000 ms  |  内存限制:65535 KB 难度:5   描述 Michael喜欢滑雪百这并不奇怪, 因为滑雪的确很刺激.可是为了获得速度,滑的区域必须向下倾斜,而且当 ...

  4. ICSharpCode.SharpZipLib.Zip

    //压缩整个目录下载 var projectFolder = Request.Params["folder"] != null ? Request.Params["fol ...

  5. 两种Makefile

    .PHONY:clean CC=g++ CFLAGS=-Wall -g BIN=test_queue OBJS=Queue.o test_main.o $(BIN):$(OBJS) $(CC) $(C ...

  6. 基于HTML5 Canvas的网页画板实现教程

    HTML5的功能非常强大,尤其是Canvas的应用更加广泛,Canvas画布上面不仅可以绘制任意的图形,而且可以实现多种多样的动画,甚至是一些交互式的应用,比如网页网版.这次我们要来看的就是一款基于H ...

  7. 理解数据点,自变量和因变量(参数和值)ChartControl

    WinForms Controls > Controls > Chart Control > Fundamentals > Charting Basics > Under ...

  8. 折叠Collapse插件

    实例 折叠(Collapse)插件可以很容易地让页面区域折叠起来.无论您用它来创建折叠导航还是内容面板,它都允许很多内容选项. .collapse 隐藏内容. .collapse.in 显示内容. . ...

  9. C# foreach获取集合元素索引的坑

    ,}; foreach(var prepareId in prepareIds) { Console.WriteLine(prepareIds.IndexOf(prepareId)); } 执行结果如 ...

  10. Global.asax文件的说明

    每个应用程序可以包含一个特殊的目录(/bin)和两个特殊的文件(Web.config和Global.asax) Global.asax文件的使用: 作用:处理应用程序范围内的事件,声明应用程序范围的对 ...