关于css选择器的那些事

当前位置 : 首页 > 网页制作 > CSS > 关于css选择器的那些事

关于css选择器的那些事

来源: 作者: 时间:2016-01-25 10:02
介绍css选择器之前,首先让我们来认识一下csscss层叠样式表,作为网页排版神器不断被web前端学者们推崇着。。。为何这么叼!接下来就让我们来会会这个叼哥吧。。1、CSS的特点 HTML
  介绍css选择器之前,首先让我们来认识一下css
 
css——层叠样式表,作为网页排版神器不断被web前端学者们推崇着。。。
 
为何这么叼!接下来就让我们来会会这个叼哥吧。。
 
 
 
1、CSS的特点   
 
HTML 排版时的缺点:   
 
  设置麻烦,修改麻烦,功能严重不足.   
 
CSS 样式排版的优点:   
 
  排版属性功能完整,排版文件可以独立存在,可以共用排版文件   
 
CSS 样式排版的分类:   
 
  内联排版样式,内嵌式排版样式,外链排版
 
2、CSS的排版样式
 
行内排版样式:
 
格式:<标记名称 style=”属性 1:属性值 1;属性 2:属性值 2”>…</标记名称>
 
例:<p style=”font-size:20pt;color:red;text-align:center”>排版样式</p>
 
内嵌排版样式:
 
内嵌式排版中所有的样式定义都必须在<style>..</style>之间,而<style>..</style>又 必须在<head>..</head>之间.
 
与其功能,又可以分为三种,
 
1.标记定义型
 
2.class 定义型
 
3.id 定义型
 
标记定义型格式:
 
<head>
 
  <style type=”text/css”>   
 
    标记名称{属性 1:属性值 1;属性 2:属性值 2;}   
 
    标记名称{属性 1:属性值 2;属性 2:属性值 2;}
 
  </style>
 
</head>
 
<body>
 
  <标记名称>…</标记名称>
 
</body>
 
class 定义型格式:
 
<head>
 
  <style type=”text/css”>   
 
    .定义名称{属性 1:属性值 1;属性 2:属性值 2;}   
 
    .定义名称 1,.定义名称 2{属性 1:属性值 1;属性 2:属性值 2;}
 
  </style>
 
</head>
 
<body>   
 
  <标记名称 class=”定义名称”>…</标记名称>
 
</body>
 
id 定义型格式:
 
<head>
 
  <style>   
 
    #定义名称{属性 1:属性值 1;属性 2:属性值 2;}   
 
    #定义名称 1,#定义名称 2{属性 1:属性值 1;属性 2:属性值 2;}
 
  </style>
 
</head>
 
<body>   
 
  <标记名称 id=”定义名称”>…</标记名称>
 
</body>
 
外部排版样式定义:
 
独立的样式排版:   
 
标记名称{属性 1:属性值 1;属性 2:属性值 2;}   
 
.定义名称{属性 1:属性值 1;属性 2:属性值 2;}
 
在<head>…</head>之间使用<link> 格式:
 
<head>   
 
  <link rel=”stylesheet” type=”text/css” href=URL />
 
</head>
 
在<head>…</head>之间使用 import 格式:
 
<head>
 
  <style type="text/css">
 
[email protected] "style.css"
 
  </style>
 
</head>
 
 
 
 
 
介绍完CSS排版样式之后。。。。接下来就让我们来看看CSS中那些个强大的选择器吧
 
1、通配符选择器,也叫全体选择器——(作用于整个网页)
 
*{
 
font-size:13px;
 
font-family:"微软雅黑","华文楷体";
 
}
 
2、元素选择器
 
p,h1,h2,h3,a{
 
font-size:13px;
 
}
 
3、ID与类
 
选择器是用于控制页面设计的样式.包含 ID 选择器和类选择器. 一直以来,许多开发人员经常将 ID 与类混淆,或者不能正确的使用这两种选择器,或者简 单的认为是一个代替另一个.这种认知是及其错误的.
 
(1).应用ID
 
每个 ID 在一个页面中只能使用一次,作为某个元素的唯一标识符.一般情况下,ID 只 用于页面的唯一元素,如页眉,主导航条,布局区块等.
 
示例:<p id=”hightlight”>This paragraph has red text.</p>
 
相应的 CSS 代码:
 
#hightlight{ color:#FFFFFF; }
 
(2).将 ID与选择器结合
 
/*适合所有 h2 标题*/
 
h2{ color:#333; font-size:16px; }
 
/*只适合 title 的 h2 标题*/
 
h2#title { color:#eee; }
 
相应的 HTML 代码:
 
<h2>Title Of My Article</h2>
 
<h2 id=”title”>Title Of My Article</h2>
 
(3).ID的使用场合
 
对于每个 ID,每个页面只能有一个元素使用该样式,因此 ID 应该为每个页面唯一存 在并仅使用一次的元素不保留,
 
(4).避免使用 ID的场合 当一个以上的地方需要使用同一 CSS 规则时,不应该使用 ID.
 
(5).应用类 类可以无限次的使用,因此它是应用 CSS 的非常灵活的方法.
 
<p class=”hightlight”>his paragraph has red text.</p>
 
相关 CSS 代码:
 
.hightlight {color:FFFFFF; }
 
(6).结合多个类和 ID 范例:
 
<ul id=”drinks”>
 
  <li class=”mix”>Beer</li>
 
  <li class=”mix”>Spirtis</li>
 
  <li class=”hot”>Cola</li>
 
  <li class=”hot”>Lemonade</li>
 
</ul>
 
相应的 CSS 代码:
 
ul#drinks { color:FF6600; }
 
.mix { Color:#999999; }
 
.hot { Color:#333333; }
 
(7).利用类改写基本样式:
 
p{Color:#ff6600; }
 
.bleached {Color:#ccc; }
 
相应的 HTML 代码:
 
<p>This paragraph has red text.</p>
 
<p class=”bleached”>This paragraph has red text.</p>
 
(8).直接将类链接到元素上
 
p.bleached {color:red; }
 
相应的 HTML 代码:
 
<p class=”bleached”>This paragraph has red text.</p>
 
(9).对于 class,如果多次重复使用或者使用子类选择器,那么就选择 class,如果是定义 唯一性的标记,比如布局,那么用 id。
 
4、 层叠
 
(1).外部链接实现层叠
 
<link rel=”stylesheet” type=”text/css” href=”css/one.css”>
 
<link rel=”stylesheet” type=”text/css” href=”css/two.css”>
 
<link rel=”stylesheet” type=”text/css” href=”css/three.css”>
 
(2).导入样式实现层叠
 
@import url(“one.css”)
 
@import url(“two.css”)
 
@import url(“three.css”)
 
注意点:必须牢记一个规则,越晚给的规则越重要.
 
5、 分组
 
h1{
 
  Font-family:隶书,宋体,楷体;   
 
  Line-height: 140%;   
 
  Color:#333;
 
}
 
h2{   
 
  Font-family:隶书,宋体,楷体;   
 
  Line-height: 140%;   
 
  Color:#333;
 
}
 
h3{   
 
  Font-family:隶书,宋体,楷体;   
 
  Line-height: 140%;   
 
  Color:#333;
 
}
 
/*分组后*/
 
h1,h2.h3{   
 
  Font-family:隶书,宋体,楷体;   
 
  Line-height: 140%;   
 
  Color:#333;
 
}
 
/*分组例外*/
 
h1{   
 
  Font-style:italic;
 
}
 
6、 继承
 
h1 { Color:#333; }
 
<h1>This is thegreatest heading <i>in the world</i></h1>
 
从 BODY 继承
 
Body {   
 
  Margin:10px;   
 
  Font-family:隶书;   
 
  Background:#000;   
 
  Color:#fff;
 
}
 
7、 上下文选择器
 
h1{   
 
  Color: #ccc;
 
}
 
I {   
 
  Color:#000;
 
}
 
/*使用上下文选择器*/
 
h1 I {
 
  Color:#000;
 
}
 
8、 子类选择器
 
.box {
 
  color:red;
 
}
 
.box1 {
 
  font-weight:bold;
 
}
 
.box2 {   
 
  font-style:italic;
 
}
 
<div class="box">Box</div>
 
<div class="box box1">Box1</div>
 
<div class="box box2">Box2</div>
 
9、 其他选择器
 
(1).元素选择器
 
p{color:black;}
 
a{text-decoration:underline;}
 
h1{font-weight:bold;}
 
(2).后代选择器
 
h2 i{color:red; }
 
li a{text-decoration:none;}
 
#main h1{Color:red;}
 
(3).伪类
 
a:link{color:blue;}
 
a:visited{color:green;}
 
a:hover,a:active{color:red;}
 
input:focus{background-color:yellow;}
 
(4).高级选择器
 
高级选择器,目前支持还不太完善,所以,对于站点功能很重要的任何元素上,应该避 免使用这些高级选择器.
 
10、子选择器和相邻同胞选择器
 
子选择器
 
#nav > li {
 
background:url(bg.gif) no-repeat left top;
 
}
 
<ul id="nav">   
 
  <li>Home</li>   
 
  <li>
 
    <ul>       
 
      <li>Development</li>       
 
      <li>Consultancy</li>     
 
    </ul>   
 
  </li>
 
  <li>Contact Us</li>
 
</ul>
 
相邻同胞选择器:
 
h1+p{font-weight:bold;}
 
<h1>Main Heading</h1>
 
<p>First Paragraph</p>
 
<p>Second Paragraph</p>
 
11、属性选择器
 
<strong title=”Cascading Style Sheets”>CSS</strong>
 
strong[title] {border-bottom: 1px dotted #999;}
 
strong[title]:hover {cursor:help;background:#ccc}
 
12、针对列表项特别好用的两个伪类选择器:
 
ol li:first-child{
 
  /*选中ol下面的第一个li*/
 
}
 
ol li:last-child{
 
  /*选中ol下面的一最后一个li*/
 
}
 
CSS3选择器新特性
 
a[href$='.']{
 
  /*所有a标签中href属性为.jsp结尾的被选中*/
 
}
 
a[href^='asd]{
 
  /*所有a标签中href属性为asd开头的被选中*/
 
}
 
a[href*='asd]{
 
  /*所有a标签中href属性中包含asd的被选中*/
 
}
 
选择表中的行:
 
tr:nth-of-type(even){
 
  background-color:red;
 
  /*选中偶数行*/
 
}
 
tr:nth-of-type(odd){
 
  background-color:red;
 
  /*选中奇数行*/
 
}
 
tr:nth-of-child(n){
 
  background-color:red;
 
  /*选中所有行*/
 
}
Tag:
网友评论

<