2.Css——选择器

Css选择器

 

选择器类型

代码

选择所有元素

Style元素:*{}

根据类型选择元素

Style元素:a{}

Body元素:<a>内容</a>

根据类选择元素

Style元素:.class1{}

Body元素:<p class=”class1”>内容</p>

根据ID选择元素

Style元素:#id1{}

Body元素:<p id=”id1”>内容</p>

根据属性选择元素

Style元素:[href] {}

Body元素:<a href=”1cssprimary”>内容</a>

:选择器动作

Style元素:a:hover{}

Body元素:<a>内容</a>

派生选择器:下面这段代码的意义是:li标签中的strong标签将被设置成如下效果

li strong{

              color:blue;font-size:20px;

             }

属性和值选择器:

如果在style中title的值没有给出,那么body中怎么写无所谓。如果给定了,则必须在body中按照给定的相应的值。

 

选择器扩展:

 

A

B

C

 

一 、元素选择器

 

h1 { }

 

 

二 、选择器分组

 

h1,h2{ }

 

*{ }

 

 

三.、类选择器

 

.xx{ }

a.class{ } 结合元素选择器

.class.class{ }多类选择器

 

四、id选择器

 

#xx{ }

 

 

五、属性选择器

[title]{ }

 

[href="xx"]{ }

 

[title~="title"]{ }

 

六、后代选择器

p strong i{ }

 

 

 

 

 

七、子元素选择器

 

 

h1>strong{ }

 

 

 

 

八、相邻兄弟选择器

 

 

p+h1{ }

 

 

 

 

发布了20 篇原创文章 · 获赞 17 · 访问量 150

猜你喜欢

转载自blog.csdn.net/weixin_46319702/article/details/105052437