【web基础】CSS选择器



************************************************************************ ***** 请阅读原文： blog.csdn.net/clark_xu   ***** 欢迎关注微信公众号：clark_blog ************************************************************************   1 CSS选择器

1.1元素选择器

以html标签的名称

p/h1{

}

input元素中，文本框，单选框等都一个样式

1.2类选择器，不同的标签细分；

css文件中： .s1{..}

html页面中：<元素class=”s1”>

缺点：文本框的使用难题；

1.3元素ID选择器

css中：    #aaa{}

html页面中：<元素id=”aaa”>

缺点：两种文本框的难题；

1.4分类选择器,同一种标签细分

div.smal{

        border:1pxsolid red;

        width:100px;

        height:100px:

}

div.large

{

        border:1pxsolid black

        width:300px

        height:300px

}

  <divclass="small">div中的文本</div>

  <divclass=large>div2的文本</div>

  <h6class=small>h6 text</h6>

1.5分组选择器:为不同的元素定义相同的部分；

css文件中：

        h1,h2,s1,#aaa,div.small

{       

        width:100px

}

页面各个框架的统一的宽度；使用分组选择器，统一定义宽度，这样每个选择器的定义就可以不使用宽度；

1.6派生选择器：使用元素的父子关系；

        diva

{…}

 

Html中：<div> aa  <a> ss</a>  bb</dev>

只作用于ss字符  

用途：login的链接，下面菜单的链接；

         可以用分类链接；导航里面的链接比较多，定义比较麻烦；

id=navi

        css: #navi a {

}

        当某个元素中，包含大量相同子元素的问题，用派生

        例如一级菜单，二级菜单，这样使用派生选择器非常简洁；

1.7伪类选择器：超级链接的默认样式。不同状态的样式

蓝色——press红色——点过之后，变为紫色

a：link未访问过

a：active激活过

a:visited访问过的

        ：hover悬浮—鼠标移入

        ：focus获得焦点时，变大；

        ：

例如：

        a:hover

{

 font-size:15pt;

}

a:visited

{

   color:orange;

}

p.first:hover

{

   backgroup-color:gray;

}