Css攻克Selectors 一
Selectors (选择器)
---------------参考MDN中css学习。
首先css选择器有很多,但总体概括起来的话有两种:
- 标签选择器(*是特殊情况),可但标签,也可上下文多标签;
- 属性选择器(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 |
通俗解释版
- 选择一个祖先的所有子孙节点,例如 div p{…}
- 选择一个父元素的所有直属节点,例如 div > p{…}
- 选择某一个元素紧挨着的兄弟节点,例如 li + li{…}
- 选择某一个元素的所有同胞节点,例如 span ~ a{…}
- 以上各种情况的组合应用(不要组合过于复杂,编码讲求可读性第一)
给大家列举一个比较典型的应用,如下图
上图中的效果应该比较常见,在各个菜单之间加下划线。我之前的实现是:每个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选择器
- 创建一个HTML文件
- 创建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 一的更多相关文章
- 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 ...
- [CSS] Targeting Elements with CSS Attribute Selectors
Beyond classes and IDs CSS also provides selectors to target element based on their attributes. In t ...
- CSS Pseudo-Element Selectors伪对象选择符
一: CSS3将伪对象选择符(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符(Pseudo-Classes Selectors),但以前的 ...
- CSS 笔记六(Image/Attribute Selectors)
Image Opacity / Transparency The CSS opacity property is a part of the CSS3 recommendation. Example ...
- 【CSS】Beginner2:Selectors, Properties, and Values
1.Whereas HTML has tags,CSS has selectors. 2.Selector{ properties:value; properties2:value2; } 3 ...
- CSS伪类与CSS伪元素的区别及由来
关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因 ...
- CSS 选择器及其优先级
CSS 的选择器有很多类型,我们将常用的这些列表如下: 一.CSS 选择器的类别 1. 基本选择器 基本选择器 解释 备注 * 通用选择器,匹配所有元素 CSS2 E 元素选择器,匹配类型为 E 的所 ...
- CSS Core Technology
1. Selector Different types of selectors: Selectors can be divided into the following categories: Si ...
- css中attribute selector及pseudo class
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference#Selectors 在css3规范中,定义了以下几种类型的selector: Ba ...
随机推荐
- 如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖
<!DOCTYPE html> <html> <body> <h1>My First Web Page</h1> <p>My F ...
- python cmd 模块
command模块用于执行以字符串形式指定的简单系统命令,并将其输出以字符串形式返回.此模块尽在unix系统上有效.这个模型提供的功能与在unix shell脚本使用的反引号(就是~这个键下的那个反引 ...
- Hibernate 1、Hello Hibernate
所使用到的jar 包: 1.创建实体类 public class User { private Integer id; private String name; private String addr ...
- XMPP iOS开发(IM开发,转)
搭建完本地服务器之后,我们便可以着手客户端的工作,这里我们使用XMPPFramework这个开源库,安卓平台可以使用Smack(最好使用4.1以及之后的版本,支持流管理),为了简单起见这里只实现登陆. ...
- 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 ...
- Net常用命名空间和类介绍
一.基础命名空间 l System.Collections 包含了一些与集合相关的类型,比如列表,队列,位数组,哈希表和字典等. l System.IO 包含了一些数据流类型并提供了文件和目录同步 ...
- 20141021WinForm控件属性
一.Form对象属性:Name:窗体类的类名(一)外观:BackColor:窗体背景色ForeColor:窗体文字色BackgroundImage:背景图片Font:设置字体FormBorderSty ...
- linux新建磁盘并分区
先在虚拟机上添加一块硬盘. 查看磁盘分区:sdb还没有分配 新建一个100M的分区:再查看,发现新建成功了. 再查看fdisk -l ******ext4格式不支持.就使用了ext2进行格式化了. m ...
- [Script]EBS里查看模块的版本、文件的版本信息【Z】
系统版本信息 装了哪些模块,以及版本信息 select 'Current Application Release: '||ver||' ('||bug||')' "Description&q ...
- C# - 动态连接数据库字符串
String conStr = @"Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|数据库文件.mdf;Integrated ...