CSS 选择器

zhang1989101

浏览: 15081 次
性别:
来自: 上海

最近访客更多访客>>

omeweb

JackieChan007

xz168

rmp

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

CSS学习

css

1 CSS 元素选择器 (引用http://www.w3school.com.cn/css/css_selector_type.asp)
1.1 最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。
如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身：

<html>
<head>
<style type="text/css">
html {color:black;}
h1 {color:blue;}
h2 {color:silver;}
</style>
</head>

<body>
<h1>这是 heading 1</h1>
<h2>这是 heading 2</h2>
<p>这是一段普通的段落。</p>
</body>
</html>

   1.2 CSS 分组    选择器分组
    将任意多个选择器分组在一起，以逗号分隔对此没有任何限制

  h2, p {color:gray;}

   1.3 通配符选择器（*开头）
     CSS2 引入了一种新的简单选择器 - 通配选择器（universal selector），显示为一个星号（*）。该选择器可以与任何元素匹配，就像是一个通配符。
     例如，下面的规则可以使文档中的每个元素都为红色：

<html>
<head>
<style type="text/css">
*{color:red;}
</style>
</head>
<body>
<h1>这是 heading 1</h1>
<h2>这是 heading 2</h2>
<h3>这是 heading 3</h3>
<h4>这是 heading 4</h4>
<p>这是一段<b>普通</b>的段落文本。</p>
</body>
</html>

1.3 声明分组也就是多个属性写在一起，使用逗号分隔
h1 {font: 28px Verdana; color: white; background: black;}

2 CSS 类选择器详解(http://www.w3school.com.cn/css/css_selector_class.asp)

   <h1 class="important">
    This heading is very important.
    </h1>

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

   2.1 类选择器以 .开头
    .important {color:red;} (important 为类名)
   2.2 结合元素选择器
     类选择器可以结合元素选择器来使用。
      p.important {color:red;}
2.3 CSS 多类选择器
      一个元素的类有多个列表, .important.warning {background:silver;} 就能匹配

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

.important.urgent {background:silver;} 能匹配，但是不能匹配 

3 CSS ID 选择器详解（http://www.w3school.com.cn/css/css_selector_id.asp）
 语法： ID 选择器前面有一个 # 号，也称为棋盘号或井号。
 *#intro {font-weight:bold;} 或 #intro {font-weight:bold;} 匹配(前面一个*表示通配符) This is a paragraph of introduction.
 类选择器还是 ID 选择器？的区别
 区别 1：只能在文档中使用一次（id唯一）
 区别 2：不能使用 ID 词列表（id不能有列表，以空格分开多个值）

4 CSS 属性选择器详解(http://www.w3school.com.cn/css/css_selector_attribute.asp)
 CSS 2 引入了属性选择器。属性选择器可以根据元素的属性及属性值来选择元素
 4.1简单属性选择：希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。
 4.1.1 如果您希望把包含标题（title）的所有元素变为红色，可以写作：*[title] {color:red;}
 4.1.2 与上面类似，可以只对有 href 属性的锚（a 元素）应用样式：a[href] {color:red;}
 4.1.3 还可以根据多个属性进行选择，只需将属性选择器链接在一起即可。
例如，为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色，可以这样写:
 a[href][title] {color:red;}
<a title="W3School Home" href="http://w3school.com.cn">W3School</a> 生效
<a href="http://w3school.com.cn">W3School</a> 失效

4.2 根据具体属性值选择
4.2.1 单个属性值
 a[href="http://www.w3school.com.cn"] {color: red;}
4.2.2 多个属性值
 a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}

        <a href="http://www.w3school.com.cn/" title="W3School">W3School</a>
        <a href="http://www.w3school.com.cn/css/" title="CSS">CSS</a>
        <a href="http://www.w3school.com.cn/html/" title="HTML">HTML</a>

4.2.3 属性与属性值必须完全匹配
 p[class="important"] {color: red;} ：不匹配
 p[class="important warning"] {color: red;}：匹配
 This paragraph is a very important warning.
4.2.4 根据部分属性值选择
 如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）。
 p[class~="important"] {color: red;}
 This is a paragraph.</a> ：匹配
 This is a paragraph.</a> ：匹配
 This is a paragraph.</a> ：不匹配
4.2.3 子串匹配属性选择器
[attribute] 用于选取带有指定属性的元素。
[attribute=value] 用于选取带有指定属性和值的元素。
[attribute~=value] 用于选取属性值中包含指定词汇的元素。
[attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
*[lang|="en"] {color: red;}
Hello! ：匹配
Greetings!：匹配
G'day! ：不匹配
Bonjour! ：不匹配

[attribute^=value] 匹配属性值以指定值开头的每个元素。
[attribute$=value] 匹配属性值以指定值结尾的每个元素。
[attribute*=value] 匹配属性值中包含指定值的每个元素。

5 CSS 后代选择器
后代选择器（descendant selector）又称为包含选择器。
5.1 根据上下文选择元素
 h1 em {color:red;} (h1和em需要以空格分开)
<h1>This is a important heading</h1> ：匹配
This is a important paragraph. ：不匹配

6 CSS 子元素选择器
 与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。
 h1 > strong {color:red;} （改成后代选择器 h1 strong {color:red;}那么都匹配）
<h1>This is very very important.</h1> ：匹配
<h1>This is really very important.</h1> ：不匹配
 语法解释：
 您应该已经注意到了，子选择器使用了大于号（子结合符），两边可以有空白符，这是可选的。

7 CSS 相邻兄弟选择器(也就是后面一个元素)
 如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。
例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：
h1 + p{margin-top:50px;font-weight:bold}
这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h1 + p{margin-top:50px;font-weight:bold}
</style>
</head>
<body>
<h1>This is a heading.</h1>
<p>One.</p>   ：只有这个元素生效,因为这个元素紧跟在h1元素的后面
<p>Two</p>
<p>Three</p>
</body>
</html>

8 CSS 伪类 (Pseudo-classes)
8.1 语法
伪类的语法： selector : pseudo-class {property: value}
CSS 类也可与伪类搭配使用。selector.class : pseudo-class {property: value}
PS :提示：伪类名称对大小写不敏感。

8.2 例子 1 - 匹配第一个 元素
在下面的例子中，选择器匹配作为任何元素的第一个子元素的 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>

8.3 例子 2 - 匹配所有 元素中的第一个 元素
在下面的例子中，选择器匹配所有 元素中的第一个 元素：

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

<body>
<p> <i>text</i>生效
    <i>text</i> 未生效
</p>
<p> <i>text</i>生效
    <i>text</i> 未生效
</p>
</body>
</html>

8.4 例子 3 - 匹配所有作为第一个子元素的 元素中的所有 元素
在下面的例子中，选择器匹配所有作为元素的第一个子元素的 元素中的所有 元素：

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

<body>
<p> <i>text</i>生效
    <i>text</i> 生效
</p>
<p> <i>text</i>未生效
    <i>text</i> 未生效
</p>
</body>
</html>

8.5
伪类
W3C："W3C" 列指示出该属性在哪个 CSS 版本中定义（CSS1 还是 CSS2）。

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

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>

显示结果：（相当于替换了值）

一些文本前置值"段落中的引用后置值一些文本。

9 CSS 伪元素 (Pseudo-elements)
CSS 伪元素用于向某些选择器设置特殊效果。
9.1 语法
伪元素的语法： selector:pseudo-element {property:value;}
CSS 类也可以与伪元素配合使用： selector.class:pseudo-element {property:value;}

9.2 :first-line 伪元素
"first-line" 伪元素用于向文本的首行设置特殊样式。"first-line" 伪元素只能用于块级元素。
注释：下面的属性可应用于 "first-line" 伪元素：
font
color
background
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

(P段落第一行文字才变颜色)

<html>
<head>
<style type="text/css">
p:first-line 
{
color: #ff0000;
font-variant: small-caps
}
</style>
</head>

<body>
<p>
You can use the :first-line pseudo-element to add a special effect to the first line of a text!
</p>
</body>

</html>

9.3 :first-letter 伪元素（通上述 9.2 ）
"first-letter" 伪元素只能用于块级元素。
"first-letter" 伪元素用于向文本的首字母设置特殊样式：
p段落第一个字母变颜色，第一个字是中文那就是中文变颜色
p:first-letter
{
 color:#ff0000;
}

9.4 伪元素和 CSS 类
 伪元素可以与 CSS 类配合使用：
p.article:first-letter
 {
 color: #FF0000;
 }
This is a paragraph in an article。
上面的例子会使所有 class 为 article 的段落的首字母变为红色。

9.5 CSS2 - :before 伪元素
":before" 伪元素可以在元素的内容前面插入新内容

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h1:before { content: "前置内容";}   //前置文字
//  h1:before { content:url(logo.gif);}   //前置图片
</style>
</head>

<body>
<h1>This is a heading</h1>
<p>The :before pseudo-element inserts content before an element.</p>
</body>
</html>

效果：
前置内容This is a heading
The :before pseudo-element inserts content before an element.

9.5 CSS2 - :after 伪元素 (同上述9.4)
":after" 伪元素可以在元素的内容之后插入新内容。

分享到：

CSS 定位 (Positioning) | CSS3 新增的属性

2017-02-08 17:39
浏览 578
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

CSS 选择器

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

CSS 选择器

评论

发表评论

相关推荐

网页设计中常用的19个Web安全字体

CSS 一些元素

CSS 框模型概述 CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式

CSS 定位 (Positioning)

CSS3 新增的属性

最近访客更多访客>>

CSS 框模型概述 CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式