css选择器操作
2018-11-19 本文已影响2人
邵毅超
伪类选择器
- 也就是说，不是id为hello的p元素设置样式。比如要定义id为“hello”的“p”元素之外的文字为红色
p:not(#hello){
color:red;
}
子元素选择器
- 子元素，例如“div”下的“a”标签设置“font-size”
div a{
font-size:40px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类、子元素选择器</title>
<style type="text/css">
<!--选择所有的元素，设置字号40px-->
a {
color: orange;
}
/*鼠标经过时*/
a:hover{
text-decoration: none;
font-size: 30px;
color: orangered;
}
/*鼠标点击时*/
a:active {
color: forestgreen;
}
p:hover{
background-color:orange;
text-decoration: underline;
color: blue;
}
/*获取焦点*/
#enter:focus{
background-color: lime;
}
#enter:hover{
background-color: transparent;
}
/*去除边框阴影*/
input,submit,a {
outline:0 none !important; blr:expression(this.onFocus=this.blur());
}
#submits:active{
border-radius:5px;
border-style: solid;
border-color:darkorange;
border: none;
}
#submits{
border-radius:5px;
border-style: solid;
border-color:darkorange;
background-color:gold;
color: #5bc8c3;
}
/*否定伪类*/
p:not(.hello){
color: red;
}
#enters a{
font-family: '华文彩云';
}
</style>
</head>
<body style="background-color: transparent;">
<a href="#">link</a>
<a href="#">links</a>
<p>dasfsadf</p>
<input type="text" value="搜索" id="enter">
<input type="submit" value="solo" id="submits">
<p id="enters"><a href="#">我是一个p元素</a></p>
<p>我是一个p元素</p>
<p class="hello">我是一个p元素</p>
</body>
</html>
image.png
