您现在的位置:首页 >> 前端 >> 内容

CSS选择器

时间:2015/5/25 14:30:09 点击:

  核心提示:概要:在html中,选择器就是用来在页面中定位元素使用。浏览器对于不同类型的选择器使用不同的方法查找元素;核心的选择器如下表所示(他们也是应用最为广泛的选择器):多种选择器总结:vc3Ryb25nPg...
概要:
    在html中,选择器就是用来在页面中定位元素使用。浏览器对于不同
类型的选择器使用不同的方法查找元素;核心的选择器如下表所示(他们也是应
用最为广泛的选择器):

CSS选择器

多种选择器总结:<喎?/kf/ware/vc/" target="_blank" class="keylink">vc3Ryb25nPgoKCjxwcmUgY2xhc3M9"brush:java;"> 一般情况下,使用基于id和class属性选取元素(简单选择器)。除了这 种情况之外,还有如下多种选择器方式可供使用:

① 属性选择器
CSS选择器

样例代码如下:
...
[lang]{
    background-color: grey;
    color: #ffffff;
}
[lang$="s"]{
    font-size: 14px;
}
...

...

h1类标题

h2类标题

h2类标题

...

② 关系选择器
CSS选择器

样例代码如下:
...
h1 ~ [lang]{
    background-color: grey;
    color: #ffffff;
}
...

...

h2类标题

h1类标题 span span的后代元素

h2类标题

h2类标题

...

③ 伪元素和伪类选择器
CSS选择器

样例代码如下:
...
p:first-letter{
    font-size: x-large;
    color: red;
}
:nth-of-type(2){
    background-color: red;
    color: #000000;
}
...

④ 联合选择器和反选择器

利用选择器组合实现联合选择和反选择。

CSS选择器

样例代码如下:
...
h1, h2{
    background-color: red;
    color: #000000;
}
:not(html):not(body):not(:first-child){
    border: medium double #000000;
}
...

Tags:CS SS S选 选择 
作者:网络 来源:cqstart116
  • 易笔记(art.yibiji.com) © 2025 版权所有 All Rights Reserved.
  • 本站部分内容收集于互联网若有侵权请联系站长删除 鄂ICP备18030946号-1