[04] css 选择器
1.元素选择器
常见的html标签元素
h1 {
color: red;
}
body {
background: red;
}
2.分组选择器
例如body和h2标签的字体颜色都是red,使用逗号将其隔开。
body, h1 {
color: red;
}
3.通配符选择器
* {
color: red;
}
4.类选择器
在html标签中使用class属性,然后使用样式属性。
<a class="customClassName1'>hello,world</a>
<a class="customClassName2'>hello,world</a>
<a class="nameOne nameTwo">hello,world</a>
样式表:
.customClassName1 {
color: red;
background: blue;
}
a.customClassName2 {
font-weight: bold;
}
.nameOne.nameTwo {
background: silver;
} //不能匹配到,没有nameThree
.nameOne.nameThree {
font-weight: bold;
}
5.Id 选择器
id选择器前面使用#。id是html元素唯一标识符
<a id="customId">hello, use id selector</a>
css文件
#customId {
font-size: 12px;
}
6.属性选择器
通过标签属性来设置样式。两种方式:
1.具体属性名称的值,属性值需要全值匹配:标签名[属性名=‘属性值’]
2.属性名称: 标签名[属性名]
<a name="attrName">hello, world</a>
<a name="attrName2">hello, world</a>
css样式:
a[name] {
background: red;
}
a[name="atriName2"] {
background: red;
}
7.文档结构方面选择器
7.1 后代选择器
html是文档结构模型的,都有父子节点。可以通过节点关系进行选择。
<div>
<h1>1</h1>
<span>
<b>2</b>
</span>
</div>
css编写:
div h1 {
color: red;
}
div span b {
color: blue;
}
7.2 选择子元素
<div>
<h1>this is first h1</h1>
<h2>this is second h2</h2>
</div>
子元素css
div > h1 {
font-weight: bold;
}
7.3 选择相邻兄弟元素
<div>
<h1 class="target">1</h1>
<h2 class="getTarget">2</h2>
<div>
css:
.target + .getTarget {
color: red;
}
8 伪类和伪元素
8.1 a链接伪类
a链接相关的伪类有5个:
a.静态伪类: :link , :visited
b.动态伪类 : :focus, :hover , :active
使用顺序一般为: link - visited - focus- hover - active
8.2 选择第一个子元素
<div>
<h1>first </h1>
<h2>second</h2>
<div>
css:
div:first-child {
color: red;
}
8.3 伪元素选择器
<p>first line</p>
<p>first letter</p>
css:
//a. 设置首字母样式
p:first-letter {
font-size: 20px;
}
//b.设置首行
p:first-line {
color: purple;
}
[04] css 选择器的更多相关文章
- 04.CSS选择器-->相邻、通用兄弟选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 【网络爬虫入门04】彻底掌握BeautifulSoup的CSS选择器
[网络爬虫入门04]彻底掌握BeautifulSoup的CSS选择器 广东职业技术学院 欧浩源 2017-10-21 1.引言 目前,除了官方文档之外,市面上及网络详细介绍BeautifulSoup ...
- 深入理解CSS选择器优先级的计算
选择器的优先级关系到元素应用哪个样式.在CSS2.1的规范(http://www.w3.org/TR/2009/CR-CSS2-20090908/cascade.html#specificity)中是 ...
- CSS+DIV入门第一天基础视频 CSS选择器层叠性和继承性
大家好,我是小强老师, 现在网上的CSS+DIV视频,要么讲的太深,要么太浅,很多初学的同学们总是遇到困难,今天小强老师专门给大家准备了css课程的视频.带你从零基础学习CSS+DIV一直到能独立完成 ...
- Unit02: CSS 概述 、 CSS 语法 、 CSS 选择器 、 CSS声明
Unit02: CSS 概述 . CSS 语法 . CSS 选择器 . CSS声明 my.css p { color: yellow; } demo1.html <!DOCTYPE html&g ...
- 前端04 /css样式
前端04 /css样式 目录 前端04 /css样式 昨日内容回顾 css引入 选择器 基础选择器 组合选择器 属性选择器 伪类选择器 伪元素选择器 优先级(权重) 通用选择器 css样式 1高度宽度 ...
- 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
- css选择器
常用css选择器,希望对大家有所帮助,不喜勿喷. 1.*:通用选择器 * { margin: 0; padding: 0; } 选择页面上的全部元素,通常用于清除浏览器默认样式,不推荐使用. 2.#i ...
- dynamic-css 动态 CSS 库,使得你可以借助 MVVM 模式动态生成和更新 css,从 js 事件和 css 选择器的苦海中脱离出来
dynamic-css 使得你可以借助 MVVM 模式动态生成和更新 css,从而将本插件到来之前,打散.嵌套在 js 中的修改样式的代码剥离出来.比如你要做元素跟随鼠标移动,或者根据滚动条位置的变化 ...
随机推荐
- Sql Server 表间对应关系
<1>.关联映射:一对多/多对一 存在最普遍的映射关系,简单来讲就如球员与球队的关系:一对多:从球队角度来说一个球队拥有多个球员 即为一对多多对一:从球员角度来说多个球员属于一个球队 即为 ...
- 3,jieba gensim 最好别分家之最简单的相似度实现
简单的问答已经实现了,那么问题也跟着出现了,我不能确定问题一定是"你叫什么名字",也有可能是"你是谁","你叫啥"之类的,这就引出了人工智能 ...
- Git 查看远程分支、本地分支、删除本地分支及远程分支
1. 删除本地分支: git branch -d branchName 2. 删除远程分支: // 方法一:将删除的本地分支推到远程(要删除的远程分支在本地有映射) git push origin : ...
- Windows2008新建域时Administrator 帐户密码不符合要求
Windows 2008 系统安装完毕后,(环境:在安装的时间,系统没有设置密码.做好系统后,进入制面板添加了密码或按ctrl + alt + del 设置密码后 在服务器管理-角色 ...
- Datetime与Datetime2的区别
Datetime: 时间格式,对应于数据库中的DateTime类型,对应于.NET里面的System. DateTime类型.DateTime支持日期从1753年1月1日到9999年12 ...
- BeyondCompare3 提示许可证密钥已被撤销解决方法
今天对比文件提示 许可证密钥已被撤销:3281-0350! 找过了几个注册码还是不行. 正确简单的解决方法: 1.找到 BCState.xml 文件 2.编辑器打开,删除<TCheckFor ...
- 「题目代码」P1029~P1033(Java)
1029 C基础-求解方程 import java.util.*; import java.io.*; import java.math.BigInteger; public class Main { ...
- 护网杯 three hit 复现(is_numeric引发的二次注入)
1.题目源码 https://github.com/ZhangAiQiang/three-hit 题目并不真的是当时源码,是我根据做法自己写的,虽然代码烂,但是还好能达到复现的目的 ,兄弟们star一 ...
- python自动化之BDD框架之lettuce初识问题集
最近在学习虫师老师编写的python自动化的书.其中讲到了BDD结构lettuce入门一章. 因为是小白,按部就班地进行操作,先不谈执行操作如何,先来讲讲遇到的几个坑,和怎么解决的: 第一坑:pyth ...
- 阿里云ECS下基于Centos7.4安装MySQL5.7.20
1.首先登录阿里云ECS服务器,如下图所示: 2.卸载MariaDB 说明:CentOS7.x默认安装MariaDB而不是MySQL,而且yum服务器上也移除了MySQL相关的软件包.因为Maria ...