DB

WBOY
Release: 2016-06-07 15:38:57
Original
1297 people have browsed it

理想很丰满,现实很骨感。为了丰满起来,再接再厉吧兄弟! 这里我只说一些在某些教科书上很少或根本不曾提及的选择器的用法。 1.类选择器 比如说: .class1{font:3cm}.class2{color:red} 如果样式表里出现这样的选择器呢? .class1.class2{background:yellow

理想很丰满,现实很骨感。为了丰满起来,再接再厉吧兄弟!



这里我只说一些在某些教科书上很少或根本不曾提及的选择器的用法。


1.类选择器


比如说:

.class1{font:3cm}
.class2{color:red}
Copy after login


如果样式表里出现这样的选择器呢?

.class1.class2{background:yellow}
Copy after login


2.根据元素属性来选择元素

还是用例子来说明问题:

a[alt]{border:3px solid red;}
Copy after login

比如说:

 CSDN

扩展:

*[title]{font-weight:bold;}表示选择所有具有"title“属性的元素。

a[href="http://www.csdn.net"]{font-weight:bold;}

img[title~="Figure"]{border:1px solid gray;}

[title^="bar"] 选择title属性以"bar“开头的所有元素。

[title$="bar]  选择title属性以"bar"结尾的所有元素。

[title*="bar"]  选择title属性中包含子字符串"bar”的所有元素。

此外还有:

父子选择器:h1>strong{};表示只选择作为h1子元素的strong元素。

兄弟选择器:h1+strong{};表示选择紧邻着h1的兄弟strong元素。


Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template