CSS_高级选择符
2016-11-07
《css入门经典》第八章
1.属性选择器
| 选择器 | 描述 |
|---|---|
| [attribute] | 用于选取带有指定属性的元素。 |
| [attribute=value] | 用于选取带有指定属性和值的元素。 |
| [attribute~=value] | 用于选取属性值中包含指定词汇的元素。 |
| [attribute|=value] | 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。 |
| [attribute^=value] | 匹配属性值以指定值开头的每个元素。 |
| [attribute$=value] | 匹配属性值以指定值结尾的每个元素。 |
| [attribute*=value] | 匹配属性值中包含指定值的每个元素。 |
注意：IE（一直到5.5版）不支持属性选择器。
2.近亲选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>笔记</title>
<style>
li+li{
color: red;
}
</style>
</head>
<body>
<ul>
14 <li id="html">HTML</li>
<li id="java">JAVA</li>
<li id="css">CSS</li>
</ul>
</body>
</html>
同胞元素：具有相同的父代。
近亲元素：如果源代码中第二个直接出现在第一个之后，那么它们就是近亲。
如上，具有id html和java的<li>是近亲元素，java和css的<li>是近亲元素，但是html和css的<li>不是近亲元素。
注意：近亲选择符对基于两个近亲的情况做出选择，但是它将声明的样式只应用于两个中的第二个。
因此，以上程序只有JAVA和CSS的字体变为红色，而HTML为默认颜色。
3.关于<dl>标签，近亲选择符用于添加或者删除边框，填充和边框。
<dl> 标签定义了定义列表（definition list）。
<dl> 标签用于结合 <dt> （定义列表中的项目）和 <dd> （描述列表中的项目）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>笔记</title>
<style>
body{color:#969;}
h1{font-size: 15px;}
dd+dt{
margin-top: 10px;
}
dd+dd{
font-style: italic;
font-size: 10px;
}
</style>
</head>
<body>
<h1>前端开发</h1>
<dl>
<dt>HTML</dt>
<dd>hypertext markup language</dd>
<dd>see also:XHTML</dd> <dt>CSS</dt>
<dd>cascading style sheets</dd>
<dd>css</dd> <dt>WWW</dt>
<dd>world wide web</dd>
</dl>
</body>
</html>
CSS_高级选择符的更多相关文章
- CSS高级选择符
2016-11-07 <css入门经典>第八章 1.属性选择器 选择器 描述 [attribute] 用于选取带有指定属性的元素. [attribute=value] 用于选取带有指定属性 ...
- Javascript高级编程学习笔记（46）—— 选择符API
选择符API 在DOM1中DOM只提供了 getElementById.getElementsByTagName 两种获取文档元素的方法 很多时候这两种方法往往不能较为方便地获取我们所需要的元素 所以 ...
- CSS_选择符
2016-10-28 <CSS入门经典>第五章 以下提示注意事项: 1.如何选择使用id选择符还是class选择符:当确信id选择符在页面的唯一性时,就可以使用id选择符. 2.通用选择符 ...
- 30个你必须记住的CSS选择符
所以你学会了基础的id,类和后代选择符,然后你就一直用它们了吗?如果是这样,你丢失了(css的)巨大的灵活性.在本文中提到的很多选择器属于CSS3规范的一部分,因此,只有在现代浏览器中才可使用. 1. ...
- [css选择器]总结：IE6不支持的CSS选择符
转载地址:https://www.wenjiwu.com/doc/zvsbii.html.此文最后也给出了原文地址,但是我点击过去发现是什么赌博彩票的地址,360也弹出小心的提示,所以这里只给出了我转 ...
- CSS基础篇之选择符2
属性选择符: 选择符 版本 描述 E[att] CSS2 选择具有att属性的E元素. E[att="val"] CSS2 选择具有att属性且属性值等于val的E元素. E[at ...
- CSS基础篇之选择符
关系选择符 E F 包含选择符(Descendant combinator) CSS1 选择所有被E元素包含的F元素. <html> <head> <meta chars ...
- DOM扩展-Selectors API(选择符 API)、元素遍历
DOM扩展 对DOM的两个主要扩展是SelectorsAPI(选择符API)和HTML5 SelectorsAPI(选择符API)是由W3C发起制定的一个标准,致力于浏览器原生支持CSS查询,Sele ...
- html基本选择符的使用
一.选择符在运用在CSS设计样式时对HTML的指定有至关重要的作用! 二.研究 普通选择符: 1.类型选择符:它可以选择同一个类型的元素! 例如:h1,h2 { color: ...
随机推荐
- Temporal Action Detection with Structured Segment Networks (ssn)【转】
Action Recognition: 行为识别,视频分类,数据集为剪辑过的动作视频 Temporal Action Detection: 从未剪辑的视频,定位动作发生的区间,起始帧和终止帧并预测类别 ...
- jquery实时监听输入框值变化
在做web开发时候很多时候都需要即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感.而采用onchange时间又往往是在输入框失去焦点(onblur)时候触发,有时候并不能满足条 ...
- nginx error.log 提示 [error] 887#887: *58 FastCGI sent in stderr: "PHP message: PHP Warning: mysql_connect(): Headers and client library minor version mismatch. Headers:50556 Library:50637
0. 1.问题 1.1现象: nginx error.log 提示 [error] 887#887: *58 FastCGI sent in stderr: "PHP message: PH ...
- net core体系-web应用程序-4asp.net core2.0 项目实战（1）-9项目各种全局帮助类
本文目录 1. 前沿2.CacheHelper基于Microsoft.Extensions.Caching.Memory封装3.XmlHelper快速操作xml文档4.SerializationHe ...
- Python 面向对象1-面向对象介绍
一.无论用什么形式来编程,我们都要明确记住以下原则: 1.写重复代码是非常不好的低级行为 2.你写的代码需要经常变更,写代码一定要遵循易读,易改的原则 3.函数编程与OOP(面向对象)的主要区别就是O ...
- vue中的provide/inject的学习使用
irst:定义一个parent component ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <template> <div> ...
- BZOJ4566 [Haoi2016]找相同字符 字符串 SAM
原文链接https://www.cnblogs.com/zhouzhendong/p/BZOJ4566.html 题目传送门 - BZOJ4566 题意 给定两个字符串 $s1$ 和 $s2$ ,问有 ...
- BZOJ1433 [ZJOI2009]假期的宿舍 二分图匹配 匈牙利算法
原文链接http://www.cnblogs.com/zhouzhendong/p/8372785.html 题目传送门 - BZOJ1433 题解 我们理一理题目. 在校的学生,有自己的床,还可以睡 ...
- docker删除名字为none的imgae
docker rmi $(docker images -f "dangling=true" -q)
- 数学建模：2.监督学习--分类分析- KNN最邻近分类算法
1.分类分析 分类(Classification)指的是从数据中选出已经分好类的训练集,在该训练集上运用数据挖掘分类的技术,建立分类模型,对于没有分类的数据进行分类的分析方法. 分类问题的应用场景:分 ...