用过css的同志们都知道,选择器是非常重要的,如果选择器使用不当,即使你的css写的再好,但是不知道要用在哪个元素上,这不是英雄无用武之地吗?

css,用过的都说好!

最基本的选择器,id选择器,类选择器这些大家早已心知肚明的就不在这里赘述了,有那功夫赶紧研究一下把妹攻略.

伪类:

:link,:visited被称为链接伪类,只能被用在<a>标签上。:hover,:active,:focus称为动态伪类,可以用于任何元素。

属性选择器:

支持自定义属性
input[title=te]{color:red} /*属性选择器*/
input[other=wch]{color:blue}

层叠和特殊性

顺序:!important的用户样式 > !important的作者样式 > 作者样式 > 用户样式 > 继承 > 浏览器样式

css特殊性计算规则:
css特殊性分成4个等级;a,b,c,d
a表示 style样式;
b表示id选择器的数量;
c表示类、伪类和属性选择器的数量;
d表示类型选择器和伪元素选择器的数量。
由此计算出来的四位数abcd,值越大,优先级越高;
例如:
style=""  
值为1000
#wrapper #content {}
值为0200
div#content{}
值为0101
#conten{}
值为0100
p.comment .dateposted{}  值0021
div p{} 值为0002

如果两个规则的特殊性相同,那么定义的规则优先。

演示代码:

<!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学习笔记----选择器的更多相关文章

  1. CSS学习笔记——选择器

    选择器 当我们定义一条样式规则时候,这条样式规则会作用于网页当中的某些元素,而我们的规定的这些元素的规则就叫做选择器. 常用的选择器: 1.id选择器 #idname 2.类选择器 .classnam ...

  2. CSS学习笔记之选择器

    目录 1.元素选择器 2.继承 3.选择器分组 4.声明分组 5.后代选择器 6.子元素选择器 7.相邻兄弟选择器 8.类选择器 9.ID 选择器 10.属性选择器 11.伪类 12.伪元素 1.元素 ...

  3. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  4. HTML+CSS学习笔记 (6) - 开始学习CSS

    HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...

  5. CSS学习笔记08 浮动

    从CSS学习笔记05 display属性一文中,我们知道div是块元素,会独占一行,即使div的宽度很小,像下面这样 应用display属性的inline属性可以让div与div共享一行,除了这种方法 ...

  6. CSS学习笔记之基本介绍

    1.简介 层叠样式表(Cascading Style Sheets,CSS)允许我们把样式设置存储在文件中,从而将内容与表现分离 当同一个 HTML 元素被不只一个样式定义时,最终的样式确定顺序如下( ...

  7. 2022-07-10 第五小组 pan小堂 css学习笔记

    css学习笔记 什么是 CSS? CSS 指的是层叠样式表* (Cascading Style Sheets) CSS 描述了如何在屏幕.纸张或其他媒体上显示 HTML 元素 CSS 节省了大量工作. ...

  8. HTML+CSS学习笔记 (7) - CSS样式基本知识

    HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...

  9. HTML+CSS学习笔记(5)- 与浏览者交互,表单标签

    HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...

随机推荐

  1. poj——1330 Nearest Common Ancestors

    Nearest Common Ancestors Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 30082   Accept ...

  2. [bzoj1084][SCOI2005]最大子矩阵(DP)

    题目:http://www.lydsy.com:808/JudgeOnline/problem.php?id=1084 分析: m=1时:相当于只有一行数,让你取出p段,使得总和最大 明显可以DP,f ...

  3. Linux基本命令总结(初学者可以借鉴学习)

    Linux基本常用命令 个人在平时项目中用到的一些常规命令总结下 删除文件夹命令:rm -rf 目录名字 添加模式:按i 退出编辑模式:ese左上角键 首先先按esc退出进入一个模式然后再输入wq或者 ...

  4. Oracle RAC load blance

    首先声明 本文基本是阅读 大话RAC 后的笔记.OK, 进入正题. Oracle 10g RAC中采取两种方式提供负载均衡.第一种是connection blance.在用户连接的时候,根据随机算法把 ...

  5. linux高级技巧:集群之keepalived

    1.keepalived简单介绍         Keepalived是一个基于VRRP协议来实现的WEB服务高可用方案.能够利用其来避免单点故障.使用多台节点安装keepalived. 其它的节点用 ...

  6. Qt学习之QListWidget删除Item

    将QListWidgetItem从QListWidget列表中删除有两种方法能够做到.但也要依据自己的须要进行选择. 第一种是 QListWidgetItem *takeItem(int row); ...

  7. python 验证码 高阶验证

    python 验证码 高阶验证 标签: 验证码python 2016-08-19 15:07 1267人阅读 评论(1) 收藏 举报  分类: 其他(33)    目录(?)[+]   字符型图片验证 ...

  8. &lt;感悟帖&gt;互联网与电子传统行业之经历

    依据鄙人浅显的实习.毕业工作经验以及个人思考得此文. 鄙人有幸在BAT中的B实习,以及某电子行业科研机构工作,略有心得.总结例如以下.也算是对自己的一个交待和反省. 鄙人小硕毕业211学校非985,C ...

  9. 关于C语言指针的一些新认识(2)

    在使用C语言编程的过程中,遇到了很多关于指针使用的小问题,这里总结一下就当做是编程的小技巧啦 Q1. 如何用printf( )输出指针 这个问题相当于如何用printf( )输出地址,答案是:用"%p ...

  10. Modular_exponentiation模幂运算

    https://en.wikipedia.org/wiki/Modular_exponentiation 蒙哥马利(Montgomery)幂模运算是快速计算a^b%k的一种算法,是RSA加密算法的核心 ...