前端基础学习之CSS选择器
CSS基础之选择器
派生选择器
通过元素在其位置的上下文关系来定义样式,使标记更加简洁
派生选择器允许你根据文档的上下文关系来定义某个标签的样式,通过合理的使用派生选择器,可以是Html代码更加的简洁
代码示例:
li strong {font-style: italic;font-weight: normal;
}
在上面例子中,只有li元素中的strong元素样式为斜体字,无需为strong样式的元素定义特别的class或id,是代码更加的简洁
ID选择器
ID选择器可以为标有特定ID的HTML元素指定特定的样式,ID选择器以#
来定义
下面两个ID选择器分别定义了一个红色元素个一个绿色元素
#red {color:red;}
#green {color:green;}
下面的HTML代码中,分别定义了id为red的元素为红色,id为 green的元素为绿色
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>
在现代的布局中,id选择器常常用来建立派生选择器,虽然id选择器在页面中只能出现一次,但是作为id选择器的派生选择器也可以被使用很多次
代码示例:
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}#sidebar h2 {
font-size: 1em;
font-weight: normal;
font-style: italic;
margin: 0;
line-height: 1.5;
text-align: right;
}
在上面的代码中,页面中的p元素与在sidebar中的p元素是明显不同的,sidebar内的p元素得到的特殊处理,同时,h2 元素也是同样的道理,在sidebar中的元素h2是特殊处理的,与界面的其他h2元素是不同的
类选择器
在css中,类选择器以.
号显示,引用时,在元素后面加上class=类名
表示
.center {text-align: center}
在上面的例子中,所有拥有center类的Html元素文字均居中显示
<h1 class="center">
This heading will be center-aligned
</h1><p class="center">
This paragraph will also be center-aligned.
</p>
在代码中,元素h1和元素p都拥有center类,那就意味着两者都要遵守center类中的约束条件
同id选择器一样,类选择器也可用于派生选择器,用法与id选择器类似,不做过多的阐释,下面为代码示例:
td.fancy {
color: #f60;
background: #666;
}
在上面的代码中,类名为fancy的是橙色且背景为灰色的表格
<td class="fancy">
你可以将类fancy分配给任何一个表格元素多次,那些有fancy标注的表格元素都遵守fancy类的约束,而其他的则不受影响
属性选择器
对带有指定属性的html元素设置样式 ,而不仅限于class和id属性,
注释:只有在规定了 !DOCTYPE 时,IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中,不支持属性选择。
[title]
{
color:red;
}
上面的例子为带有所有title属性的元素设置样式
代码示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
[title]
{
color:red;
}
</style>
</head><body>
<h1>可以应用样式:</h1>
<h2 title="Hello world">Hello world</h2>
<a title="W3School" href="http://w3school.com.cn">W3School</a><hr /><h1>无法应用样式:</h1>
<h2>Hello world</h2>
<a href="http://w3school.com.cn">W3School</a>
</body>
</html>
前端基础学习之CSS选择器相关推荐
- div独占一行 html_web前端基础-HTML及CSS选择器
HTML及CSS选择器 一.html基本结构 二.html标签 1.标题标签 2.a标签 3.img标签 4.div和span标签 5.列表标签 6.表格标签 7.form表单 8.select下拉框 ...
- 前端基础学习——JavaScript之BOM模型与DOM模型
前面还有JavaScript基础介绍,有兴趣的朋友可以前往查看前端基础学习--带你夯实JavaScript基础 目录 一. BOM模型 1.1 BOM模型与DOM模型示意图: 1.2 浏览器窗口中的B ...
- 前端基础学习html部分小结
前端基础学习html部分小结 1 了解知识 1.1 网页的组成 html(Hyper Text Markup Language)指的是超文本标记语言,可以加入图片.声音.动画.多媒体等内容.还可以从一 ...
- iframe跨域调用js_郑州Web前端基础学习之JS跨域知识梳理
JS是Web前端开发三要素之一,是郑州Web前端基础学习中非常重要的知识点.JS涉及的知识点多且杂,很多同学反映不知如何下手,事实上,只要你认真记.多练习,就可以慢慢掌握它.今天千锋郑州Web前端培训 ...
- 【前端基础】12.CSS 基础知识学习——基本语法结构
视频 目录 一,css基本规则规范 1.快捷方式 2.css注释 3.css命名规范 4.css书写规范 (1)空格规范 (2)选择器规范 (3)属性规范 5.css样式规则 二,字体样式 1.fon ...
- 前端基础知识总结---CSS篇
本部分主要是笔者在复习 CSS 相关知识和一些相关面试题时所做的笔记,如果出现错误,希望大家指出! 目录 1.介绍一下标准的 CSS 的盒子模型?低版本 IE 的盒子模型有什么不同的? 2.CSS 选 ...
- 16.JAVA之前端,HTML,CSS(选择器,盒子模型),JS,JQuery,Json,ajax
一.Web前端技术栈 1.HTML超文本标记语言 实现页面展现,形成静态网页 2.CSS层叠样式表 实现页面美化 3.JS javascript脚本语言 实现 ...
- WEB前端基础(HTML+CSS+JavaScript)(上)最好看最详细的笔记~
WEB前端基础 当前部分是基于HTML与CSS总结,后续有JavaScript更新~ 文章目录 WEB前端基础 一.HTML概述(阶段1 入门概述) 1.HTML 二.第一个HTML页面 1.HTML ...
- 前端基础02:CSS
学习路线 什么是CSS CSS怎么用 (快速入门) CSS选择器 (重点 + 难点) 美化网页 (文字,阴影,超链接,列表,渐变-) 盒子模型 浮动 定位 网页动画 (特效效果) 一.什么是CSS C ...
- jquery奇偶选择器_jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
对此,我把CSS3标准中nth-child()用法大致介绍下: CSS3伪类选择器:nth-child() 简单的归纳下nth-child()的几种用法. 第一:nth-child(number) 直 ...
最新文章
- 机器学习的出现,是否意味着“古典科学”的过时?
- 如何用html制作心,html – 如何创建CSS心脏? /为什么这个CSS创造一个心脏的形状?...
- hdu 4417 Super Mario(可持久化线段树)
- MFC 单文档的全局变量
- STM32F4 HAL库开发 -- STM32CubeMX
- 学成在线--22.课程营销
- 【数论】nefu119 组合素数
- hdu2122 poj2485 最小生成树
- 微信小程序学习笔记③——wxml+wxss+js基础入门[样例+解析]
- Torvalds的linux
- 智能家居到智慧家庭-由远程操作设备到家庭智慧服务
- 电脑重装Win10如何选择32位和64位的系统
- STM32学习之智能灯的实现 (STM32F103C8)
- 【论文泛读】 Deep Learning 论文合集
- 元的符号在计算机怎么打出来,元的符号怎么打出来,各种特殊符号的输入方法...
- 电商入门:高手怎么去应用QQ云控引流轻松月入十万?
- [乐意黎原创] 左右格式的3D电影怎么播放
- 复旦大学桂韬:当NLP邂逅Social Media--构建计算机与网络语言的桥梁
- 图片木马---web渗透学习
- 微信小程序使用腾讯视频插件-uniapp-详细篇(2022.1.27)