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. 如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖

    <!DOCTYPE html> <html> <body> <h1>My First Web Page</h1> <p>My F ...

  2. python cmd 模块

    command模块用于执行以字符串形式指定的简单系统命令,并将其输出以字符串形式返回.此模块尽在unix系统上有效.这个模型提供的功能与在unix shell脚本使用的反引号(就是~这个键下的那个反引 ...

  3. Hibernate 1、Hello Hibernate

    所使用到的jar 包: 1.创建实体类 public class User { private Integer id; private String name; private String addr ...

  4. XMPP iOS开发(IM开发,转)

    搭建完本地服务器之后,我们便可以着手客户端的工作,这里我们使用XMPPFramework这个开源库,安卓平台可以使用Smack(最好使用4.1以及之后的版本,支持流管理),为了简单起见这里只实现登陆. ...

  5. How Many Maos Does the Guanxi Worth

    How Many Maos Does the Guanxi Worth Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 512000/5 ...

  6. Net常用命名空间和类介绍

    一.基础命名空间 l  System.Collections 包含了一些与集合相关的类型,比如列表,队列,位数组,哈希表和字典等. l  System.IO 包含了一些数据流类型并提供了文件和目录同步 ...

  7. 20141021WinForm控件属性

    一.Form对象属性:Name:窗体类的类名(一)外观:BackColor:窗体背景色ForeColor:窗体文字色BackgroundImage:背景图片Font:设置字体FormBorderSty ...

  8. linux新建磁盘并分区

    先在虚拟机上添加一块硬盘. 查看磁盘分区:sdb还没有分配 新建一个100M的分区:再查看,发现新建成功了. 再查看fdisk -l ******ext4格式不支持.就使用了ext2进行格式化了. m ...

  9. [Script]EBS里查看模块的版本、文件的版本信息【Z】

    系统版本信息 装了哪些模块,以及版本信息 select 'Current Application Release: '||ver||' ('||bug||')' "Description&q ...

  10. C# - 动态连接数据库字符串

    String conStr = @"Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|数据库文件.mdf;Integrated ...