定义选择器

20.1ID与类(class)
1.id是唯一的,类是多项的
2.id选择器:
适合所有h2标题
h2{
color:#333;
font-size:16px;
}
只适合title的h2标题
h2#title{
color:#eee;
}
3.结合多个class和id
ul#drinks{
color:red;
}
.mis{
color:green;
}
.hot{
color:yellow;
}

<ul id="drinks">
<li class="mis"></li>
<li class="mis"></li>
<li class="hot"></li>
</ul>
4.利用class改写基本样式:
p{
color:red;
}
.bleached{
color:green;
}

20.2层叠
外部链接:
<link rel="stylesheet"type="text/css"href="css/one.css">
two
three
导入样式:
@import url(“one.css”)
two
three
越晚给的规则越重要

20.3分组
h1{
font-family:宋体,隶书;
link-height:140%
color:red;
}
h2{
font-family:宋体,隶书;
link-height:140%
color:red;
}
h3{
font-family:宋体,隶书;
link-height:140%
color:red;
}

20.4继承
h1{
color:red;
}
<h1>xxx<i>xxxx</i></h1>
从body继承
body{
margin:10px;
color:red;
}

20.5上下文选择器
h1{
color:red;
}
i{
color:green;
}
使用上下文选择器
h1 i{
color:red;
}

20.6子;类选择器
.box{
color:red;
}
.box1{
font-weight:bold;
}
.box2{
font-style:italic;
}
<div class="box">box</div>
<div class="box1">box1</div>
<div class="box2">box2</div>

20.7其他选择器
类型选择器:
p{
color:black;
}
a{
text-decoration:underline;
}
h1{
font-weight:bokl;
}
后代选择器:
h2 i{
color:red;
}
li a{
text-decoration:none;
}
#main h1{
color:red;
}
伪类:
a:link{
color:green;
}
a:visited{
color:green;
}
a:hover,a:active{
color:red;
}
input:focus{
background-color,yellow;
}
通用选择器:
*{
padding:0;
margin:0;
}

时间: 2025-01-13 05:21:26

定义选择器的相关文章

站在CSS3的肩上定义选择器

按上下文选择元素 按祖先元素选择要格式化的元素 输入ancestor,这里的ancestor是希望格式化的元素的祖先元素的选择器. 输入一个空格(必不可少). 如果需要,对后续的每个祖先元素重复第(1)和 (2)步. 输入descendant,这里的descendant是要格式化的元素的选择器. 按父元素选择要格式化的元素 输入parent,这里的parent是包含直接格式化的元素的选择器. 输入>(大于号). 如果需要,对后代每个父元素重复第(1)步和第(2)步. 输入child,这里的chi

CSS学习(八)——定义选择器

ID定义型与class定义型排版样式 (1) 对于ID定义型,每个ID在页面中只能用一次.尽管一个ID在页面内多次使用也能实现效果,但是这样写不规范.如果同一个样式页面内多次使用,应该用class定义型. (2) ID可与标记定义型结合使用,例子: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio

20, CSS 定义选择器

1. ID 与类 2. 层叠 3. 分组 4. 继承 5. 上下文选择器 6. 子类选择器 7. 其他选择器 8. 结构与注释 20.1 ID 与类 选择器是用于控制页面设计的样式.即 ID 选择器何类选择器. 一直以来,许多开发人员经常将 ID 与类混淆,或者不能正确的使用这两种选择器,或者简 单的认为是一个代替另一个.这种认知是及其错误的. (1). 应用 ID 每个 ID 在一个页面中只能使用一次,作为某个元素的唯一标识符 . 一般情况下,ID 只 用于页面的唯一元素,如页眉,主导航条 ,

CSS定义选择器

ID与类 层叠 分组 继承 上下文选择器 子类选择器 其他选择器 结构与注释 20.1 ID与类 选择器是用于控制页面设计的样式.即ID选择器何类选择器. 一直以来,许多开发人员经常将ID与类混淆,或者不能正确的使用这两种选择器,或者简单的认为是一个代替另一个.这种认知是及其错误的. (1).应用ID 每个ID在一个页面中只能使用一次,作为某个元素的唯一标识符.一般情况下,ID只用于页面的唯一元素,如页眉,主导航条,布局区块等. 示例:<p id="hightlight">

CSS样式与选择器

CSS构造块的样式: 1.  h1{color:red;background-color:yellow} 其中:h1是选择器,花括号内是声明部分.多个声明之间用分号隔开. 2.为样式规则添加注释:/*...*/.注意不能将一个注释嵌套在另一注释中.如:/*这样做/*是不对的*/因为嵌套在外层注释内*/.注释可以放在样式规则内部.如:img{border:4px solid red;/*margin-right:12px;*/} ,浏览器会显示的只有border样式,因为margin-right

类jquery选择器

用过jquery的人都会觉得jquery中的选择器$相当的方便吧,相比javascript自带的document.getElementById要灵活得多,但是并不是所有的项目都需要用到jquery这个库,但是我们又想要用到它的选择器,怎么办呢?最好的办法就是自己实现一个类似功能的函数.代码如下: function $findChilds(parentNode, text) { //如果不传入父节点的话,默认为body if(parentNode == undefined) parentNode

模仿jquery框架源码 -成熟---选择器

<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .red { color: red; } </style> </head> <body> <div class=

web前端篇:CSS使用,样式表特征,选择器

目录 web前端篇:CSS使用,样式表特征,选择器 1.CSS介绍 2.CSS使用 3.样式表特征 4.CSS选择器 5.选择器的优先级 6.练习题: web前端篇:CSS使用,样式表特征,选择器 1.CSS介绍 CSS :Cascading Style Sheet 层叠样式表 作用 :修饰和美化页面元素,实现网页排版布局 2.CSS使用 1行内样式/内联样式 特点 :在具体的标签中使用style属性,引入CSS样式代码 语法: CSS 样式声明 / 语句: 对当前元素添加样式 语法:CSS 属

前端之CSS介绍

一.CSS简介 介绍 css我们称呼层叠样式表(英文全称:Cascading Style Sheets).它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化.如果html是一个人,那么CSS就相当于衣服,有了它我们可以让HTML样式丰富多彩. 语法 css语法主要由两部分组成:选择器和声明.选择器通常是您需要改变样式的 HTML 元素.每条声明由一个属