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 ...
随机推荐
- docker 运行挂载磁盘
docker:/data# mkdir /awp docker:/data# docker ps CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAM ...
- git push报错
git: No refs in common and none specified; doing no (2012-10-28 11:43:10) 转载▼ 标签: 杂谈 分类: 项目管理 用gitol ...
- skiing(搜索+记忆化搜索)
skiing 时间限制:3000 ms | 内存限制:65535 KB 难度:5 描述 Michael喜欢滑雪百这并不奇怪, 因为滑雪的确很刺激.可是为了获得速度,滑的区域必须向下倾斜,而且当 ...
- ICSharpCode.SharpZipLib.Zip
//压缩整个目录下载 var projectFolder = Request.Params["folder"] != null ? Request.Params["fol ...
- 两种Makefile
.PHONY:clean CC=g++ CFLAGS=-Wall -g BIN=test_queue OBJS=Queue.o test_main.o $(BIN):$(OBJS) $(CC) $(C ...
- 基于HTML5 Canvas的网页画板实现教程
HTML5的功能非常强大,尤其是Canvas的应用更加广泛,Canvas画布上面不仅可以绘制任意的图形,而且可以实现多种多样的动画,甚至是一些交互式的应用,比如网页网版.这次我们要来看的就是一款基于H ...
- 理解数据点,自变量和因变量(参数和值)ChartControl
WinForms Controls > Controls > Chart Control > Fundamentals > Charting Basics > Under ...
- 折叠Collapse插件
实例 折叠(Collapse)插件可以很容易地让页面区域折叠起来.无论您用它来创建折叠导航还是内容面板,它都允许很多内容选项. .collapse 隐藏内容. .collapse.in 显示内容. . ...
- C# foreach获取集合元素索引的坑
,}; foreach(var prepareId in prepareIds) { Console.WriteLine(prepareIds.IndexOf(prepareId)); } 执行结果如 ...
- Global.asax文件的说明
每个应用程序可以包含一个特殊的目录(/bin)和两个特殊的文件(Web.config和Global.asax) Global.asax文件的使用: 作用:处理应用程序范围内的事件,声明应用程序范围的对 ...