CSS选择器

最新推荐文章于 2025-03-06 12:11:45 发布

薛定谔的汤姆猫

最新推荐文章于 2025-03-06 12:11:45 发布

阅读量300

点赞数 4

CC 4.0 BY-SA版权

分类专栏： CSS

本文链接：https://blog.youkuaiyun.com/qq_20448859/article/details/52143783

CSS 专栏收录该内容

1 篇文章

订阅专栏

1.语法

　　CSS规则由两个主要部分构成：选择器，以及一条或多条声明。每条声明由一个属性和一个值组成。

selector {declaration1; declaration2; ... declarationN }

　　使用逗号可以将任意多个选择器分组在一起，这些选择器会共用同一个样式。下面是一个选择器分组的例子。

h1,h2,h3,h4,h5,h6 {color:purple;}
/* 等价于
h1 {color:purple;}
h2 {color:purple;}
h3 {color:purple;}
h4 {color:purple;}
h5 {color:purple;}
h6 {color:purple;} */

2.选择器

1）元素选择器

/*最常见最基本的选择器*/
html {color:black;}
h1 {color:blue}
h2 {color:silver}

2）类选择器

.important {color:red;} /*对所有类名为important的元素应用样式，类名可以是个词列表，只要包含接口*/
p.important {color:red;} /*结合元素选择器，对所有类名为important的段落应用样式*/
.important.warning {color:red;} /*多类选择器，仅对同时拥有这些类名的元素应用样式*/

3）ID选择器

#intro {font-weight:bold;} /*对Id为intro（区分大小写）的元素应用样式，该元素最多有一个*/

4）属性选择器

*[title] {color:red;} /*对含有title的所有属性应用样式*/
a[href] {color:red;} /*对含有href属性的a元素应用样式*/
a[href][title] {color:red;} /*对同时有href和title属性的a元素应用样式*/
a[href="value"] {color:red'}  /*对含有href且值完全为value的a元素应用样式*/
p[class~="important"] {color:red;} /*对class属性值中词列表含有
important的p元素应用样式，等价与p.important*/
p[class|="important"] {color:red;} /*对class属性值中以important词（后面只能是空格或者是连字符-）开头的p元素应用样式*/
p[class^="important"] {color:red;} /*对class属性值中以字符串"important"开头的p元素应用样式*/
p[class$="important"] {color:red;} /*对class属性值中以字符串"important"结尾的p元素应用样式*/
p[class*="important"] {color:red;} /*对class属性值中包含字符串"important"的p元素应用样式*/

　　|=和^=的区别就是|=选择的是属性值以整个词开头的元素，后面必须是空格或者连字符-，下面是一个演示 |=和^=区别的例子。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        span[class|="cloud"] {color:red;}
        span[class^="cloud"] {font-style:italic;}
        span[class|="life"]  {color:red;}
        span[class^="life"]  {font-style:italic;}
    </style>
</head>
<body>
    <span class="cloudy">Venus</span>
    <span class="life-bearing">Earth</span>
</body>
</html>

这里写图片描述

5）后代选择器

h1 em {color:red;} /*为h1后代中的em元素（不管多少层）应用样式*/

6）子元素选择器

h1 > strong {color:red;} /*为h1的子元素（1层）strong应用样式*/

7）相邻兄弟选择器

h1 + p {color:red;} /*为紧接在h1后的p元素，且两者必须有共同的父亲，应用样式*/

8）混合实例

html > body table + ul {margin-top:20px;} /*最外层是后代选择器，左边是子元素选择器，右边是兄弟选择器，为ul元素应用样式，满足跟在table后，table必须是body的后代，body必须是html的子元素*/

3.伪类选择器

　　伪类的语法如下。

selector : pseudo-class {property: value}

active 向被激活的元素添加样式。
focus 向拥有键盘输入焦点的元素添加样式。
hover 当鼠标悬浮在元素上方时，向元素添加样式。
link 向未被访问的链接添加样式。
visited 向已被访问的链接添加样式。
first-child 向元素的第一个子元素添加样式。

p:first-child 选择的是作为任何一个元素第一个子元素的p元素。

lang 向带有指定lang属性的元素添加样式。

q:lang(no) { } 选择的是带有lang属性且值为no的q元素。

4.伪元素选择器

selector : pseudo-element {property:value;}

first-letter 向文本的第一个字母添加特殊样式。
first-line 向文本的首行添加特殊样式。
before 在元素之前添加内容。

/*在h1元素之前插入新内容*/
h1:before {
     content:url(logo.gif);
}

after 在元素之后添加内容。

5.选择器优先级

　　规则如下。

样式表元素选择器选择越精确优先级越高，因此有Id选择器优先级>类选择器优先级>元素类型选择器优先级。
对于相同类型选择器，在样式表中越靠后的优先级越高（与元素中 class类出现的顺序无关系）。
如果想让某个样式的优先级变高，可以使用!important来指定。