前端技术学习之选择器（十二）

来源：互联网发布：firewall cmd 80端口编辑：程序博客网时间：2024/06/06 12:25

十三，::selection选择器

之前看到有些网站选中内容的颜色和背景色都不是平时看到的蓝色和白色。今天有兴趣查看了一下，原来是一个很简单的CSS3的选择器::selection的用法。

代码例子：

<!DOCTYPE HTML>

<style>

.selectColor::selection{color:#fff;background:pink;}

</style>

<body>

<p>普通文本，不设置::section,选中时文本的颜色为白色，背景色为蓝色</p>

<p class="selectColor">选择文本的颜色为白色，背景色为粉色</p>

</body>

</html>

运行效果：

十四，:read-only

:read-only选择器用来指定处于只读状态元素的样式。简单说就是设置了“readonly”=readonly的元素。

代码例子：

<!DOCTYPE HTML>

form {

width: 300px;

padding: 10px;

border: 1px solid #ccc;

margin: 50px auto;

}

form > input {

margin-bottom: 10px;

}

input[type="text"] {

border: 1px solid orange;

padding: 5px;

background: #fff;

border-radius: 5px;

}

input[type="text"]:read-only {

border-color: #ccc;

}

</style>

<form>

姓名:<input type="text"name="fullname"/>

<br />

国籍:<input type="text"name="country"value="China"readonly="readonly"/>

<br />

</form>

</body>

</html>

运行效果：

注：有了【:read-only】，再来个与之相反的【:read-write】意思很明确，就是即可读，也可写的元素设置样式。我觉得这个选择器可能只是充数的，为了让css3选择器成为一个体系而加的，因为默认情况就是可读可写的啊。上面的例子中如果改一点样式：给input[type="text"]加上:read-write选择器

0 0