CSS学习笔记----选择器
用过css的同志们都知道,选择器是非常重要的,如果选择器使用不当,即使你的css写的再好,但是不知道要用在哪个元素上,这不是英雄无用武之地吗?
css,用过的都说好!
最基本的选择器,id选择器,类选择器这些大家早已心知肚明的就不在这里赘述了,有那功夫赶紧研究一下把妹攻略
.
伪类:
属性选择器:
input[title=te]{color:red} /*属性选择器*/
input[other=wch]{color:blue}
层叠和特殊性
值为1000
值为0200
值为0101
值为0100
演示代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style >
a:hover,input:hover{border-color:red;} /*伪类选择器*/
a:focus,input:focus{border-color:blue}
a:active,input:active{border-color:green}
a:link{border-color:#FFFF00}
a:visited{border-color:#FF33CC}
a + p{color:green} /*选择兄弟元素,无效好像*/
#nav>li{color:red !important;} /*改变特殊级别*/
#nav li{color:yellow}
#nav li *{color:green} /*通用选择器*/
input[title=te]{color:red} /*属性选择器*/
input[other=wch]{color:blue}
div#ttt{color:#CC0066}
</style>
</head> <body>
<a href="#" >wch</a>
<input type="text" value="12321" title="test" other="wch" />
<input type="text" value="12321" title="te" other="qqq" />
<input type="text" id="ttt" value="wch" />
<div id="ttt">test element#id</div>
<ul id="nav">
<li>h1</li>
<li>
<ul>123312
<li>x1</li>
<li>x2</li>
</ul>
</li>
<li>h3</li>
</ul>
</body>
</html>
CSS学习笔记----选择器的更多相关文章
- CSS学习笔记——选择器
选择器 当我们定义一条样式规则时候,这条样式规则会作用于网页当中的某些元素,而我们的规定的这些元素的规则就叫做选择器. 常用的选择器: 1.id选择器 #idname 2.类选择器 .classnam ...
- CSS学习笔记之选择器
目录 1.元素选择器 2.继承 3.选择器分组 4.声明分组 5.后代选择器 6.子元素选择器 7.相邻兄弟选择器 8.类选择器 9.ID 选择器 10.属性选择器 11.伪类 12.伪元素 1.元素 ...
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- HTML+CSS学习笔记 (6) - 开始学习CSS
HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...
- CSS学习笔记08 浮动
从CSS学习笔记05 display属性一文中,我们知道div是块元素,会独占一行,即使div的宽度很小,像下面这样 应用display属性的inline属性可以让div与div共享一行,除了这种方法 ...
- CSS学习笔记之基本介绍
1.简介 层叠样式表(Cascading Style Sheets,CSS)允许我们把样式设置存储在文件中,从而将内容与表现分离 当同一个 HTML 元素被不只一个样式定义时,最终的样式确定顺序如下( ...
- 2022-07-10 第五小组 pan小堂 css学习笔记
css学习笔记 什么是 CSS? CSS 指的是层叠样式表* (Cascading Style Sheets) CSS 描述了如何在屏幕.纸张或其他媒体上显示 HTML 元素 CSS 节省了大量工作. ...
- HTML+CSS学习笔记 (7) - CSS样式基本知识
HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...
- HTML+CSS学习笔记(5)- 与浏览者交互,表单标签
HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...
随机推荐
- poj——1330 Nearest Common Ancestors
Nearest Common Ancestors Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 30082 Accept ...
- [bzoj1084][SCOI2005]最大子矩阵(DP)
题目:http://www.lydsy.com:808/JudgeOnline/problem.php?id=1084 分析: m=1时:相当于只有一行数,让你取出p段,使得总和最大 明显可以DP,f ...
- Linux基本命令总结(初学者可以借鉴学习)
Linux基本常用命令 个人在平时项目中用到的一些常规命令总结下 删除文件夹命令:rm -rf 目录名字 添加模式:按i 退出编辑模式:ese左上角键 首先先按esc退出进入一个模式然后再输入wq或者 ...
- Oracle RAC load blance
首先声明 本文基本是阅读 大话RAC 后的笔记.OK, 进入正题. Oracle 10g RAC中采取两种方式提供负载均衡.第一种是connection blance.在用户连接的时候,根据随机算法把 ...
- linux高级技巧:集群之keepalived
1.keepalived简单介绍 Keepalived是一个基于VRRP协议来实现的WEB服务高可用方案.能够利用其来避免单点故障.使用多台节点安装keepalived. 其它的节点用 ...
- Qt学习之QListWidget删除Item
将QListWidgetItem从QListWidget列表中删除有两种方法能够做到.但也要依据自己的须要进行选择. 第一种是 QListWidgetItem *takeItem(int row); ...
- python 验证码 高阶验证
python 验证码 高阶验证 标签: 验证码python 2016-08-19 15:07 1267人阅读 评论(1) 收藏 举报 分类: 其他(33) 目录(?)[+] 字符型图片验证 ...
- <感悟帖>互联网与电子传统行业之经历
依据鄙人浅显的实习.毕业工作经验以及个人思考得此文. 鄙人有幸在BAT中的B实习,以及某电子行业科研机构工作,略有心得.总结例如以下.也算是对自己的一个交待和反省. 鄙人小硕毕业211学校非985,C ...
- 关于C语言指针的一些新认识(2)
在使用C语言编程的过程中,遇到了很多关于指针使用的小问题,这里总结一下就当做是编程的小技巧啦 Q1. 如何用printf( )输出指针 这个问题相当于如何用printf( )输出地址,答案是:用"%p ...
- Modular_exponentiation模幂运算
https://en.wikipedia.org/wiki/Modular_exponentiation 蒙哥马利(Montgomery)幂模运算是快速计算a^b%k的一种算法,是RSA加密算法的核心 ...