css003 选择器：明确设置哪些样式

css003 选择器：明确设置哪些样式

1、每个样式的两个部分：选择器和声明块

1、标签选择器：整体控制

2、类选择器：精确控制（.+字母、数字、连字符或下划线）

Css允许的类名为.+字母、数字、连字符或下划线（最前面的点一定要记得）且点之后的类名必须以字母开头。类名区分大小写。

3、ID选择器：控制特殊的网页元素

4、通用选择器：*{font-size: 18px;}

2、标签

1、祖先标签

2、派生标签：子孙标签

3、父标签：离一个标签最近的祖先标签为父标签（每个标签只有一个父标签）

4、子标签：同父标签相反（一个标签可以有多个子标签）

5、同胞标签：同一父标签并且彼此相邻的标签成为同胞标签

如果想对一段文字里面的个别词进行样式设计如：<p>wohenhao<strong>lal</strong></p>中的lal进行样式设计则在产生式中可以写：p strong{Color：red；}

3、选择器名称之间空格与否的区别

如：.contact .name{color:red;}  (有空格表示contact类下面的name类)

(若没有空格的话则表示两个类)

p.intro{ color: red; }  (没有空格，专用于<p>这个标签(<p class=”intro”>)才有效)

(有空格，可以直接用.intro替代，避免和没有空格的混淆)

4、伪类(pseudo-class)和伪元素(pseudo-element)

.a:link  正常的，未访问过的网页链接

.a:visited  已经访问过的链接

.a:hover  鼠标滑过时链接的外观的改变（可用到元素上，不一定要用在链接上）

.a:active  激活的链接

（更多的伪类）

:focus  与:hover及其相似

:before 能在指定的内容前面添加指定的东西。如<p classs=”tip”>

p.tip:before{ content:”HOT TIP” }

会在p元素的tip类钱插入文本HOT TIP

:after  和:befor 相反，指定内容插入到指定位置的后面

：：selection  (是双冒号的) （针对访问者已经在网页上选中的项目）(该选择器只能有color和background-color这连个属性)

如果想让选中的东西变成白色，并带有紫色背景：

::selection {color: #fff;  background-color: #993366;   }

如果只想让p元素里面的文本选中后变色，可以这样写：

p::selection {color: #fff;  background-color: #993366;   }

5、给段落定义样式

first-line  创建段落首行的样式

first-letter  创建段落首字母的样式

6、属性选择器

img[title]  如

<a href="#" class="sinaweibo"><img src="data:images/sina.png"></a>的css可以这样

a[ href=”#”]{ color:red; }

a[href^=”fttp://”]  ^表示以……开始

a[href$=”.pdf”]  $表示以……结束

7、子选择器

Body > h1 将选择body标签子标签里面的所有h1标签（注意子标签的定义）

:first-child

:last-child

:nth-child (有着强大的功能)可以将表格隔行设置不同的样式，可以设置不同列表项目的不同样式

设置表格行颜色交替

tr: nth-child(odd){ background-color: #993366; }  （偶数行）

tr: nth-child(even){ background-color: #993366; }  （奇数行）

tr: nth-child(3n+2){ background-color: #993366; }  (从第2个元素开始，没3个元素选择一次)

8、子类型选择器

:first-of-type

.sidebar p: first-of-type  (选择侧边栏的第一个段落)

:last-of-type  (同:first-of-type 用法)

:nth-of-tpe  (和nth-child 用法相似)

img:nth-of-type(odd) { float:left; }

img:nth-of-type(even) { float:right; }

 

9、同胞选择器

相邻同胞标签：  h2 + p{ color:red; }  (其中空格可选。（可选，就是可有可无，意思都一样）)

同胞标签：h2 ~ p{ color:red; }  （~表示选择h2的所有同胞标签。其中空格可选）

10、否定伪类  :not()选择器

如：<p class=”classy”>

.classy{color:red;}  （选择classy类的文本，使之变为红色）

P:not(.clasy){color:red;} (除了应用classy的类的文本都变成了红色)

如：a[href^=”fttp://”]：not([href*=”mysite.com”])   (表示以http://开始,并且不以mysite.com开始 。其中*表示包含)

局限性：

1、只能使用简单的选择器，如元素选择器，通用选择器，类选择器，ID选择器，伪类。

2、不能使用派生选择器

3、一个选择器中不能使用多个:not()选择器