关于css选择器的那些事-css教程-PHP中文网

首页

web前端

css教程

关于css选择器的那些事

高洛峰

Nov 24, 2016 pm 01:19 PM

css

介绍css选择器之前，首先让我们来认识一下css

css——层叠样式表，作为网页排版神器不断被web前端学者们推崇着。。。

接下来就让我们来会会这个吧。。

1、CSS的特点　　

HTML 排版时的缺点: 　　

设置麻烦,修改麻烦,功能严重不足. 　　

CSS 样式排版的优点: 　　

排版属性功能完整,排版文件可以独立存在,可以共用排版文件　　

CSS 样式排版的分类: 　　

内联排版样式,内嵌式排版样式,外链排版

2、CSS的排版样式

行内排版样式:

格式:1ea675ce34566a96aa64c0ec9c107469…0e558eb1c61961f1d6f7cb3162a5ff0c

例:e4a875bb692394ba48cba87de8a71f8b排版样式94b3e26ee717c64999d7867364b1b4a3

内嵌排版样式：

内嵌式排版中所有的样式定义都必须在c9ccee2e6ea535a969eb3f532ad9fe89..531ac245ce3e4fe3d50054a55f265927之间,而c9ccee2e6ea535a969eb3f532ad9fe89..531ac245ce3e4fe3d50054a55f265927又必须在93f0f5c25f18dab9d176bd4f6de5d30e..9c3bca370b5104690d9ef395f2c5f8d1之间.

与其功能,又可以分为三种,

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="http://www.php1.cn/">
 
</head>
 
在<head>…</head>之间使用 import 格式：
 
<head>
 
　　<style type="text/css">
 
　　　　@import "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 只用于页面的唯一元素,如页眉,主导航条,布局区块等.

示例:f780de2dc8e77af113e3b919c4aebb8cThis paragraph has red text.94b3e26ee717c64999d7867364b1b4a3

相应的 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 的非常灵活的方法.

964bb13a67a0e53e393fe4dddb73a9dbhis paragraph has red text.94b3e26ee717c64999d7867364b1b4a3

相关 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).外部链接实现层叠

cf0181bbd31390b8b6f8cbec8fa9c074

(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$=&#39;.jsp&#39;]{
 
　　/*所有a标签中href属性为.jsp结尾的被选中*/
 
}
 
a[href^=&#39;asd]{
 
　　/*所有a标签中href属性为asd开头的被选中*/
 
}
 
a[href*=&#39;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;
 
　　/*选中所有行*/
 
}

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

@KeyFrames vs CSS过渡：有什么区别？May 14, 2025 am 12:01 AM

@keyframesandCSSTransitionsdifferincomplexity:@keyframesallowsfordetailedanimationsequences,whileCSSTransitionshandlesimplestatechanges.UseCSSTransitionsforhovereffectslikebuttoncolorchanges,and@keyframesforintricateanimationslikerotatingspinners.

使用页面CMS进行静态站点内容管理May 13, 2025 am 09:24 AM

我知道，我知道：有大量的内容管理系统选项可用，而我进行了几个测试，但实际上没有一个是一个，y＆＃039;知道吗？怪异的定价模型，艰难的自定义，有些甚至最终成为整个＆

链接HTML中CSS文件的最终指南May 13, 2025 am 12:02 AM

链接CSS文件到HTML可以通过在HTML的部分使用元素实现。1)使用标签链接本地CSS文件。2)多个CSS文件可通过添加多个标签实现。3)外部CSS文件使用绝对URL链接，如。4)确保正确使用文件路径和CSS文件加载顺序，优化性能可使用CSS预处理器合并文件。

CSS Flexbox与网格：全面评论May 12, 2025 am 12:01 AM

选择Flexbox还是Grid取决于布局需求：1)Flexbox适用于一维布局，如导航栏；2)Grid适合二维布局，如杂志式布局。两者在项目中可结合使用，提升布局效果。

如何包括CSS文件：方法和最佳实践May 11, 2025 am 12:02 AM

包含CSS文件的最佳方法是使用标签在HTML的部分引入外部CSS文件。1.使用标签引入外部CSS文件，如。2.对于小型调整，可以使用内联CSS，但应谨慎使用。3.大型项目可使用CSS预处理器如Sass或Less，通过@import导入其他CSS文件。4.为了性能，应合并CSS文件并使用CDN，同时使用工具如CSSNano进行压缩。

Flexbox vs Grid：我应该学习两者吗？May 10, 2025 am 12:01 AM

是的，youshouldlearnbothflexboxandgrid.1）flexboxisidealforone-demensional，flexiblelayoutslikenavigationmenus.2）gridexcelstcelsintwo-dimensional，confffferDesignssignssuchasmagagazineLayouts.3）blosebothenHancesSunHanceSlineHancesLayOutflexibilitibilitibilitibilitibilityAnderibilitibilityAndresponScormentilial anderingStruction

轨道力学（或我如何优化CSS KeyFrames动画）May 09, 2025 am 09:57 AM

重构自己的代码看起来是什么样的？约翰·瑞亚（John Rhea）挑选了他写的一个旧的CSS动画，并介绍了优化它的思维过程。

CSS动画：很难创建它们吗？May 09, 2025 am 12:03 AM

CSSanimationsarenotinherentlyhardbutrequirepracticeandunderstandingofCSSpropertiesandtimingfunctions.1)Startwithsimpleanimationslikescalingabuttononhoverusingkeyframes.2)Useeasingfunctionslikecubic-bezierfornaturaleffects,suchasabounceanimation.3)For

See all articles