css 元素选择器
子元素选择器
h1 > strong {color:red;}
//这个规则会把第一个 h1 下面的两个 strong 元素变为红色,但是第二个 h1 中的 strong 不受影响: <h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
后代选择器(descendant selector)又称为包含选择器
h1 em {color:red;}
//上面这个规则会把作为 h1 元素后代的 em 元素的文本变为 红色。其他 em 文本(如段落或块引用中的 em)则不会被这个规则选中:
<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>
通用兄弟选择器
位置无须紧邻,只须同层级,A~B
选择A
元素之后所有同层级B
元素。
p ~ span {
color: red;
} <span>This is not red.</span>
<p>Here is a paragraph.</p>
<code>Here is some code.</code>
<span>And here is a span.</span> //This is not red. Here is a paragraph. Here is some code.And here is a span.
相邻兄弟选择器
li:first-of-type + li {
color: red;
} <ul>
<li>One</li>
<li>Two!</li>
<li>Three</li>
</ul> //One
Two!
Three
css 元素选择器的更多相关文章
- css元素选择器
css的元素选择器就是html的标签名:
- css 元素选择器实例
一个完整的HTML页面是有很多不同的标签组成,而标签选择器,则是决定哪些标签采用相应的CSS样式.本文章向码农介绍css 标签/元素选择器以及其实例,需要的码农可以参考一下. [标签选择器] 一个完整 ...
- CSS元素选择器 element selector(type selector)
http://www.w3school.com.cn/css/css_selector_type.asp 元素选择器 最常见的 CSS 选择器是元素选择器.换句话说,文档的元素就是最基本的选择器. 如 ...
- css元素选择器 first-child nth-child
E:first-child 只要E元素是它的父级的第一个子元素,就选中.它需要同时满足两个条件, (1)是"第一个子元素", (2)是"这个子元素刚好是E ...
- CSS概述<选择器总结>
概述:CSS是指层叠样式表,他是定义如何显示HTML元素,样式表通常存储在样式表中,通常存储在.css文件中,下面对css的选择器进行总结,便大家夯实基础! 1 语法规范: 每个样式规则有两个部分:选 ...
- CSS之元素选择器
1.后代元素选择器 div p 以空格分隔,表示div的所有后代p元素 2.子元素选择器 div > p 以大于号分隔,表示div的直接子元素 3.相邻兄弟选择器 div + p 选择紧接在d ...
- css伪类选择器及伪元素选择器
1.类选择器 在css中可以使用类选择器把相同的元素定义成不同的样式.比如: 结果如下: 标题背景未变 2.伪类选择器 类选择器和伪类选择器的区别在于,类选择器我们定义的,而伪类选择器是CSS中已经定 ...
- CSS中模拟父元素选择器
很多情况下,我们需要找到父元素,但可惜的是css中并没有这样的一个选择器. 至于原因可以看张鑫旭的如何在CSS中实现父选择器效果这篇文章. 简单来说这个实现并不是真正的父元素选择器,只是利用其它思路来 ...
- css伪元素选择器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
随机推荐
- 吴裕雄--天生自然java开发常用类库学习笔记:观察者设计模式
import java.util.* ; class House extends Observable{ // 表示房子可以被观察 private float price ;// 价钱 public ...
- Linux学习-预习第五六七章节关于用户权限管理以及磁盘文件系统
- UVA - 536 Tree Recovery (二叉树重建)
题意:已知先序中序,输出后序. #pragma comment(linker, "/STACK:102400000, 102400000") #include<cstdio& ...
- mapper.xml实现oracle的分页语句
当我们用常规方法进行分页查询时,虽然在数据库可以分页查询出来数据, 如下语句 <!-- 分页查询所有 --> <select id="findAllPage" r ...
- 洛谷 P2549 计算器写作文
题目传送门 解题思路: 背包,f[i]表示计算器位数为i时,可获得的最大分值. 本题与01背包不同的地方在于,物品的摆放顺序对答案是有影响的,例如两个字符串a,b,那么就会出现a+b和b+a两种情况( ...
- 开源DDD设计模式框架YMNNetCoreFrameWork第6篇-.net Core Logging和Nlog结合
源码地址:https://github.com/topgunymn/YMNNetCoreFrameWork 遇到的坑:使用了Nlog以后,.NETcore自带的日志等级不起作用,只有nlog配置配置文 ...
- 158-PHP strstr函数输出第一次出现字符串的位置到字符串结尾的所有字符串
<?php $str='PHP is a very good programming language!'; //定义一个字符串 echo '第一次出现字母l的位置到字符串结尾的所有字符串'.s ...
- 13 装备的添加和移除(Unity3D)
本案例主要实现功能如下:1.创建UI界面,包含两个装备栏,四个武器选择栏以及显示人物的属性的文本框2.每一个装备都有自己的属性(AD/AP/AR/MP)3.人物也有自己的基础属性(AD/AP/AR/M ...
- 2.2 学习总结 之 servlet 的两次抽取
说在前面 昨天 完成了文件上出的学习和实践 今天 学习servlet的两次抽取,以加快编写工程的速度 一.servlet 抽取的原因: 刚刚学习使用servlet写后台,往往只使用一个servlet来 ...
- JS - 使 input 失去焦点
$(document).ready(function(){ $("body").click(function(){ if(!event.srcElement.type) { ...