CSS笔记（二）

1.CSS选择器（selector）

1.1什么是CSS选择器

按照一定的规则选出符合条件的元素，为之添加CSS样式

1.2选择器的种类繁多，大概可以这么归类

• 通用选择器（universal selector）
  作用于所有的元素

* {
 color: red;
}

<div>文字内容1</div>
<p>文字内容2</p>
<span>文字内容3</span>

效果：

image.png

一般用来给所有元素作一些通用性的设置比如内边距、外边距
京东用的就是这种方式
效率比较低，尽量不要使用

• 元素选择器（type selectors）
  所有的div元素

div {
    color: red;
}

<div>文字内容1</div>
<p>文字内容2</p>
<span>文字内容3</span
kdiv>文字内容4</div>

效果：

image.png

• 类选择器（class selectors）
  class值有one的元素

.one {
  color: red ;
}

<div class="two">文字内容1</div>
<p class="one">文字内容2</p>
<span class="two one">文字内容3</span
<div class="one"> 文字内容4</div>

效果：

image.png
注意点
一个元素可以有多个class值，每个class之间用空格隔开
class值如果由多个单词组成，单词之间可以用中划线-、下划线 连接，也可以使用驼峰标识
最好不要用标签名作为class值

• id选择器（id selectors）
  id值为one的元素

#one {
  color: red ;
}

<div id="two"> 文字内容1</div>
<p id="one">文字内容2</p>
<span id="three">文字内容3</span>
<div id="four"> 文字内容4</div>

效果：

image.png
注意点：
一个HTML文档里面的id值是唯一的，不能重复id值
如果由多个单词组成，单词之间可以用中划线、下划线连接，也可以使用驼峰标识
最好不要用标签名为id值
image.png
中划线又叫连字符（hyphen）

• 属性选择器（attribute selectors）

作用于拥有title属性的元素

[title] {
  color: red;
}

<div title="one"> 文字内容1</div>
<div>文字内容2</div>
<div>
<p title="two">文字内容3</p>
</div>
<span title=""> 文字内容4</span>

效果：

image.png

title属性值恰好等于one的元素

[title="one"] {
  color: red;
}

<div title="one">文字内容1</div>
<div>文字内容2</div>
<div>
<p title="one">文字内容3</p>
</div>
<span tit1e="two">文字内容4</span>

效果：

image.png

title属性值包含单词one的元素（且多个单词之间必须用空格隔开）

[title~="one"] {
color: red;

<div title="testonetwo"> 文字内容1</div>
<div title="testone two"> 文字内容2</div>
<div title="test one two">文字内容3</div>
<div title="test one">文字内容4</div>
<div title="one two"> 文字内容5</div>
<div title="one-two">文字内容6</div>
<div title="one_two"> 文字内容7</div>
<div title="one">文字内容8</div>
<span title="two">文字内容9</span>

效果：

image.png
image.png

title属性值恰好等于one或者以单词one开头且后面紧跟着连字符-的元素

image.png

title属性值以单词one开头的元素

image.png

title属性值以单词one结尾的元素

image.png

title 属性值包含单词one的元素

image.png

• 后代组合（combinators）
• 伪类（pseudo-classes）
• 伪元素（pseudo-elements）