赞
踩
属性选择符:
a[target="_blank"] { text-decoration: none; }
(选择所有target="_blank"
的<a>
元素)- /* 选择所有具有class属性的h1元素 */
- h1[class] {
- color: silver;
- }
-
- /* 选择所有具有href属性的a元素 */
- a[href] {
- text-decoration: underline;
- }
- /* 选择所有name属性值为"username"的input元素 */
- input[name="username"] {
- border: 1px solid black;
- }
-
- /* 选择所有class属性值为"highlight"的元素 */
- .highlight, [class="highlight"] {
- background-color: yellow;
- }
- /* 选择所有class属性值中包含"row-"的div元素 */
- div[class*="row-"] {
- border-bottom: 1px solid #ccc;
- }
-
- /* 选择所有id属性值以"nav-"开头的元素 */
- [id^="nav-"] {
- color: navy;
- }
伪类选择符:
:hover
:用户悬停在元素上时。:active
:元素被用户激活时(如点击)。:visited
:用户已访问的链接。:first-child
:其父元素的第一个子元素。伪元素选择符:
::before
:在元素内容之前插入内容。::after
:在元素内容之后插入内容。::first-line
:选择元素的第一行。::first-letter
:选择元素的第一个字母。h1, h2 { color: blue; }
(选择所有<h1>
和<h2>
元素)div p { color: green; }
(选择所有<div>
元素内的<p>
元素)>
):div > p { color: purple; }
(所有直接位于<div>
元素内的<p>
元素)子元素选择符使用
>
符号来选择某个元素的直接子元素。与后代选择符不同,子元素选择符仅选择直接的子元素,而不包括孙子元素、曾孙元素等
+
):div + p { margin-top: 20px; }
(紧接在<div>
元素后的<p>
元素)~
)h1 ~ p { font-size: 14px; }
(<h1>
元素之后的所有<p>
兄弟元素)大多数与文本相关的CSS属性都是可继承的。这些属性主要包括:
font-family
, font-size
, font-weight
, font-style
, font-variant
, font-stretch
, font-size-adjust
, font
, line-height
text-indent
, text-align
, text-transform
, text-decoration
, letter-spacing
, word-spacing
, white-space
, vertical-align
(对于内联元素和表格单元格), text-shadow
, direction
, unicode-bidi
color
, opacity
(注意,opacity
继承会影响元素的透明度,但不会影响其颜色值本身)list-style-type
, list-style-position
, list-style-image
, list-style
border-collapse
, border-spacing
, empty-cells
, caption-side
cursor
, visibility
, speak
大部分与布局和盒子模型相关的CSS属性都是不可继承的。这些属性包括:
width
, height
, margin
, padding
, border
, display
, position
, float
, clear
, top
, right
, bottom
, left
, overflow
, clip
, z-index
, box-sizing
, flex
, grid
布局属性等background
, background-color
, background-image
, background-repeat
, background-position
, background-size
, background-attachment
, border-color
, border-style
, border-width
, border-radius
等opacity
(当作为单独属性时,而非从color
继承), visibility: collapse
(对于表格行、行组、列和列组), content
, counter-reset
, counter-increment
, outline
, quotes
, volume
, speak-header
, speak-numeral
, speak-punctuation
, voice-family
, volume
, pitch
, pitch-range
, stress
, richness
, azimuth
, elevation
等Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。