3选择器下_选择器中href中包含-CSDN博客

本文链接：https://blog.csdn.net/qq_23666533/article/details/75807539

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>3选择器下</title>
<link rel="stylesheet" type="text/css" href="3选择器下,style.css">

</head>
<body>

用户名：<input type="text" style="padding:30px 20px 10px" value="请输入用户名" disabled=""> 
用户名：<input type="text" style="padding:15px 25px 35px " value="请输入用户名"> 
电话：<input type="tel" name="tel"> 
<input type="checkbox" name="dx" value="平面设计">平面设计 
<input type="button" value="vip1" > 
<input type="button" value="vip2"> 
<input type="button" value="vip3"> 
<input type="button" value="hjvip4"> 
<input type="button" value="bjvip4"> 
<input type="button" value="zsvip4"> 
<a href="http://www.baidu.com">百度</a> 
<a href="http://www.dafs.cn">XXX</a> 
HTML5

<ul type="disc">
<li>列表项1</li>
<li>列表项1</li>
<li>列表项1</li>
<li>列表项1</li>
<ol start="8">
<li>列表项1</li>
<li value="56">列表项1</li>
<li>
<ul>
<li>
我只有一个li
</li>
</ul>
</li>
<li>列表项1</li>
</ol>
</ul>
<hr>

<div id="div1">
<h1>11111111111</h1>
pppppp
pppppp
pppppp
</div>

<div id="div2">
<h2>22222222222222</h2>
pppppp
pppppp
pppppp

<h3>333333333333</h3>
pppppp
pppppp
pppppp

</div>

</html>

----------------------------------------------------------------------------------------css---------------------------------------------------------------------------------------------

/*input[type][name]{background:red}
/*属性选择器，只选择具有type属性和name属性的input元素加样式*/

/*input[value="vip1"]{background:green}
/*属性选择器，只选择具有value属性且值为vip1的input元素加样式*/

/*input[style~="15px"]{background:blue}
/*属性选择器，只选择具有style属性且属性值有多个（包括15px）的input元素加样式（charome和edge不兼容，IE正常）*/

/*p[lang|="en"]{color:yellow}
/*属性选择器，只选择具有lang属性且属性值以en开头并用连接符“-”分割的字符串的input元素加样式*/

/*input[value^="vip"]{background:red}
/*属性选择器，只选择具有value属性且属性值以vip开头的input元素加样式*/

/*a[href^="http"]{background:green}
/*属性选择器，只选择具有href属性且属性值以http开头的a元素加样式*/

/*a[href$="cn"]{background:yellow}
/*属性选择器，只选择具有href属性且属性值以cn结尾的a元素加样式*/

/*input[value*="vip4"]{background:blue}
/*属性选择器，只选择具有value属性且属性值包含vip字段的input元素加样式*/

/*ul li{color:red;border:1px solid}
div p{color:green}
/*后代选择器又称包含选择器，选择作为某个元素后一代或几代的元素*/

/*ul>li{color:red;border:1px solid}
/*后代选择器又称包含选择器，选择作为某个元素后一代的元素*/

/*h2+p{color:red}
/*相邻选择器，选择在h2元素之后紧贴着的p元素*/

/*h2~p{color:green}
/*兄弟选择器，选择在h2元素之后所有的p元素*/

/*p::first-letter{font-size:30px}
/*伪元素选择器,选择p元素的第一个字符*/

/*p::first-line{font-size:20px}
/*伪元素选择器,选择p元素的第一个字符*/

/*a::before{content:"点击"}
/*伪元素选择器,在a元素文字之前加上文字（也可以是图片）“点击”*/

/*a::after{content:"点击"}
/*伪元素选择器,在a元素文字之后加上文字（也可以是图片）“点击”*/

/*p::selection{color:red}
/*伪元素选择器，设置对象被选中时的颜色*/

/*:root{color:red}
/*结构伪类选择器，选择根元素*/

/*li:first-child{ color:green}
/*结构伪类选择器，选择父元素的第一个子或孙元素li*/

/*ul>li:first-child{ color:green}
/*结构伪类选择器，选择父元素ul元素的第一个子元素li但不包括孙元素li*/

/*li:only-child{color:red}
/*结构伪类选择器，选择父元素仅有的一个子元素li（父元素里只能有一个li元素，不能有其他元素）*/

/*p:only-of-type{color:red}
/*结构伪类选择器，不管父元素里有多少种其他类型元素，只要父元素里只有一个p元素*/

/*p:nth-child(2){color:red}
/*结构伪类选择器，父元素的第n个子元素，前面有不同于p类型的元素也计数，（）里可以为数字，奇（odd）偶（even），3n倍数公式*/

/*p:nth-last-child(2){color:green}
/*结构伪类选择器，父元素的倒数第n个子元素，前面有不同于p类型的元素也计数，（）里可以为数字，奇（odd）偶（even），3n倍数公式*/

/*p:first-of-type{color:red}
/*结构伪类选择器，匹配同类型的第一个同级元素p*/

/*p:last-of-type{color:green}
/*结构伪类选择器，匹配同类型的最后一个同级元素p*/

/*p:nth-of-type(3){color:red}
/*结构伪类选择器，匹配同类型的第n个同级元素p*/

/*p:nth-last-of-type(3){color:green}
/*结构伪类选择器，匹配同类型的倒数第n个同级元素p*/

/*div:empty{width:300px;height:400px;background:red}
/*结构伪类选择器，匹配没有任何子元素（包括text节点）的元素div，空格也不能有*/

/*UI选择器*/
a:active{color:red}
/*向被激活的元素a加样式*/

a:hover{color:green}
/*当鼠标悬浮在a元素上方时，添加样式*/

a:link{color:gray}
/*向未被访问过的a标签添加样式*/

a:visited{color:yellow}
/*向已被访问过的a标签添加样式*/

input:focus{background:green}
/*向获得键盘输入焦点的元素input添加样式*/

p:lang(en){color:red}
/*向带有指定lang属性的元素添加样式*/

input:checked{width:60px;height:30px}
/*选择每个被选中的input元素*/

input:enabled{background:red}
/*选择每个被启用的input元素*/

input:disabled{background:blue}
/*选择每个被禁用的input元素*/

a:target{color:red}
/*选择当前活动的元素(某个被链接的元素)*/

/*:not(input){color:yellow}
/*选择除input元素之外的元素*/