一 属性选择器
/* type password */
/* 选中页面上type属性值等于password的所有元素 */
/* [type="paassword"]{
background-color: red;
} */
/* 选中页面上只要有name属性的所有元素 */
/* [name]{
background-color: red;
} */
/* 选中页面上name属性值包含text字符的所有元素 */
/* [name*="test"]{
background-color: yellowgreen;
} */
/* 选中页面上name属性值包含text字符的所有元素 但是要以test字符开头 */
/* [name^="test"]{
background-color: yellow;
} */
/* 选中页面上name属性值包含text字符的所有元素 但是要以test字符结尾 */
/* [name$="test"]{
background-color: blue;
} */
/* 选中name属性值，以test开头的div标签*/
div[name^="test"][title]{
background-color: rgb(179, 43, 106);
}
</style>
</head>
<body>
<input type="text" name="testwhr">
<br><br>
<input type="password" name="dahaitest">
<br><br>
<input type="text" name="nametest">
<br><br>
<input type="text" name="testhello">
<br><br>
<div name="divtest" title="wer">div1</div>
<br>
<div name="testdiv" title="ert">div2</div>
<br>
<div name="qwertestdiv">div3</div>
<br>
二 伪元素选择器
/*
1.E::first-letter 块级文本的第一个单词或字
2.E::first-line 块级文本的第一行
3.E::selection 可改变选中文本的样式
*/
/* 选中第一个字母 第一个文字 中日韩(CJK) 给文本添加样式 */
p::first-letter {
color: green;
font-size: 30px;
}
span::first-letter {
color: green;
font-size: 30px;
}
p::first-line {
background-color: red;
}
span::first-line {
background-color: red;
}
p::selection {
color: blue;
}
span::selection {
color: red;
background-color: yellow;
font-weight: 30px;
}
/* E::before和E::after** 在E元素内部的开始位置和结束位置创建一个元素，该元素为行内元素，且必须结合content属性使用。
注意：before与after表示在**盒子内部**的前端和后端插入内容。 */
/* 一个冒号是伪类选择器 两个冒号是伪元素选择器 */
div::before {
content: "day09,";
}
div::after {
content: " word";
}
ul li::after{
content: "...";
}
li:nth-child(1) ::before{
content: "张铭宇";
}
input::-webkit-input-placeholder{
color: red;
}
</style>
</head>
<body>
<p>锦上添花，读音：jǐn shàng tiān huā ，汉语成语。释义：意指在美丽的锦织物上再添加鲜花。比喻略加修饰使美者更美，引申比喻在原有成就的基础上进一步完善。 出处： 宋 黄庭坚 《了了庵颂》：“又要 涪翁
作颂，且图锦上添花。” 此外， 清 李渔 《凰求凤·让封》：“三位夫人恭喜贺喜，又做了状元的夫人，又进了簇新的房子，又释了往常的嫌隙，真个是锦上添花。” 毛泽东
《在延安文艺座谈会上的讲话》二：“对于他们，第一步需要还不是‘锦上添花’，而是‘雪中送炭’。所以在目前条件下，普及工作的任务更为迫切。”
</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus perspiciatis temporibus a molestias facilis
alias optio quibusdam voluptatibus. Id eveniet alias illo vero modi repudiandae esse cumque eos exercitationem
quisquam?</p>
<span>
锦上添花，读音：jǐn shàng tiān huā ，汉语成语。释义：意指在美丽的锦织物上再添加鲜花。比喻略加修饰使美者更美，引申比喻在原有成就的基础上进一步完善。 出处： 宋 黄庭坚 《了了庵颂》：“又要 涪翁
作颂，且图锦上添花。” 此外， 清 李渔 《凰求凤·让封》：“三位夫人恭喜贺喜，又做了状元的夫人，又进了簇新的房子，又释了往常的嫌隙，真个是锦上添花。” 毛泽东
《在延安文艺座谈会上的讲话》二：“对于他们，第一步需要还不是‘锦上添花’，而是‘雪中送炭’。所以在目前条件下，普及工作的任务更为迫切。”
</span>
<br><br>
<div>hello</div>
<ul>
<li>选项1</li>
<li>选项2</li>
<li>选项3</li>
</ul>
<input type="text" placeholder="请输入名字">
298
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
