html的css样式中表示后代选择器,html添加css——样式选择器
如何给html添加样式。两种方法:css
1、新创建一个css样式表,与原html同目录,而后经过link标签连接。如:(link标签是一个void元素,无结束标签。)html
2、直接在html源码中使用style标签。如:,style标签嵌入head中。spa
html中插入style,则会涉及到五种样式选择器。code
一、元素选择器,给某一元素添加样式htm
以下:p元素与h1元素内的文本应用大括号内的样式文档
p,h1{color:grey;it
background-color:red;class
font-family:sans-serif;}import
二、类选择器,class属性
在
如:
.blue-text{color:black;}
注意,在CSS样式元素中,类选择器应该添加.为前缀。而在HTML元素的类声明中,类属性不能添加.为前缀。
类选择器不必定只针对某一标签,只要元素应用了class标签,则就使用此css类。
三、id属性设置样式
与class相似,为元素定义一个id,给id建立一个声明。例:
#important{color:black;}
注意:与class不一样的是,在css样式元素中,应添加#为前缀,html中没有前缀。一个id对应一个css属性。
四、属性选择器,选择某个元素应用样式
如:*[title]{color:red;}
全部包含title属性的元素均可应用以上样式。
五、后代选择器又称为包含选择器。后代选择器能够选择做为某元素后代的元素。
根据上下文选择元素
能够定义后代选择器来建立一些规则,使这些规则在某些文档结构中起做用,而在另一些结构中不起做用。
举例来讲,若是但愿只对 h1 元素中的 em 元素应用样式,能够这样写:
h1 em {color:red;}
上面这个规则会把做为 h1 元素后代的 em 元素的文本变为 红色。其余 em 文本(如段落或块引用中的 em)则不会被这个规则选中:
This is a important heading
This is a important paragraph.
再好比说:一个div元素中 要对其中一个元素进行样式改变,好比h2,由于在前面有一个类已经定义了全部h1.h2的样式,而h2又有一部分留在div中,
因此不容许直接对上面的class类中的h1和h2进行样式改变。于是可使用后代选择器:div h2{}
附:p>em{color;red;}表示紧挨着p的em元素使用此样式。
p+em{}与p元素紧邻的em元素使用此样式。
h1+p{}h1后面紧邻的p应用此样式。
html的css样式中表示后代选择器,html添加css——样式选择器相关推荐
- html的css样式中表示后代选择器,css样式,后代选择器
css介绍 CSS(层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). css语法(下图所示) 每个CS ...
- vue样式中背景图片路径_vue打包css文件中背景图片的路径问题
vue-cli写完的静态页面我们在node环境中引入没有问题,但是打包后放在Apache环境下,路径却有问题了 如一个简单css语句 .all_bg { background: url(../imag ...
- 表格内容居中css样式,css表格中的内容如何居中?css表格中的文本样式介绍
你知道css表格的内容太是如何居中的吗?你知道css表格的文本如何设计左对齐吗?你知道css表格如何设置右对齐吗?这些内容都在这篇文章之中等着你来学习了. 首先我们先介绍css表格中的内容是如何居中的 ...
- 修改element组件库中Cascader级联选择器下拉列表的默认样式
在保证不影响其他页面中Cascader样式的情况下(首先就不能删除scoped),如果css用到less预处理器,想到的第一个解决办法就是用深度选择器">>>" ...
- CSS样式中” 大于号”
CSS样式中" 大于号" 在一段CSS代码中见到一个大于号(>),代码如下: BODY#css-zen-garden > DIV#extraDiv2 { BACKGRO ...
- css内注释,css文件中如何注释?
在DIV+CSS网页中时常使用html注释与css注释,而各种注释大多作用是在重要代码处加上注释说明注明意思.下面我们来看一下css中如何注释. CSS注释语法为:/* 注释内容 */ 注释是以&qu ...
- html:(27):类和ID选择器的区别和子选择器
类和ID选择器的区别 学习了类选择器和ID选择器,我们会发现他们之间有很多的相似处,是不是两者可以通用呢?我们不要着急先来总结一下他们的相同点和不同点: 相同点:可以应用于任何元素 不同点: 1.ID ...
- Asp.net 后台添加CSS、JS、Meta标签
下面是从Asp.net 后台添加CSS.JS.Meta标签的写法,我们这里写成函数方便以后使用.如果函数放在页面类中, Page参数也可以不要. 首先导入命名空间 using System.Web.U ...
- WPF自定义控件与样式(5)-Calendar/DatePicker日期控件自定义样式及扩展
原文:WPF自定义控件与样式(5)-Calendar/DatePicker日期控件自定义样式及扩展 一.前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐 ...
最新文章
- Git中的AutoCRLF与SafeCRLF换行符问题
- 转:小城也有好去处(3):云南建水 - 丽江大理之后第三城
- 数据库:如果MySQl磁盘满了,如何解决!
- python类型和格式_json数据格式和python中字典的数据类型
- How to remove ROM cfg in MAME
- 开源中国 开源世界2018_2018年最受欢迎的报道:法律问题和开源社区
- 志高空调,到了最危险的时候!
- 名下房产、汽车、存款被查封后,王思聪要筹拍电影了...
- [转载] Python与其他语言结合的参数转换函数PyArg_ParseTuple()
- 番禺区天气预报软件测试,天气预报模块测试用例(P707)
- 【数据结构】顺序线性表的几种常用方法
- 设置Kafka集群的方法
- 【新书推荐】【2019.01】离散数学及其应用(第五版)
- Flutter 扩展NestedScrollView (一)Pinned头引起的bug解决
- 人工神经网络:径向基函数神经网络
- liunx检测上下行带宽及丢包率
- 1.2.1css简介
- 【机器学习】聚类算法DBSCAN、K-means、Mean Shift对比分析及具体代码实现
- 过敏体质也会遗传给孩子,孕期妈妈应该尽早预防
- aix服务器如何查看cpu信息,aix服务器查看cpu内存
热门文章
- 基于OpenGL编写一个简易的2D渲染框架-03 渲染基本几何图形
- 时间字符串与当前时间比較
- php对象当参数传递 php深复制和浅复制
- 机会是怎么变成陷阱的?
- Linux无盘教程,如何无盘启动Linux
- php运行ecshop,ecshop2.x代码执行
- python实现cc攻击_运维纪录:遭遇CC攻击,防御与查水表
- python爬取下拉列表数据_Python怎么爬取下拉式的网页?
- java 循环展开_Java在Debug的时候,有些变量能无限展开(循环了)?
- MindMotion ISP 协议 PDF版本