CSS知识点：选择符

阳光穿透心脏的1/2处 2021-11-17 04:31 406阅读 0赞

**一、选择符的种类**

1）通配选择符

它用来给页面所有的元素设置样式

\*\{margin:0;padding:0;\}。但是实际当中不建议这么用，页面中用到了哪些样式，就统一设置样式，因为\*影响性能。也可以给某元素的所有的后代元素应用样式：p \*\{color:red;\}

2）标签选择符

顾名思义，通过标签来限定样式作用域

div\{padding:5px;\}

3）类选择符

和面向对象中的类有着类似的功能，需要的时候调用即可，达到重用的目的。将样式定义成一个类，需要使用的地方调用即可。

.myClass\{font-size:24px;\}

<p>普通文字<p>

<p class="myClass">自定义样式</p>

4）ID选择器

通过\#ID来精确定位页面元素的属性

\#trapper\{padding:10px;font-size:26px;\}

<div id="trapper">

<ul>

<li>1</li>

<li>2</li>

</ul>

</div>

5）包含选择符

直接上实例

div strong\{font-size:24px;text-decoration:underline;\}

<div>

<p><strong>我是div中的p标签下的strong内容（”孙子”）</strong></p>

<strong>我是div中的strong内容（”孩子”）</strong>

</div>

![280805468944392.jpg][]

可见，包含选择会将某元素下的所有包含元素都设置样式。不管层级有多深。

6）子选择符

和上边的区别，大家看出来了吗？

div>strong\{font-size:24px;text-decoration:underline;\}

<div>

<p><strong>我是div中的p标签下的strong内容（”孙子”）</strong></p>

<strong>我是div中的strong内容（”孩子”）</strong>

</div>

![280809124725753.jpg][]

7）相邻选择符

控制相邻的元素样式

div+strong\{font-size:24px;text-decoration:underline;\}

<div>

<strong>我是p的邻居</strong>

<p><strong>我是div中的p标签下的strong内容（”孙子”）</strong></p>

<div>div中的div</div>

<strong>我是div中的strong内容（”孩子”），而且我也是p的邻居</strong>

<strong>我显示有下滑线吗</strong>

</div>

![280811107847407.jpg][]

要是p+strong+strong呢？strong+strong(可以并排多个strong看看效果)？css很强大！！

8）属性选择符

四种方式

E\[attr\] 具有attr属性的所有HTML标签 ，如div\[class\]表示具有class属性的所有div

E\[attr="value"\] 具有attr属性且属性值为value的标签，如input\[type="text"\]\{border:2px;\}

E\[attr~="value"\] 具有attr属性，且有多个空格隔开的字段，其中一个字段为value的元素。

E\[attr|="value"\] 具有attr标签，且必须以value值开始及使用-分隔的元素

9）混合选择符

如p.className p\#id等等

**二、CSS选择符优先级计算**

总体上按照就近原则应用样式。一般计算如下

行内样式：1000

ID选择符：0100

类选择符：0010

标签选择符：0001

例如：body \#wrapper p \{...\}，那么它的优先级指数就是 1+100+1=102，而body div \#wrapper p \{...\}的优先级指数就是 1+ 1 +100 + 1 =103

但需要注意一个关键字!important，除了IE6,他的css优先级最高。

\#box \{  
     color:red !important;  
     color:blue;  
 \}

这样，对于IE7+显示字体颜色为红色，不会被蓝色覆盖掉。IE6显示为蓝色。

本文参考 *CSS那些事儿*，大家想看详细信息，请看这本书

转载于:https://www.cnblogs.com/Jack-hui/p/4053018.html

[280805468944392.jpg]: /images/20211116/7778622854bb4fa996e742b35db10c18.png
[280809124725753.jpg]: /images/20211116/6c50e0094ac04f5e92cbe9ed8d52b2fe.png
[280811107847407.jpg]: /images/20211116/fe1a2ac5bb484fe4b12346d6424d6768.png

发表评论取消回复

表情：

评论列表（有 0 条评论，406人围观）

还没有评论，来说两句吧...

相关阅读

相关【css】selection选择符

`::selection`选择器用来匹配元素被用户选中的部分，常用于改变文本的默认的选择中样式. [codepan在线示例][codepan] 了解更多 ![在这里插入

梦里梦外;/ 2022年12月25日 15:58/ 0 赞/ 137 阅读

相关 CSS 选择器（选择符）

CSS 选择器（选择符）要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。HTML页面中的元素就是通过CSS选择器进行控制

￡神魔★判官ぃ/ 2022年08月27日 08:51/ 0 赞/ 233 阅读

相关 CSS选择符及优先级计算

行内样式（Inline Style），如<span style="color:red">...</span>； ID选择符（ID selectors），如\myid；

╰半橙微兮°/ 2022年08月04日 15:47/ 0 赞/ 129 阅读

相关 CSS3 选择符

一、元素选择符 <table> <thead> <tr> <th align="left">selector</th> <th align="l

柔光的暖阳◎/ 2022年05月27日 05:55/ 0 赞/ 147 阅读

相关初识CSS-属性选择符

标签中的属性，可以用来详细的描述元素，当然也可以用来选择元素。 CSS的属性选择符中，属性名是放在一对方括号\[\]中的如果要使用多个属性，可以连续写多个，例如

快来打我*/ 2022年05月15日 14:39/ 0 赞/ 199 阅读

相关初识CSS-id选择符

用id选择符选择的元素，必须在当前页面中是唯一的 <style> red{ color: red;

墨蓝/ 2022年05月15日 14:38/ 0 赞/ 305 阅读

相关【CSS】组合选择符

CSS 组合选择符 ![在这里插入图片描述][20190201181742218.png] CSS组合选择符包括各种简单选择符的组合方式。在 CSS3 中包含了

小咪咪/ 2022年03月21日 12:52/ 0 赞/ 192 阅读

相关 CSS知识点：选择符

一、选择符的种类 1）通配选择符它用来给页面所有的元素设置样式 \\{margin:0;padding:0;\}。但是实际当中不建议这么用，页面中用到了哪些样式，就统一

阳光穿透心脏的1/2处/ 2021年11月17日 04:31/ 0 赞/ 407 阅读

相关 CSS 组合选择符

在 CSS3 中包含了四种组合方式: 后代选取器(以空格分隔) 子元素选择器(以大于号分隔）相邻兄弟选择器（以加号分隔）普通兄弟选择器（以破折号分

野性酷女/ 2021年09月15日 06:14/ 0 赞/ 268 阅读

相关 CSS选择器 Selectors(伪对象选择符)

伪对象选择符

骑猪看日落/ 2021年06月26日 16:06/ 0 赞/ 482 阅读