2012-12-28 16 views
8

W mojej strony zrobiłem cały div niedostępny, za pomocą tego css (które dostałem od stackoverflow to samo)make tekst wybierane wewnątrz Nie można wybrać div

.unselectable { 
    -moz-user-select: -moz-none; 
    -khtml-user-select: none; 
    -webkit-user-select: none; 

    /* 
    Introduced in IE 10. 
    See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/ 
    */ 
    -ms-user-select: none; 
    user-select: none; 
} 

Teraz mam tag h2 wewnątrz to nierozróżnialne div.I chcę, aby h2 stał się do wyboru. Czy jest jakiś sposób, aby to osiągnąć łatwo.

Zapomniałem o czymś z mojego pytania. Mam trzy h2 w moim kodzie i potrzebuję konkretnej do wybrania, więc dodałem klasę do tego h2 i wypróbowałem coś takiego .unselectable: not (.class-of-h2) (który dostałem od poniżej odpowiedzi). ale jej nie działa

Odpowiedz

17

użyć jako elementu h2

.unselectable h2{ 
-moz-user-select: text; 
-khtml-user-select: text; 
-webkit-user-select: text; 
-ms-user-select: text; 
user-select: text; 
} 

See demo

+0

Nie wiem, czy to jest odpowiednia odpowiedź, czy nie, ale to zdecydowanie zadziałało. – Athul

+0

Tak, wygląda na to, że w ten sposób można nadpisać ustawienie elementu nadrzędnego. [Strona MDN na temat "user-select"] (https://developer.mozilla.org/en-US/docs/CSS/user-select?redirectlocale=en-US&redirectslug=CSS%2F-moz-user-select) jest nieco mylący: ogólnie 'none' pozwala na przesłonięcie wewnętrznych elementów, ale Firefox ma inną konfigurację:' none' nie zezwala na nadpisywanie, '-moz-none' ma. –

1

można użyć

 .unselectable:not(h2:nth-child(2)) { 
     //your data 
     } 

nie można wykluczyć element z listy selektora
może to uczynić całe div nie można wybrać z wyjątkiem h2 elementu.

+0

: Ja zapomniałem s O co chodzi w moim pytaniu. Mam trzy h2 w moim kodzie i potrzebuję konkretnej do wybrania, więc dodałem klasę do tej h2 i wypróbowałem coś takiego: .unselectable: not (.class-of-h2)., ale nie działa – Athul

+0

możesz użyj .unselectable: not (h2: nth-child (2)) coś w tym stylu .. – sourcecode

2

Wystarczy dodać poniżej CSS

.unselectable h2 { 
    -moz-user-select: text; 
    -khtml-user-select: auto; 
    -webkit-user-select: auto ; 
    -ms-user-select: auto; 
    user-select: auto; 
} 

Zobacz demo