CSS选择器总结

最新推荐文章于 2024-10-22 09:22:43 发布

Enter_1994

最新推荐文章于 2024-10-22 09:22:43 发布

阅读量468

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Enter_1994/article/details/52512162

今天在做DEMO的时候偶然发现自己对CSS选择器的使用并不熟练遂即在W3school上把内容又看了一遍

下面做些整理

1.元素选择器直接使用标签即元素选择

html {color:black;}
h1 {color:blue;}
h2 {color:silver;}
h2, p {color:gray;}   同时应用在h2和p


2.通配符选择器
* {color:red;}   使文档中所有元素的 color 属性值指定为 red

3.类选择器
.important {color:red;}  等同于  *.important {color:red;}
结合元素选择器来使用   p.important {color:red;}只设置p里面类名为important的颜色变红

多类选择器  IE7之前无法处理多类选择器
<p class="important warning">   可以设置 .important.warning{color:red}或者.warning.important{color;red}效果一样  即类名顺序不限
但是一定要匹配！
<p class="important urgent ">如果设置 .important.warning{color:red}结果是不能匹配的  样式设置无效

4.ID选择器
#intro {font-weight:bold;}

ID选择器与类选择器的区别
1）与类不同，在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次。
2）不同于类选择器，ID 选择器不能结合使用，因为 ID 属性不允许有以空格分隔的词列表。   （有多类选择器 但没有多ID选择器）
3）ID能包含更多含义
HTML 和 XHTML 将类和 ID 值定义为区分大小写，所以类和 ID 值的大小写必须与文档中的相应值匹配。


5.属性选择器
*[title] {color:red;}    把包含标题（title）的所有元素变为红色
a[href][title] {color:red;}     同时有 href 和 title 属性的 HTML 超链接的文本设置为红色
a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}         只选择有特定属性值的元素，属性与属性值必须完全匹配
如下图 提供了属性选择器更多规范


6.后代选择器
h1 em {color:red;}   即h1元素中有em元素,需要注意的是两个元素之间的层次间隔可以是无限的，无论em的嵌套层有多深，只要是h1的后代元素，都可以被找到

7.子元素选择器
如果从右向左读，选择器 h1 > strong 可以解释为“选择作为 h1 元素子元素的所有 strong 元素”。
在具体例子中分析
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>    very  very变红
<h1>This is <em>really <strong>very</strong></em> important.</h1>            无变化
h1 > strong {color:red;}

8.相邻兄弟选择器
h1 + p {margin-top:50px;}
选择紧接在 h1 元素后出现的第一个段落，h1 和 p 元素拥有共同的父元素。

9.伪类 伪类名称对大小写不敏感。
1）超链接 L-V-H-A即 a:link 未访问默认,a:visited 访问后,a:hover 鼠标放在上面,a:active 鼠标按下。   必须遵循严格的顺序H在L-V后，A在H后。
2）:focus  获得焦点  IE8以上支持
3）:first-child   首个子对象，容易误解，特别注意。
    <div>
<p>These are the necessary steps:</p>          变粗
<ul>
<li>Intert Key</li>     变大写
<li>Turn key <strong>clockwise</strong></li>       无变化
<li>Push accelerator</li>                   无变化
</ul>
<p>Do <em>not</em> push the brake at the same time as the accelerator.</p>               无变化
</div>

p:first-child {font-weight: bold;}
li:first-child {text-transform:uppercase;
</pre>根据以前的理解，若是p:first-child，那么第一个p里的文本会变化，第二个p里的DO也会变化，因为他们是p的first-child，但是事实并不如此。重新思考之后知道，所谓first-child根本不是这个意思。p的父元素是div，li的父元素是ul。p:first-child的意思是 div里面的第一个p元素li:first-child的意思是是 ul里面的第一个li元素这么理解起来 再根据事实情况，仿佛正是合理的
4）:lang  :lang 伪类使你有能力为不同的语言定义特殊的规则

<p>一些文本 <q lang="no">段落中的引用</q> 一些文本。</p>
q:lang(no){quotes: "~" "~"}
结果是 一些文本~段落中的引用~一些文本。

10.伪元素
:first-line伪元素用于向文本的首行设置特殊样式。   只能用于块级元素
:first-letter 伪元素用于向文本的首字母设置特殊样式   只能用于块级元素
:before 伪元素可以在元素的内容前面插入新内容  
:after 伪元素可以在元素的内容之后插入新内容