CSS选择器

最新推荐文章于 2024-07-14 10:25:44 发布

codeyf

最新推荐文章于 2024-07-14 10:25:44 发布

阅读量553

点赞数

分类专栏： CSS+DIV网页样式布局文章标签： css html

本文链接：https://blog.csdn.net/codeyf/article/details/41018865

版权

CSS+DIV网页样式布局专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1基本选择器

标签选择器
类选择器
ID选择器

1.1标签选择器

标签选择器直接引用HTML标签名称即可，有时候可以将标签选择器称为类型选择器，类型选择器规定了网页元素在页面中默认的显示样式。

<span style="color: rgb(51, 51, 51);"><span style="font-size:24px;"><style type="text/css">
p{
   font-size:12px;
   color:red;
}
</style></span></span>

1.2类选择器

标签选择器虽然很方便，但是也存在很多缺陷，因为每个标签选择器所定义的样式不仅仅影响某一个特定对象，而且会影响到页面中的所有同名标签。如果希望同一个标签在网页的不同位置显示不同的样式，使用这种方法定义的样式就存在很多弊端。

类选择器能够为网页对象定义不同的样式类，实现不同元素拥有相同的样式，相同元素的不同对象拥有不同的样式。类选择器以一个（.）前缀开头，然后跟随一个自定义的类名。

应用类样式可以使用class属性来实现，只要在标签中定义class属性，然后把该属性值设置为实现定义好的类选择器的名称即可。

例子：

<p>问君能有几多愁，恰似一江春水向东流</p>
<p class="font18px underling">问君能有几多愁，恰似一江春水向东流</p>
<p>问君能有几多愁，恰似一江春水向东流</p>

<style>
p
{
     font-size:12px;
     color:red;
}
.font18px
{
     font-size:18px;
}
.underling
{
     text-decoration:underline;
}
</style>

如果将标签与类捆绑在一起来定义选择器，则可以限定类的使用范围，这样就可以指定该类仅适用于特定的标签范围内，这种做法也称为指定类选择器。

<style type="text/css">
p
{
  font-size:12px;
}
.font18px
{
  font-size:18px;
}
p.font18px
{
  font-size:24px;
}
<style>

1.3ID选择器

ID选择器以#作为前缀，然后是一个自定义的ID名。应用ID选择器可以使用id属性来实现，HTML所有元素都支持该属性，只要在标签中定义id属性，然后把该属性值设置为事先定义好的ID选择器的名称即可。

<div id="box">问君能有几多愁</div>

<style type="text/css">
#box
{
  background:url(images/bg1.gif) center bottom;
  height:200px;
  width:400px;
  border:solid 2px red;
  padding:20px;
}
</style>

1.4通配选择器

*
{
  margin:0;
  padding:0;
}

小结：

对于网页结构问题，一般建议使用ID选择器来定义
对于重复出现的样式，可以考虑使用类选择器来进行提炼
当ID选择器和类选择器的样式发生冲突时，ID选择器的样式要优于类选择器定义的样式

2复合选择器

子选择器
相邻选择器
包含选择器
多层选择器嵌套
属性选择器
伪选择器和伪元素选择器

2.1子选择器

子选择器就是指定父元素所包含的子元素的样式。子选择器使用尖角号(>)表示。

例子：

<style>
span
{
     font-size:12px;
}
div > span
{
     font-size:24px;
}
</style>

<body>
<h2>
<span>HTML文档树状结构</span>
</h2>
<div>
  <span>问君能有几多愁，恰似一江春水向东流</span>
</div>
</body>

也可以通过使用ID值或Class值来定义子选择器。

例如：

<style>
span{font-size:12px;}
div>span{font-size:24px;}
div>.font20px{font-size:20px;}
#box>.font24px{font-size:24px;}
</style>

<body>
<h2>
<span>HTML文档树状结构</span>
</h2>
<div id="box">
  <span class="font24px">问君能有几多愁，恰似一江春水向东流</span>
</div>
<div>
<span class="font20px">问君能有几多愁，恰似一江春水向东</span>
</div>
<div>
<span>问君能有几多愁，恰似一江春水向东</span>
</div>
</body>

2.2相邻选择器

相邻选择器使用加号(+)来表示

<style type="text/css">
h2{font-size:12px;}
h2+div{font-size:12px;}
div+p{font-size:12px;}
p+div{font-size:12px;}
div+div{font-size:12px;}
</style>

<h2>HTML文档树状结构</h2>
<div>问君能有几多愁，恰似一江春水向东流<div>
<p>问君能有几多愁，恰似一江春水向东流</p>
<div class="class1">问君能有几多愁，恰似一江春水向东流</div>
<div>问君能有几多愁，恰似一江春水向东流</div>

h2+div表示h2后面相邻的div元素的样式

div+p表示div元素后面相邻的p元素的样式

针对上面的样式可以借助Class属性值或者ID值来进行控制，例如，修改上面的样式中相邻选择器的用法如下：

<style type="text/css">
h2{font-size:12px;}
h2+div{font-size:12px;}
div+p{font-size:12px;}
p+.class1{font-size:12px;}
.class1+div{font-size:12px;}
</style>

2.3包含选择器

<style type="text/css">
#header p{font-size:14px;}
#main p{font-size:12px;}
</style>

<div id="wrap">
   <div id="header">
        <p>头部区域第1段文本</p>
        <p>头部区域第2段文本</p>
        <p>头部区域第3段文本</p>
   </div>
   <div id="main">
       <p>主体区域第1段文本</p>
       <p>主体区域第2段文本</p>
       <p>主体区域第3段文本</p>
   </div>
</div>

2.4多层嵌套选择器

多层嵌套选择器用法和包含选择器类似：

<style type="text/css">
#wrap #header h2 span {font-size:24px;}
#wrap #main h2 span{font-size:14px;}
</style>

CSS允许嵌套更多的选择器，或者跳级嵌套。例如，针对上面所定义的样式，可以使用如下嵌套选择器来进行定义：

<style type="text/css">
#header h2 span{font-size:24px;}
#main h2 span{font-size:14px;}
</style>

2.5属性选择器

属性选择器就是利用网页标签包含的属性及其属性值来定义特定对象或一定范围元素的样式。属性选择器一般是一个元素后面紧跟中括号，中括号内是属性或者属性表达式。

2.51匹配属性名选择器

<div class="class1">问君能有几多愁，恰似一江春水向东流</div>
<p>问君能有几多愁，恰似一江春水向东流</p>
<div class="class2">问君能有几多愁，恰似一江春水向东流</div>
<div>问君能有几多愁，恰似一江春水向东流</div>

样式：

<style type="text/css">
body{font-size:12px;}
div[class] {font-size:24px;}
</style>

多个属性选择

<img src="images/pic1.jpg" alt=" 图像1"/>
<img src="images/pic2.jpg" alt=""/>
<img src="images/pic3.jpg"/>

<style type="text/css">
img{width:260px;}
img[alt]{border:solid 2px red;}
</style>

利用img[alt]属性选择器，匹配设置了alt属性的所有图像对象显示红色边框线

<img src="images/pic1.jpg" alt=" 图像" title="图像"/>
<img src="images/pic2.jpg" alt="图像"/>
<img src="images/pic3.jpg"/>

<style type="text/css">
img{width:260px;}
img[alt][title]{border:solid 2px red;}
</style>

2.53模糊匹配属性值选择器

这是一类特殊的属性选择器，类似于正则表达式的匹配模式。主要包括如下几种匹配模式：

[|=](连字符匹配):以连字符为分隔符，匹配属性值中的局部字符串
[~=](空白符匹配):以空白符为分隔符，匹配属性值中的局部字符串
[^=](前缀匹配):匹配属性值中的起始字符
[$=](后缀匹配):匹配属性值中的结束字符
[*=](子字符串匹配):匹配属性值存在的指定字符

2.6伪选择器和伪元素选择器

伪类和伪元素是一类特殊的选择器，它定义了一些特殊区域或特殊状态下的样式，这些特殊的区域或特殊状态是无法通过标签、ID或Class以及其他属性来进行精确控制。

注意，伪类和伪元素的前缀符号(:)与前后名称之间不要有空格。

例子：

<a href="#">超链接文本</a>
<style type="text/css">
a:link{color:#FF0000;}
a:visited{color:#0000FF;}
a:hover{color:#00FF00;}
a:active{color:#FF00FF}
</style>

3CSS样式的优先级

一般来说，行内样式会优于内部样式表，内部样式表会优于外部样式表。而被附加了!important关键字的声明会拥有最高的优先级。