资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/CSS选择器

CSS选择器

Juven / 1561人阅读

摘要：子选择器用两个常用选择器，中间通过进行选择。注意不要和子选择器选择对象范围混淆例如测试子选择器第一个标签第二个标签父元素的后代中的所有元素的字体都会被设置成红色。通配选择器通用选择器用来表示选择作用于所有元素。

CSS选择器（Selectors ）
一、CSS选择器作用
CSS选择器可用于实现对HTML网页上的元素样式的一对一，一对多或者多对一的控制。

二、CSS选择器的种类（这里介绍常用的）

标签选择器（Type selectors ）：直接引用HTML中的标签控制相应元素样式。
例如：

P {
  font-size: 1.25em;
  color: yellow;
}
//  P标签内的字体大小为1.25em,字体颜色为黄色.

类选择器（Class Selectors ）：利用自行定义的类名控制相应元素样式，用“.”来标志。
例如：

.className{
background-color: red;
}
//  设置className类的背景颜色为红色。

ID选择器（ID Selectors)：利用自行定义的ID名（ID名需唯一）控制相应元素样式，用“#”来标志。（因为选择器级联关系，建议非必要时，少用）
例如：

#idName{
width:200px;
height:200px;
background-color: yellow;
}
//  设置idName元素宽200px,高200px，背景颜色为黄色。

群组选择器(Group Selectors )：多种选择器组合成一组，控制同一种样式，选择器间用“，”隔开。（当要设置多个元素拥有同种样式时，采用群组选择器更加便捷，而且可以减少CSS代码。）
例如：

P,.className,#idName{
font-size: 1.25em;
                  color: yellow;
background-color: red;
}
//  设置p标签，className类，idName相应元素的字体大小为1.25em,字体颜色为红        色。

子选择器(Child Selectors )：用两个常用选择器，中间通过“>”进行选择。其中前面的选择器选择父元素，后面的选择器仅选择父元素第一代孩子中全部对应的元素。
例如：






测试子选择器

第一个span标签

第二个span标签



//  父元素box中的第一代孩子中的span元素字体将被设置为红色，而包含在p标签 
中的span元素（box元素的第二代孩子）则没有被影响。

拓展：
:first-child 匹配包含在其父元素中，每个作为首孩子出现的元素。（不限元素类型）
:last-child 匹配包含在其父元素中，每个作为最后孩子出现的元素。
:only-child 匹配包含其父元素中，每个作为唯一孩子出现的元素。
:nth-child(n) 匹配包含在父元素中，每个作为第n个孩子出现的元素。（n 可以是数字、关键词或公式）

:first-of-type 匹配包含在其父元素中，每个作为首孩子出现的特定类型元素。
:last-of-type 匹配包含在其父元素中，每个作为最后孩子出现的特定类型元素。
:nth-of-type(n) 匹配包含在父元素中，每个作为第n个孩子出现的的特定类型元素。 （n 可以是数字、关键词或公式）

后代选择器(Descendant Selectors )：用两个常用选择器，中间通过空格隔开。其中前面的选择器选择父元素，后面的选择器选择父元素全部孩子中全部对应的元素。（注意不要和子选择器选择对象范围混淆）
例如：






测试子选择器

第一个span标签

第二个span标签



//  父元素box的后代中的所有span元素的字体都会被设置成红色。

相邻同胞选择器(Adjacent sibling selectors)：用两个常用选择器，中间通过“+”进行选择。作用于与前面选择器同胞的，且是后面选择器选择的第一个元素。
例如






测试相邻同胞选择器选择器


第一个span标签

第二个span标签
第三个span标签


//  第二个span标签和p标签同胞故字体将被设置为红色。

伪类选择器(pseudo-classes Selectors)：有时候还会需要用文档以外的其他条件来实现元素的样式，例如鼠标悬停时，目标元素的样式变化等。
例如：



鼠标悬停时，我会改变颜色哟.
//  鼠标悬停在链接上时，字体颜色由默认的蓝色变成红色。

与此相似的伪类有：

:link 设置元素初始样式。
:visited 设置元素被访问后的样式。
:hover 设置鼠标悬停时样式。
:active 设置鼠标点击瞬间的样式。

// 在CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，a:active 必须被
置于 a:hover 之后，才是有效的。若要同时设置这四种，一般设置顺序为LVHA。
// 该种伪类一般被应用在链接上，也可以应用在其他元素上，例如表单元素中。

拓展：
:first-line 设置段落的首行样式。
:first-letter 设置段落的首字母样式。（若为英文则作用于第一个字母，若为中文则作用于第一个汉字）

属性选择器(Attribute Selectors )：通过判断元素中是否存在html中某个属性或者符合某个属性值来选择作用该元素。
例如一：




我是含有title标签的p标签，我将变红色。


我是不含title标签的p标签。

//  选择将含有title属性的p标签元素字体设置成红色。

例如二：


    

我是含有title标签且值为tag1的p标签。


我是含有title标签且值为tag2的p标签，我将变红色。

//  选择设置含有title属性，且title属性值为tag2的p标签元素字体为红色。

通配选择器：通用选择器用*来表示,选择作用于所有元素。
例如：

*{
 color:red;
}
//  所有的元素的字体颜色都将被设置成红色。

三、样式继承
样式继承：某元素设置了样式，则其后代可以继承其某些样式设置。
例如：





    
样式继承


样式继承



//  在父元素div中设置了字体大小20px，字体颜色黄色,边框黑色，1px，实线 ，其后代将继承了它的字体样式，但没有继承它的边框样式。
//  注意：父元素的某些样式设置时不会被子元素继承，例如margin（外边距），border（边框）等等。

四、选择器级联
级联：是属性设置发生冲突时，浏览器用来确定元素会应用那种样式的一套规则。

属性发生冲突的两种情况：

第一种：某元素的多个祖先设置了同个属性的值。
第二种：同时两个或者两个以上的样式设置了同一个属性。

样式应用规则：
注意：某些样式重置后，浏览器仍会保留某些初始属性设置。
例如：






h1标签


h2标签


h3标签



//设置了一样的字体大小后，浏览器仍会保持h标签初始大小等级。

1、当元素的多个祖先同时设置了同个属性，则元素应用离它最近的祖先设置的样式。
例如：








样式继承





//  p标签元素的祖先同时设置了字体颜色，最终p标签元素最终继承了离它最近的father类设置的样式，字体为红色。

2、元素应用本身直接设置的样式。
例如：








样式继承





//  p标签元素最终使用本身设置的字体颜色，蓝色。

3、应用选择器权重高者的样式。

权重比例如下：
一个标签选择器=1个权重
一个类选择器=10个权重
一个ID选择器=100个权重
例如：

idName p 权重=100+1=101 idName .className p 权重=100+10+1=111

// 注意：伪元素相当于1个权重，例如：:first-line；伪类相当于10个权重，例如：:hover。
例如：






样式设置



//  ID选择器权重高，p标签元素字体为黄色

4、后设置的样式会覆盖先设置的样式。
例如：





//  最终背景颜色为后设置的黄色。

5、！Important可以推翻样式。
例如：




!important

//  字体颜色最终为红色。

五、控制样式应用的方法
第一种：采用!important。
注意：由于!important的权力很大，推翻同属性的其他样式设置，经常使用将导致你的样式不遵从级联规则。

第二种：改变样式的选择器权重。
注意：仅仅采用简单的加大权重，容易导致选择器名称过长。
例如：







增加权重




//  通过增加一个id选择器来增加权重，使字体样式变黄色而不是红色。

第三种：微调样式出现顺序。
注意：一般先引用外部样式，再写内部样式。
例如：

css.css文件中的样式是：
p{
    color:blue;
    }
Html中部分代码：





我会听内部样式的。


//  最终文字为红色。

又如：






我会听外部样式的。

//  最终文字为蓝色的。

样式内容简介：
HTML呈现网页的基本内容，CSS呈现网页的外观。
CSS样式有外部样式和内部样式。CSS样式一般包含了两部分，一部分是选择器（告诉浏览器该样式的作用对象），一部分是声明块。声明语句包括了属性和属性值。
外部样式：
好处：
1、利于更快的开发（样式代码可以复用）和修改网页。
2、使用户更快打开网页。（外部样式会缓存在用户的计算机上，用户再打开相同外部样式的网页则不需要重新加载外部样式。）
坏处：
网页开发时，有时重新修改了外部样式，但之前缓存了外部样式，浏览器一般不再重新加载外部样式，导致与预期效果不同。
内部样式：只应用于当前网页，不便于开发和对于整个网站的修改。

GPU云服务器 云服务器 css选择器 基础选择器css css选择 js css 加载器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115105.html

相关文章

  • WEB前端 CSS

    摘要：后代选择器，儿子选择器，毗邻选择器，弟弟选择器。后代选择器后代选择器标签选择器后跟标签后代，无论直属还是间接直属，直接后代毗邻后代中最近的一个弟弟，找到和自己同级的标签如通过多个选择器好到具体的标签。目录 WEB前端 CSS WEB前端 CSS TOC CSS简介 CSS引入方式 CSS结构 CSS选择器 标签选择...

    darry 评论0 收藏0

  • 编写高效的 CSS 选择器 – CSS魔法

    摘要：最基本的选择器是元素选择器比如选择器比如还有类选择器比如。选择器和类选择器在速度上的差异基本上没有关系。现在我们回到讨论开始的地方，哪类选择器是最高效的哪个是会影响选择器效率的关键选择器写代码的时候，关键选择器是能否高效的决定因素。 高效的CSS已经不是一个新的话题了，也不是我一个非得重拾的话题，但它却是我在工作之时，所感兴趣的，关注已久的话题。 有很多人都忘记了，或在简单的说没有意识...

    forrest23 评论0 收藏0

  • 编写高效的 CSS 选择器 – CSS魔法

    摘要：最基本的选择器是元素选择器比如选择器比如还有类选择器比如。选择器和类选择器在速度上的差异基本上没有关系。现在我们回到讨论开始的地方，哪类选择器是最高效的哪个是会影响选择器效率的关键选择器写代码的时候，关键选择器是能否高效的决定因素。 高效的CSS已经不是一个新的话题了，也不是我一个非得重拾的话题，但它却是我在工作之时，所感兴趣的，关注已久的话题。 有很多人都忘记了，或在简单的说没有意识...

    hyuan 评论0 收藏0

  • 前端面试题-CSS选择器性能优化

    摘要：不要在编写规则时用标签名或类名不要在编写规则时用标签名把多层标签选择规则用规则替换，减少查找避免使用子选择器后代选择器在中是最昂贵的选择器。如果你关心页面性能的话，他们真不该被使用扩展阅读前端面试题选择器前端面试题优先级 一、CSS选择符 CSS选择符由一些初始化参数组成，这些参数指明了要应用这个CSS规则的页面元素。 作为一个网站的前端开发工程师，应该避免编写一些常见的开销很大的CS...

    Scott 评论0 收藏0

  • 前端面试题-CSS选择器性能优化

    摘要：不要在编写规则时用标签名或类名不要在编写规则时用标签名把多层标签选择规则用规则替换，减少查找避免使用子选择器后代选择器在中是最昂贵的选择器。如果你关心页面性能的话，他们真不该被使用扩展阅读前端面试题选择器前端面试题优先级 一、CSS选择符 CSS选择符由一些初始化参数组成，这些参数指明了要应用这个CSS规则的页面元素。 作为一个网站的前端开发工程师，应该避免编写一些常见的开销很大的CS...

    XGBCCC 评论0 收藏0

发表评论

登陆后可评论

0条评论

Juven

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<