CSS---选择器1

/*最常用的三种选择器,类选择器用的最多*/


/*标签选择器*/

p {
    color: red;
}


/*ID选择器*/

#p2 {
    color: green;
}


/*类选择器*/

.c1 {
    color: yellow;
}


/*------------------------------------------------*/
/*通用选择器*/
* {
    color: black;
}
/*组合选择器如下:*/
/*后代选择器*/
#d1 p {
    color: blueviolet;
}

/*儿子选择器*/
#d1 >p{

    color: brown;
}

/*毗邻选择器*/
/*选择所有紧接着<div>元素之后的<p>元素*/
div+p {
    margin: 5px;
  }

/*弟弟选择器*/
/*i1后面所有的兄弟p标签 --往下找--*/
#i1~p {
    border: 2px solid royalblue;
  }

 

伪类选择器:

/* 未访问的链接 */
a:link {
  color: #FF0000
}

/* 已访问的链接 */
a:visited {
  color: #00FF00
} 

/* 鼠标移动到链接上 */
a:hover {
  color: #FF00FF
} 

/* 选定的链接 */ 
a:active {
  color: #0000FF
}

/*input输入框获取焦点时样式*/
input:focus {
  outline: none;
  background-color: #eee;
}

 

posted @ 2018-12-19 17:13  向日葵的部落  阅读(116)  评论(0编辑  收藏  举报