css 选择器

css是用于控制页面布局和显示的语言。原理是,选中相应的对象,然后赋予它想要的布局和样式。需要通过选择器来获取目标对象。对CSS中的选择器做一个常规的整理和分类。

1. 选择器

  要给对象设置样式:选择器,声明(一个或者多个),声明(属性:值)组成,如下所示:

  selector { property1:value;property2:value;property3:value }   declaretion声明

2. 基本选择器

   CSS中的基本选择器有三种:元素选择器(标记,标签),类选择器,ID选择器。

   <p class="red" id="notice">大家好</p>
   对于这条HTML语句,要给他设置的样式是字体是红颜色的。
   可以使用选择器:   p{ }  .red{  } #notice{ }   
   设置颜色:color:red;

   可以使用这三种基本选择器中的任意一种即可完成颜色设置。

   2.1 元素选择器:

    找到document对象(html 文档)下面的所有的符合要求的元素。个数是零个,一个或者多个。

   2.2 类选择器:

    找出document对象(html 文档)下面的所有类是指定类的对象。有零个,一个或者多个。

   2.3 ID选择器:

    找出document对象(html 文档) 下面的所有的ID是指定ID的对象,可能是零个,一个或者多个,严格要求下一个文档中一个ID名只能用在一个对象上,所以个数为零个或者一个,多个则是错误的用法。

3. 复合选择器

   在实际开发中前面提供的三种选择器方式显得比较局限,可以使用上面的三种选择器扩展出很多复合型的,非常有用的选择。有:分组选择器,后代选择器,子元素选择器,相邻兄弟选择器,伪类选择器,伪元素选择器。为页面设计,提供了更多更丰富,更强大,更复杂的选择器。

   3.1 分组选择器

     分组选择器不是一种特定的选择器,而是将多选基本选择器以及其他类型的复合选择器用逗号隔开,使用相同的样式的选择器。如下所示:

     p,h1,span{}   "p,h1,span"共同构成了一个组合选择器,该选择器中定义的样式可以同时应用到p元素中,h1元素中,span元素中,组合选择器的成员可以是相同类型的选择器,也可以是不同类型的选择器。

   3.2属性选择器

    属性选择器,是根据指定的属性找出所有有这个属性的对象。而且这个属性在对象中的存在形式也是多种多样的。

   <input type="text"/>   <input type="button"/>
  上面的这个HTML语句,我们可以使用上文说到的元素选择器  input{} 进行选择,但是如果页面中有两个input ,,是不同的类型。这是为了给不同的input 设置不同的样式,可以采用属性选择器。
  input [type="text"]{}   input [type="button"]{} 这两个选择器及时属性选择器,可以省略前面的input,属性“type”在对象中的存在也有很多不同的形式。

   [attribute]                               用于选取带有指定属性的元素。

   [attribute=value]                     用于选取带有指定属性和值的元素。

   [attribute~=value]                  用于选取属性值中包含指定词汇的元素。

   [attribute|=value]                   用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。

   [attribute^=value]                  匹配属性值以指定值开头的每个元素。

   [attribute$=value]                  匹配属性值以指定值结尾的每个元素。

   [attribute*=value]                  匹配属性值中包含指定值的每个元素。

   3.3  后台选择器

    后代选择器是选择某个(祖先)选择器的指定后代,这个后台可以是“儿子”也可以是“孙子”,甚至更远的关系。中间使用“  ”(空格)隔开。

<ul>
  <li></li>
  <li></li>
  <li>
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </li>
</ul>

  如上面的HTML所示:<ul>的后代中有<li>,也有<ul>。  ul li{} 这个选择器会选中所有的li元素。

   3.4  子元素选择器

    子元素选择器是选择某个父选择器的指定“儿子”,而且必须是“儿子”,使用“>”号连接。

    在上面的HTML中,ul li{} 选中了所有的li,如果只要选择父元素ul下面的子元素li呢?这时就要用子元素选择器ul > li{}了。但是这两者的区别在这儿体现的不明显。

   3.5  相邻兄弟选择器

    相邻兄弟选择器是选择拥有同一个父元素的所有(兄弟姐妹)元素。 使用“+”号连接。

    在上面的HTML中,第一个ul的子元素li之间是一种兄弟关系,第二个ul的子元素也是一种兄弟关系。

   li + li {} 能选中兄弟关系的元素。

   3.6 伪类选择器

    <a></a>锚的伪类有四种,分别表示超链接的不同状态:

 a:link {color: #FF0000}		/* 未访问的链接 */
 a:visited {color: #00FF00}	/* 已访问的链接 */
 a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
 a:active {color: #0000FF}	    /* 选定的链接 */

   a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。a:active 必须被置于 a:hover 之后,才是有效的。

   :first-child 这个不是说某个的第一个子元素,而是以某个元素为第一子元素的元素。 在IE中必须要声明<!DOCTYPE html>才有效

   :lang() 向带有指定lang属性的元素添加样式。

  :focus  向某个拥有键盘输入焦点儿的元素设置样式。
   

CSS所有的选择器类型都已经在上面罗列,但不是说知道有哪几种选择器就可以了,选择器类型虽然有限,但是组合使用,结果有千变万化,很丰富,很强大。需要慢慢去实践,总结一套管用的选择器使用方法。

css 选择器,布布扣,bubuko.com

css 选择器

上一篇:promise处理多个相互依赖的异步请求


下一篇:maven配置阿里云仓库镜像