CSS选择器

最新推荐文章于 2024-09-04 02:27:32 发布

fishycx

最新推荐文章于 2024-09-04 02:27:32 发布

阅读量296

点赞数

分类专栏： CSS 文章标签： css 选择器

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

元素选择器

最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。
如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身

html {color:black;}
h1 {color:blue;}
h2 {color:silver;}

CSS分组

将 h2 和 p 选择器放在规则左边，然后用逗号分隔，就定义了一个规则。其右边的样式（color:gray;）将应用到这两个选择器所引用的元素。逗号告诉浏览器，规则中包含两个不同的选择器。如果没有这个逗号，那么规则的含义将完全不同。参见后代选择器。
可以将任意多个选择器分组在一起，对此没有任何限制

h2, p {color:gray;}

通配符选择

CSS2 引入了一种新的简单选择器 - 通配选择器（universal selector），显示为一个星号（*）。该选择器可以与任何元素匹配，就像是一个通配符。

* {color:red;}

类选择器详解

类选择器允许以一种独立于文档元素的方式来指定样式。

CSS类选择器

类选择器允许以一种独立于文档元素的方式来指定样式。
该选择器可以单独使用，也可以与其他元素结合使
在使用类选择器之前，需要修改具体的文档标记，以便类选择器正常工作。
为了将类选择器的样式与元素关联，必须将 class 指定为一个适当的值。

结合元素选择器

p.important {color:red;}

多类选择器

一个 class 值中可能包含一个词列表，各个词之间用空格分隔.

.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}

-------
<p class="important warning">
This paragraph is a very important warning.
</p>

ID选择器详解

ID 选择器允许以一种独立于文档元素的方式来指定样式。

ID 选择器

语法：首先，ID 选择器前面有一个 # 号 - 也称为棋盘号或井号。

*#intro {font-weight:bold;}
#intro {font-weight:bold;}
----
<p id="intro">This is a paragraph of introduction.</p>

只能在文档中使用一次
不能使用 ID 词列表
ID 能包含更多含义
区分大小写

属性选择器

CSS 2 引入了属性选择器。
属性选择器可以根据元素的属性及属性值来选择元素。

*[title]{color:red;}
a[href]{color:red;}
a[href][title]{color:red;}
img[alt]{border:5px solid red;}

根据具体属性值选择

除了选择拥有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素。

a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}

属性与属性值必须完全匹配

<p class="important warning">This paragraph is a very important warning.</p>  
p[class="important warning"] {color: red;}

根据部分属性值选择

如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）。

p[class~="important"] {color: red;}

类型	描述
[abc^=”def”]	选择 abc 属性值以 “def” 开头的所有元素
[abc$=”def”]	选择 abc 属性值以 “def” 结尾的所有元素
[abc*=”def”]	选择 abc 属性值中包含子串 “def” 的所有元素

后代选择器

后代选择器（descendant selector）又称为包含选择器。
后代选择器可以选择作为某元素后代的元素。

h1 em {color:red;}
<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>

语法解释

在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符（combinator）。每个空格结合符可以解释为“… 在 … 找到”、“… 作为 … 的一部分”、“… 作为 … 的后代”，但是要求必须从右向左读选择器。
因此，h1 em 选择器可以解释为 “作为 h1 元素后代的任何 em 元素”。如果要从左向右读选择器，可以换成以下说法：“包含 em 的所有 h1 会把以下样式应用到该 em”。

具体应用

div.sidebar {background:blue;}
div.maincontent {background:white;}
div.sidebar a:link {color:white;}
div.maincontent a:link {color:blue;}

子元素选择器

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。

选择子元素

如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）。
例如，如果您希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：

h1 > strong {color:red;}

语法解释

子选择器使用了大于号（子结合符）。子结合符两边可以有空白符，这是可选的

结合后代选择器和子选择器

table.company td > p

上面的选择器会选择作为 td 元素子元素的所有 p 元素，这个 td 元素本身从 table 元素继承，该 table 元素有一个包含 company 的 class 属性。

相邻兄弟选择器

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。

选择相邻兄弟

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。

h1 + p {margin-top:50px;}

这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。

语法解释

相邻兄弟选择器使用了加号（+），即相邻兄弟结合符（Adjacent sibling combinator）。
注释：与子结合符一样，相邻兄弟结合符旁边可以有空白符。

用一个结合符只能选择两个相邻兄弟中的第二个元素。请看下面的选择器：

li + li {font-weight:bold;}

上面这个选择器只会把列表中的第二个和第三个列表项变为粗体。第一个列表项不受影响。

结合其他选择器

相邻兄弟结合符还可以结合其他结合符：

html > body table + ul {margin-top:20px;}

这个选择器解释为：选择紧接在 table 元素后出现的所有兄弟 ul 元素，该 table 元素包含在一个 body 元素中，body 元素本身是 html 元素的子元素。

伪类（Pseudo-classes）

伪类实例

a:hover
input:focus
:first-child
:lang

语法

selector : pseudo-class {property: value}

搭配CSS类使用

selector.class : pseudo-class {property: value}

伪类与CSS类

a.red : visited {color: #FF0000}

<a class="red" href="css_syntax.asp">CSS Syntax</a>

first-child

p:first-child {font-weight: bold;}
li:first-child {text-transform:uppercase;}

第一个规则将作为某元素第一个子元素的所有 p 元素设置为粗体。第二个规则将作为某个元素（在 HTML 中，这肯定是 ol 或 ul 元素）第一个子元素的所有 li 元素变成大写。

匹配第一个p元素

<html>
<head>
<style type="text/css">
p:first-child {
  color: red;
  } 
</style>
</head>

<body>
<p>some text</p>
<p>some text</p>
</body>
</html>

* 匹配所有 p 元素中的第一个 i 元素*

<html>
<head>
<style type="text/css">
p > i:first-child {
  font-weight:bold;
  } 
</style>
</head>

<body>
<p>some <i>text</i>. some <i>text</i>.</p>
<p>some <i>text</i>. some <i>text</i>.</p>
</body>
</html>

匹配所有作为第一个子元素的 p 元素中的所有 i 元素

<head>
<style type="text/css">
p:first-child i {
  color:blue;
  } 
</style>
</head>

<body>
<p>some <i>text</i>. some <i>text</i>.</p>
<p>some <i>text</i>. some <i>text</i>.</p>
</body>
</html>

CSS2 - :lang 伪类

:lang 伪类使你有能力为不同的语言定义特殊的规则。在下面的例子中，:lang 类为属性值为 no 的 q 元素定义引号的类型：

<html>
<head>

<style type="text/css">
q:lang(no)
   {
   quotes: "~" "~"
   }
</style>

</head>

<body>
<p>文字<q lang="no">段落中的引用的文字</q>文字</p>
</body></html>

伪元素

CSS 伪元素用于向某些选择器设置特殊效果

语法

selector:pseudo-element {property:value;}

配合CSS类使用
selector.class:pseudo-element {property:value;}

:first-line

“first-line” 伪元素用于向文本的首行设置特殊样式。
first-line” 伪元素只能用于块级元素。

:first-letter

“first-letter” 伪元素用于向文本的首字母设置特殊样式：

p:first-letter
  {
  color:#ff0000;
  font-size:xx-large;
  }

伪元素和 CSS 类

伪元素可以与 CSS 类配合使用：

p.article:first-letter
  {
  color: #FF0000;
  }

<p class="article">This is a paragraph in an article。</p>

多重伪元素

p:first-letter
  {
  color:#ff0000;
  font-size:xx-large;
  }

p:first-line
  {
  color:#0000ff;
  font-variant:small-caps;
  }

：before伪元素

“:before” 伪元素可以在元素的内容前面插入新内容。

h1:before
  {
  content:url(logo.gif);
  }

:after

“:after” 伪元素可以在元素的内容之后插入新内容。

h1:after
  {
  content:url(logo.gif);
  }

fishycx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS选择器

元素选择器最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身html {color:black;}h1 {color:blue;}h2 {color:silver;}CSS分组将 h2 和 p 选择器放在规则左边，然后用逗号
复制链接

扫一扫